qwc2 2025.12.15 → 2025.12.17

package/components/IdentifyViewer.js

@@ -57,6 +57,7 @@ import VectorLayerUtils from '../utils/VectorLayerUtils';
 import Icon from './Icon';
 import NavBar from './widgets/NavBar';
 import Spinner from './widgets/Spinner';
+import ToggleSwitch from './widgets/ToggleSwitch';
 import './style/IdentifyViewer.css';
 var EXCLUDE_PROPS = ['featurereport', 'displayfield', 'layername', 'layertitle', 'layerinfo', 'attribnames', 'clickPos', 'displayname', 'bbox'];
 var EXCLUDE_ATTRS = ['htmlContent', 'htmlContentInline'];
@@ -334,7 +335,9 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       generatingReport: false,
       selectedLayer: '',
       compareEnabled: false,
-      currentPage: 0
+      multiViewEnabled: false,
+      currentPage: 0,
+      pageSize: 1
     });
     _defineProperty(_this, "getCurrentResultFeature", function () {
       var _this$state$resultTre, _this$state$resultTre2, _this$state$resultTre3, _this$state$currentRe;
@@ -720,7 +723,13 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       var selected = _this.state.selectedResults.has(key);
       return /*#__PURE__*/React.createElement("div", {
         className: resultClass,
-        key: key
+        key: key,
+        onMouseEnter: function onMouseEnter() {
+          return _this.setHighlightedFeatures([feature]);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this.setHighlightedFeatures(null);
+        }
       }, /*#__PURE__*/React.createElement("div", {
         className: "identify-result-title"
       }, _this.props.collapsible ? /*#__PURE__*/React.createElement(Icon, {
@@ -737,7 +746,8 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         icon: selected ? "checked" : "unchecked",
         onClick: function onClick() {
           return _this.toggleSelectedResult(key);
-        }
+        },
+        title: LocaleUtils.tr("identify.selectforcompare")
       }) : null, /*#__PURE__*/React.createElement("span", null, (_this.props.showLayerTitles ? feature.layertitle + ": " : "") + feature.displayname), zoomToFeatureButton, /*#__PURE__*/React.createElement(Icon, {
         icon: "info-sign",
         onClick: function onClick() {
@@ -761,6 +771,34 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         };
       });
     });
+    _defineProperty(_this, "initBody", function (el) {
+      if (el) {
+        // HACK to trigger an additional repaint, since Safari/Chrome on iOS render the element cut off the first time
+        el.style.background = 'inherit';
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var contentRectEntry = entries.find(function (entry) {
+            return entry.contentRect;
+          });
+          if (contentRectEntry) {
+            _this.computePageSize(contentRectEntry.contentRect);
+          }
+        });
+        resizeObserver.observe(el);
+        _this.bodyEl = el;
+      }
+    });
+    _defineProperty(_this, "computePageSize", function (rect) {
+      var s = 2 * _this.props.resultGridSize;
+      if (_this.state.multiViewEnabled && (rect.height >= s || rect.width >= s)) {
+        _this.setState({
+          pageSize: rect.height >= s && rect.width >= s ? 4 : 2
+        });
+      } else {
+        _this.setState({
+          pageSize: 1
+        });
+      }
+    });
     _defineProperty(_this, "renderToolbar", function (results) {
       var resultCount = results.length;
       var toggleButton = function toggleButton(key, icon, disabled) {
@@ -781,12 +819,12 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       var infoLabel = null;
       if (_this.state.compareEnabled) {
         infoLabel = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.comparing", _this.state.selectedResults.size()));
-      } else if (_this.props.resultDisplayMode !== 'paginated') {
+      } else {
         infoLabel = /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("identify.featurecount", resultCount));
       }
       var checkedPages = results.reduce(function (res, entry, idx) {
         if (_this.state.selectedResults.has(entry[0] + "$" + entry[1].id)) {
-          return [].concat(_toConsumableArray(res), [idx]);
+          return [].concat(_toConsumableArray(res), [Math.floor(idx / _this.state.pageSize)]);
         }
         return res;
       }, []);
@@ -796,9 +834,9 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         className: "identify-toolbar-spacer"
       }), infoLabel, /*#__PURE__*/React.createElement("span", {
         className: "identify-toolbar-spacer"
-      }), _this.props.resultDisplayMode === 'paginated' ? /*#__PURE__*/React.createElement(NavBar, {
+      }), _this.props.resultDisplayMode === 'paginated' && !_this.state.compareEnabled ? /*#__PURE__*/React.createElement(NavBar, {
         currentPage: _this.state.currentPage,
-        nPages: resultCount,
+        nPages: Math.ceil(resultCount / _this.state.pageSize),
         pageChanged: function pageChanged(page) {
           return _this.setState({
             currentPage: page
@@ -835,7 +873,14 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           key: layer,
           value: layer
         }, _this.state.resultTree[layer][0].layertitle);
-      }))))), exportEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.export"), ":"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+      }))))), _this.props.resultDisplayMode === 'paginated' ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.multiview")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ToggleSwitch, {
+        active: _this.state.multiViewEnabled,
+        onChange: function onChange(active) {
+          return _this.setState({
+            multiViewEnabled: active
+          });
+        }
+      }))) : null, exportEnabled ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("identify.export"), ":"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
         className: "controlgroup"
       }, /*#__PURE__*/React.createElement("select", {
         className: "controlgroup-expanditem",
@@ -1128,6 +1173,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
     _this.resultsTreeRef = null;
     _this.currentResultElRef = null;
     _this.scrollIntoView = false;
+    _this.bodyEl = null;
     _this.state.exportFormat = !Array.isArray(props.enableExport) ? 'geojson' : props.enableExport[0];
     return _this;
   }
@@ -1161,6 +1207,9 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           };
         });
       }
+      if (this.state.multiViewEnabled !== prevState.multiViewEnabled) {
+        this.computePageSize(this.bodyEl.getBoundingClientRect());
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -1182,8 +1231,12 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         });
       }).flat();
       if (this.state.compareEnabled) {
+        var style = {
+          gridTemplateColumns: "repeat(auto-fit, minmax(".concat(this.resultGridSize / 2 - 2, "px, 1fr))")
+        };
         body = /*#__PURE__*/React.createElement("div", {
-          className: "identify-compare-results"
+          className: "identify-compare-results",
+          style: style
         }, this.state.selectedResults.entries().map(function (key) {
           var _key$split3 = key.split("$"),
             _key$split4 = _slicedToArray(_key$split3, 2),
@@ -1205,37 +1258,36 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
             layerid = _ref26[0],
             features = _ref26[1];
           return features.map(function (feature) {
-            return /*#__PURE__*/React.createElement("div", {
-              key: layerid + "$" + feature.id,
-              onMouseEnter: function onMouseEnter() {
-                return _this2.setHighlightedFeatures([feature]);
-              },
-              onMouseLeave: function onMouseLeave() {
-                return _this2.setHighlightedFeatures(null);
-              }
-            }, _this2.renderResultAttributes(layerid, feature, 'identify-result-frame'));
+            return _this2.renderResultAttributes(layerid, feature, 'identify-result-frame');
           });
         }));
-      } else if (this.props.resultDisplayMode === 'paginated' && this.state.currentPage < flatResults.length) {
-        var _flatResults$this$sta = _slicedToArray(flatResults[this.state.currentPage], 2),
-          layerid = _flatResults$this$sta[0],
-          feature = _flatResults$this$sta[1];
-        body = /*#__PURE__*/React.createElement("div", {
-          className: "identify-flat-results-list",
-          onMouseEnter: function onMouseEnter() {
-            return _this2.setHighlightedFeatures([feature]);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return _this2.setHighlightedFeatures(null);
-          }
-        }, this.renderResultAttributes(layerid, feature, 'identify-result-frame'));
+      } else if (this.props.resultDisplayMode === 'paginated') {
+        if (this.state.multiViewEnabled) {
+          var results = flatResults.slice(this.state.currentPage * this.state.pageSize, (this.state.currentPage + 1) * this.state.pageSize);
+          var _style = {
+            gridTemplateColumns: "repeat(auto-fit, minmax(".concat(this.resultGridSize - 2, "px, 1fr))")
+          };
+          body = /*#__PURE__*/React.createElement("div", {
+            className: "identify-compare-results",
+            style: _style
+          }, results.map(function (_ref27) {
+            var _ref28 = _slicedToArray(_ref27, 2),
+              layerid = _ref28[0],
+              feature = _ref28[1];
+            return _this2.renderResultAttributes(layerid, feature, 'identify-result-frame');
+          }));
+        } else if (this.state.currentPage < flatResults.length) {
+          var _flatResults$this$sta = _slicedToArray(flatResults[this.state.currentPage], 2),
+            layerid = _flatResults$this$sta[0],
+            feature = _flatResults$this$sta[1];
+          body = /*#__PURE__*/React.createElement("div", {
+            className: "identify-flat-results-list"
+          }, this.renderResultAttributes(layerid, feature, 'identify-result-frame'));
+        }
       }
-      // "el.style.background='inherit'": HACK to trigger an additional repaint, since Safari/Chrome on iOS render the element cut off the first time
       return /*#__PURE__*/React.createElement("div", {
         className: "identify-body",
-        ref: function ref(el) {
-          if (el) el.style.background = 'inherit';
-        }
+        ref: this.initBody
       }, body, flatResults.length > 0 ? this.renderToolbar(flatResults) : null);
     }
   }]);
@@ -1261,6 +1313,7 @@ _defineProperty(IdentifyViewer, "propTypes", {
   removeLayer: PropTypes.func,
   replaceImageUrls: PropTypes.bool,
   resultDisplayMode: PropTypes.string,
+  resultGridSize: PropTypes.number,
   setActiveLayerInfo: PropTypes.func,
   showLayerSelector: PropTypes.bool,
   showLayerTitles: PropTypes.bool,
@@ -1278,6 +1331,7 @@ _defineProperty(IdentifyViewer, "defaultProps", {
   },
   enableAggregatedReports: true,
   resultDisplayMode: 'flat',
+  resultGridSize: 200,
   showLayerTitles: true,
   showLayerSelector: true,
   highlightAllResults: true

package/components/ResizeableWindow.js

@@ -306,6 +306,11 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
       if (el) {
         _this.rnd = el;
         _this.rnd.updatePosition(_this.state.geometry);
+        // Set focus to first focusable element
+        if (_this.props.visible) {
+          var _this$rnd$resizableEl, _this$rnd$resizableEl2, _this$rnd$resizableEl3;
+          (_this$rnd$resizableEl = _this.rnd.resizableElement) === null || _this$rnd$resizableEl === void 0 || (_this$rnd$resizableEl = _this$rnd$resizableEl.current) === null || _this$rnd$resizableEl === void 0 || (_this$rnd$resizableEl2 = _this$rnd$resizableEl.querySelector) === null || _this$rnd$resizableEl2 === void 0 || (_this$rnd$resizableEl2 = _this$rnd$resizableEl2.call(_this$rnd$resizableEl, '[tabindex="0"]')) === null || _this$rnd$resizableEl2 === void 0 || (_this$rnd$resizableEl3 = _this$rnd$resizableEl2.focus) === null || _this$rnd$resizableEl3 === void 0 || _this$rnd$resizableEl3.call(_this$rnd$resizableEl2);
+        }
       }
     });
     _defineProperty(_this, "onDragStart", function () {
@@ -495,8 +500,11 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         return;
       }
       if (this.rnd && this.props.visible && this.props.visible !== prevProps.visible) {
+        var _this$rnd$resizableEl4, _this$rnd$resizableEl5, _this$rnd$resizableEl6;
         this.props.onGeometryChanged(this.state.geometry);
         this.rnd.updatePosition(this.state.geometry);
+        // Set focus to first focusable element
+        (_this$rnd$resizableEl4 = this.rnd.resizableElement) === null || _this$rnd$resizableEl4 === void 0 || (_this$rnd$resizableEl4 = _this$rnd$resizableEl4.current) === null || _this$rnd$resizableEl4 === void 0 || (_this$rnd$resizableEl5 = _this$rnd$resizableEl4.querySelector) === null || _this$rnd$resizableEl5 === void 0 || (_this$rnd$resizableEl5 = _this$rnd$resizableEl5.call(_this$rnd$resizableEl4, '[tabindex="0"]')) === null || _this$rnd$resizableEl5 === void 0 || (_this$rnd$resizableEl6 = _this$rnd$resizableEl5.focus) === null || _this$rnd$resizableEl6 === void 0 || _this$rnd$resizableEl6.call(_this$rnd$resizableEl5);
       }
       if (this.state.geometry !== prevState.geometry) {
         this.props.onGeometryChanged(this.state.geometry);

package/components/SearchBox.js

@@ -266,7 +266,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
             resultsVisible: false
           });
         },
-        setMaxWidth: true
+        setMaxWidth: true,
+        spaceKeyActivation: false
       }, children);
     });
     _defineProperty(_this, "renderRecentResults", function () {
@@ -789,6 +790,12 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       deflt = deflt !== null && deflt !== void 0 ? deflt : _this.props.searchOptions.sectionsDefaultCollapsed || false;
       return (_this$state$collapsed = _this.state.collapsedSections[section]) !== null && _this$state$collapsed !== void 0 ? _this$state$collapsed : deflt;
     });
+    _defineProperty(_this, "setSearchBoxRef", function (el) {
+      _this.searchBox = el;
+      if (el && _this.props.searchOptions.focusOnStartup) {
+        el.focus();
+      }
+    });
     _defineProperty(_this, "toggleFilterOptions", function (visible) {
       _this.setState({
         filterOptionsVisible: visible
@@ -845,7 +852,8 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         searchResults: {},
         selectedProvider: '',
         filterRegionName: "",
-        filterGeometry: null
+        filterGeometry: null,
+        resultsVisible: false
       });
       _this.props.removeLayer('searchselection');
       UrlParams.updateParams({
@@ -1201,9 +1209,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         placeholder: placeholder,
-        ref: function ref(el) {
-          _this3.searchBox = el;
-        },
+        ref: this.setSearchBoxRef,
         role: "input",
         type: "text",
         value: this.state.searchText
@@ -1252,6 +1258,7 @@ _defineProperty(SearchBox, "propTypes", {
   replacePlaceholderLayer: PropTypes.func,
   searchOptions: PropTypes.shape({
     allowSearchFilters: PropTypes.bool,
+    focusOnStartup: PropTypes.bool,
     hideResultLabels: PropTypes.bool,
     highlightStyle: PropTypes.object,
     minScaleDenom: PropTypes.number,

package/components/SideBar.js

@@ -100,6 +100,10 @@ var SideBar = /*#__PURE__*/function (_React$Component) {
       if (newVisible && (!oldVisible || this.props.currentTask.mode !== prevProps.currentTask.mode)) {
         this.setState({
           render: true
+        }, function () {
+          var _this2$sidebar$queryS, _this2$sidebar$queryS2;
+          // Set focus to first focusable element
+          (_this2$sidebar$queryS = _this2.sidebar.querySelector('[tabindex="0"]')) === null || _this2$sidebar$queryS === void 0 || (_this2$sidebar$queryS2 = _this2$sidebar$queryS.focus) === null || _this2$sidebar$queryS2 === void 0 || _this2$sidebar$queryS2.call(_this2$sidebar$queryS);
         });
         this.props.onShow(this.props.currentTask.mode);
       } else if (!newVisible && oldVisible) {

package/components/style/IdentifyViewer.css

@@ -70,7 +70,8 @@ div.identify-body div.identify-result-frame {
     border: 1px solid var(--border-color);
 }
 
-div.identify-body div.identify-result-frame:hover {
+div.identify-body div.identify-result-frame:hover,
+div.identify-body div.identify-result-tree-frame:hover {
     border: 1px solid var(--color-active);
 }
 
@@ -112,14 +113,15 @@ div.identify-body .identify-result-tree-frame > div.identify-result-container {
 }
 
 div.identify-compare-results {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    gap: 0.25em;
+    grid-template-columns: repeat(auto-fit, minmax(calc(198px), 1fr));
     overflow: auto;
     flex: 1 1 auto;
 }
 
-div.identify-compare-results > div.identify-result-frame {
-    flex: 1 1 20em;
+div.identify-compare-results > div {
+    overflow: auto;
 }
 
 div.identify-body .identify-result-box {

package/components/widgets/EditableSelect.js

@@ -65,7 +65,8 @@ var EditableSelect = /*#__PURE__*/function (_React$Component) {
           return _this.setState({
             popup: false
           });
-        }
+        },
+        spaceKeyActivation: false
       }, options) : null;
     });
     _defineProperty(_this, "renderSelectedOption", function () {

package/components/widgets/LayerCatalogWidget.js

@@ -47,7 +47,8 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_this, "toggleLayerListEntry", function (path) {
       _this.setState(function (state) {
-        var newCatalog = _toConsumableArray(state.catalog);
+        var catalogKey = _this.state.filteredCatalog ? "filteredCatalog" : "catalog";
+        var newCatalog = _toConsumableArray(state[catalogKey]);
         newCatalog[path[0]] = _objectSpread({}, newCatalog[path[0]]);
         var cur = newCatalog[path[0]];
         var _iterator = _createForOfIteratorHelper(path.slice(1)),
@@ -64,9 +65,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
           _iterator.f();
         }
         cur.expanded = !cur.expanded;
-        return {
-          catalog: newCatalog
-        };
+        return _defineProperty({}, catalogKey, newCatalog);
       });
     });
     _defineProperty(_this, "setFilter", function (text) {
@@ -79,13 +78,22 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         }
         var filter = new RegExp(removeDiacritics(text).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i");
         var _filterCatalogEntry = function filterCatalogEntry(res, entry) {
+          var titleMatches = removeDiacritics(entry.title).match(filter);
           if (entry.sublayers) {
-            var newEntry = _objectSpread(_objectSpread({}, entry), {}, {
-              sublayers: entry.sublayers.reduce(_filterCatalogEntry, []),
-              expanded: true
-            });
-            return newEntry.sublayers.length > 0 ? [].concat(_toConsumableArray(res), [newEntry]) : res;
-          } else if (removeDiacritics(entry.title).match(filter)) {
+            var matchedSublayers = entry.sublayers.reduce(_filterCatalogEntry, []);
+            if (!isEmpty(matchedSublayers)) {
+              return [].concat(_toConsumableArray(res), [_objectSpread(_objectSpread({}, entry), {}, {
+                sublayers: matchedSublayers,
+                expanded: true
+              })]);
+            } else if (titleMatches) {
+              return [].concat(_toConsumableArray(res), [_objectSpread(_objectSpread({}, entry), {}, {
+                expanded: false
+              })]);
+            } else {
+              return res;
+            }
+          } else if (titleMatches) {
             return [].concat(_toConsumableArray(res), [entry]);
           } else {
             return res;
@@ -102,16 +110,19 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       var _entry$name;
       var asGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var resource = entry.resource ? LayerUtils.splitLayerUrlParam(entry.resource) : null;
+      var stripQuery = function stripQuery(url) {
+        return (url !== null && url !== void 0 ? url : "").split("?")[0];
+      };
       var existingSublayers = _this.props.layers.reduce(function (res, layer) {
         var _entry$type, _entry$url;
-        if (layer.type === ((_entry$type = entry.type) !== null && _entry$type !== void 0 ? _entry$type : resource === null || resource === void 0 ? void 0 : resource.type) && layer.url === ((_entry$url = entry.url) !== null && _entry$url !== void 0 ? _entry$url : resource === null || resource === void 0 ? void 0 : resource.url)) {
+        if (layer.type === ((_entry$type = entry.type) !== null && _entry$type !== void 0 ? _entry$type : resource === null || resource === void 0 ? void 0 : resource.type) && stripQuery(layer.url) === stripQuery((_entry$url = entry.url) !== null && _entry$url !== void 0 ? _entry$url : resource === null || resource === void 0 ? void 0 : resource.url)) {
           return [].concat(_toConsumableArray(res), _toConsumableArray(LayerUtils.getSublayerNames(layer)), [layer.name]);
         }
         return res;
       }, []);
       if (existingSublayers.includes((_entry$name = entry.name) !== null && _entry$name !== void 0 ? _entry$name : resource === null || resource === void 0 ? void 0 : resource.name)) {
-        var _ref;
-        var text = (_ref = LocaleUtils.tr("themelayerslist.existinglayers") + ": " + entry.title) !== null && _ref !== void 0 ? _ref : entry.name;
+        var _ref2;
+        var text = (_ref2 = LocaleUtils.tr("themelayerslist.existinglayers") + ": " + entry.title) !== null && _ref2 !== void 0 ? _ref2 : entry.name;
         var actions = [{
           name: LocaleUtils.tr("themelayerslist.addanyway"),
           onClick: function onClick() {
@@ -195,7 +206,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/React.createElement("div", {
         key: key,
         style: {
-          paddingLeft: indentSize + 'em'
+          paddingLeft: 0.5 * indentSize + 'em'
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "layer-catalog-widget-entry"

package/components/widgets/MenuButton.js

@@ -30,8 +30,10 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "onMenuClicked", function () {
       if (!_this.props.disabled) {
-        _this.setState({
-          popup: true
+        _this.setState(function (state) {
+          return {
+            popup: !state.popup
+          };
         });
       }
     });
@@ -39,6 +41,9 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
       ev.stopPropagation();
       if (_this.state.selected) {
         _this.props.onActivate(_this.state.selected);
+        _this.setState({
+          popup: false
+        });
       } else {
         _this.onMenuClicked();
       }

package/components/widgets/NavBar.js

@@ -88,7 +88,8 @@ var NavBar = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.currentPage <= 0 || this.props.disabled,
         onClick: function onClick() {
           return _this2.props.pageChanged(_this2.props.currentPage - 1);
-        }
+        },
+        title: LocaleUtils.tr("navbar.prev")
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "chevron-left"
       })), pages[0] > 0 || pages[0] === -1 ? this.pageButton(0) : null, pages.map(this.pageButton), pages[pages.length - 1] < this.props.nPages - 1 ? this.pageButton(this.props.nPages - 1) : null, /*#__PURE__*/React.createElement("button", {
@@ -96,7 +97,8 @@ var NavBar = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.currentPage >= this.props.nPages - 1 || this.props.disabled,
         onClick: function onClick() {
           return _this2.props.pageChanged(_this2.props.currentPage + 1);
-        }
+        },
+        title: LocaleUtils.tr("navbar.next")
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "chevron-right"
       })), this.props.pageSizes.length > 1 ? /*#__PURE__*/React.createElement("select", {

package/components/widgets/PopupMenu.js

@@ -47,6 +47,20 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
         _this.menuEl.focus();
       }
     });
+    _defineProperty(_this, "handleMenuClick", function (ev) {
+      var disabled = false;
+      for (var el = ev.target; ev.currentTarget.contains(el); el = el.parentElement) {
+        if (el.attributes.disabled !== undefined) {
+          disabled = true;
+        }
+      }
+      if (disabled || _this.props.keepMenuOpen) {
+        MiscUtils.killEvent(ev);
+      } else {
+        var _this$props$onClose, _this$props;
+        (_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
+      }
+    });
     _defineProperty(_this, "keyNav", function (ev) {
       if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
         var childCount = _this.menuEl.children.length;
@@ -66,11 +80,11 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
         }
         MiscUtils.killEvent(ev);
       } else if (ev.key === 'Escape') {
-        var _this$props$onClose, _this$props, _this$props$anchor3, _this$props$anchor3$f;
-        (_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
+        var _this$props$onClose2, _this$props2, _this$props$anchor3, _this$props$anchor3$f;
+        (_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 || _this$props$onClose2.call(_this$props2);
         (_this$props$anchor3 = _this.props.anchor) === null || _this$props$anchor3 === void 0 || (_this$props$anchor3$f = _this$props$anchor3.focus) === null || _this$props$anchor3$f === void 0 || _this$props$anchor3$f.call(_this$props$anchor3);
         MiscUtils.killEvent(ev);
-      } else if (ev.key === 'Enter' || ev.key === ' ') {
+      } else if (ev.key === 'Enter' || ev.key === ' ' && _this.props.spaceKeyActivation) {
         MiscUtils.killEvent(ev);
       } else if (ev.key !== 'Tab' && ev.key !== 'Shift') {
         var _this$props$anchor4, _this$props$anchor4$f;
@@ -98,8 +112,8 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
         _this.shields[i].style.zIndex = 0;
         setTimeout(function () {
           return _this.shields[i].addEventListener('click', function () {
-            var _this$props$onClose2, _this$props2;
-            (_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 || _this$props$onClose2.call(_this$props2);
+            var _this$props$onClose3, _this$props3;
+            (_this$props$onClose3 = (_this$props3 = _this.props).onClose) === null || _this$props$onClose3 === void 0 || _this$props$onClose3.call(_this$props3);
           });
         }, 0);
         _this.container.appendChild(_this.shields[i]);
@@ -108,14 +122,15 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
         _loop(i);
       }
       _this.container.style.pointerEvents = 'none';
+    } else {
+      setTimeout(function () {
+        return _this.container.addEventListener('click', function () {
+          var _this$props$onClose4, _this$props4;
+          (_this$props$onClose4 = (_this$props4 = _this.props).onClose) === null || _this$props$onClose4 === void 0 || _this$props$onClose4.call(_this$props4);
+        });
+      }, 0);
     }
     _this.menuEl = null;
-    setTimeout(function () {
-      return _this.container.addEventListener('click', function () {
-        var _this$props$onClose3, _this$props3;
-        (_this$props$onClose3 = (_this$props3 = _this.props).onClose) === null || _this$props$onClose3 === void 0 || _this$props$onClose3.call(_this$props3);
-      });
-    }, 0);
     document.body.appendChild(_this.container);
     return _this;
   }
@@ -141,7 +156,15 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _rect$left, _rect, _rect$bottom, _rect2, _ref, _rect$width, _rect3, _this$props$disabledI;
+      var _rect$left,
+        _rect,
+        _rect$bottom,
+        _rect2,
+        _ref,
+        _rect$width,
+        _rect3,
+        _this$props$disabledI,
+        _this2 = this;
       if (isEmpty(this.props.children)) {
         return null;
       }
@@ -179,6 +202,7 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
       var children = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
       return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
         className: "popup-menu " + this.props.className,
+        onClick: this.handleMenuClick,
         onKeyDown: this.keyNav,
         onMouseLeave: this.clearFocus,
         ref: this.setFocus,
@@ -189,7 +213,9 @@ var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
         return /*#__PURE__*/React.cloneElement(child, {
           className: className,
           tabIndex: child.props.disabled ? undefined : 0,
-          onKeyDown: child.props.disabled ? undefined : MiscUtils.checkKeyActivate,
+          onKeyDown: child.props.disabled ? undefined : function (ev) {
+            return MiscUtils.checkKeyActivate(ev, null, _this2.props.spaceKeyActivation);
+          },
           onMouseOver: child.props.disabled ? undefined : function (ev) {
             return ev.target.focus();
           }
@@ -203,10 +229,15 @@ _defineProperty(PopupMenu, "propTypes", {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
   disabledItemClass: PropTypes.string,
+  keepMenuOpen: PropTypes.bool,
   onClose: PropTypes.func,
   setMaxWidth: PropTypes.bool,
+  spaceKeyActivation: PropTypes.bool,
   width: PropTypes.number,
   x: PropTypes.number,
   y: PropTypes.number
 });
+_defineProperty(PopupMenu, "defaultProps", {
+  spaceKeyActivation: true
+});
 export { PopupMenu as default };