@opengeoweb/shared 12.4.1 → 12.4.2

package/index.esm.js

@@ -1816,6 +1816,55 @@ var useWheelStopPropagation = function useWheelStopPropagation() {
   return ref;
 };
 
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+/**
+ *  This hook allows to stop wheel events from propagating to parent elements.
+ *  Normally, when you scroll a child element, the scroll event will propagate to the parent element,
+ *  as calling event.stopPropagation() on syncthetic events does not stop the propagation
+ */
+var useScrollingInIsolation = function useScrollingInIsolation(options) {
+  var scrollInIsolationRef = React__default.useRef(null);
+  React__default.useEffect(function () {
+    var element = scrollInIsolationRef.current;
+    if (!element) {
+      return;
+    }
+    var handleWheel = function handleWheel(event) {
+      if (event.metaKey || event.ctrlKey) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      if (options != null && options.onWheel) {
+        options.onWheel(event);
+      }
+    };
+    element.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    // eslint-disable-next-line consistent-return
+    return function () {
+      element.removeEventListener('wheel', handleWheel);
+    };
+  }, [options]);
+  return scrollInIsolationRef;
+};
+
 var ConfirmationServiceContext = /*#__PURE__*/React.createContext(Promise.reject);
 var useConfirmationDialog = function useConfirmationDialog() {
   return React.useContext(ConfirmationServiceContext);
@@ -3990,7 +4039,7 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
+var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
   _excluded2 = ["className", "additionalStyling"];
 var TooltipSelect = function TooltipSelect(_ref) {
   var _ref$tooltip = _ref.tooltip,
@@ -4001,8 +4050,6 @@ var TooltipSelect = function TooltipSelect(_ref) {
     currentIndex = _ref$currentIndex === void 0 ? -1 : _ref$currentIndex,
     _ref$onChangeMouseWhe = _ref.onChangeMouseWheel,
     onChangeMouseWheel = _ref$onChangeMouseWhe === void 0 ? function () {} : _ref$onChangeMouseWhe,
-    _ref$requiresCtrlToCh = _ref.requiresCtrlToChange,
-    requiresCtrlToChange = _ref$requiresCtrlToCh === void 0 ? false : _ref$requiresCtrlToCh,
     isEnabled = _ref.isEnabled,
     hasBackgroundColor = _ref.hasBackgroundColor,
     _ref$variant = _ref.variant,
@@ -4019,10 +4066,10 @@ var TooltipSelect = function TooltipSelect(_ref) {
     tooltipOpen = _useControlledTooltip[0],
     setTooltipOpen = _useControlledTooltip[1];
   var onWheel = React.useCallback(function (event) {
-    if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
-      if (selectOpen) {
-        return;
-      }
+    if (selectOpen) {
+      return;
+    }
+    if (event.ctrlKey || event.metaKey) {
       var direction = event.deltaY < 0 ? 1 : -1;
       var newIndex = currentIndex - direction;
       if (newIndex < 0 || newIndex >= list.length) {
@@ -4030,7 +4077,7 @@ var TooltipSelect = function TooltipSelect(_ref) {
       }
       onChangeMouseWheel(list[newIndex]);
     }
-  }, [selectOpen, currentIndex, list, onChangeMouseWheel, requiresCtrlToChange]);
+  }, [selectOpen, currentIndex, list, onChangeMouseWheel]);
   var onOpen = React.useCallback(function () {
     setSelectOpen(true);
     setTooltipOpen(false);
@@ -4054,11 +4101,15 @@ var TooltipSelect = function TooltipSelect(_ref) {
   var onBlur = React.useCallback(function () {
     setTooltipOpen(false);
   }, [setTooltipOpen]);
+  var scrollInIsolationRef = useScrollingInIsolation({
+    onWheel: onWheel
+  });
   return jsx(CustomTooltip, {
     title: tooltip,
     placement: "top",
     open: tooltipOpen,
     children: jsx(StyledSelect, Object.assign({
+      ref: scrollInIsolationRef,
       variant: variant,
       disableUnderline: true,
       onOpen: onOpen,
@@ -4067,7 +4118,6 @@ var TooltipSelect = function TooltipSelect(_ref) {
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
-      onWheel: onWheel,
       isEnabled: isEnabled,
       hasBackgroundColor: hasBackgroundColor,
       additionalStyling: additionalStyling,
@@ -6282,4 +6332,4 @@ var SystemScope = {
   system: 'system'
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, loadAllTranslations, pollingIntervalTimeout, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, loadAllTranslations, pollingIntervalTimeout, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useScrollingInIsolation, useUserMenu, useWheelStopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "12.4.1",
+  "version": "12.4.2",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "12.4.1",
+    "@opengeoweb/theme": "12.4.2",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",
     "lodash": "^4.17.21",

package/src/lib/components/TooltipSelect/TooltipSelect.d.ts

@@ -8,7 +8,6 @@ type TooltipSelectProps = Omit<BaseSelectProps, 'sx'> & {
     list?: ListElement[];
     currentIndex?: number;
     onChangeMouseWheel?: (element: ListElement) => void;
-    requiresCtrlToChange?: boolean;
     isEnabled?: boolean;
     hasBackgroundColor?: boolean;
     variant?: SelectVariants;

package/src/lib/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useIsMounted/useIsMounted';
 export * from './useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow';
 export * from './useDebounce/useDebounce';
 export * from './useWheelStopPropagation/useWheelStopPropagation';
+export * from './useScrollingInIsolation/useScrollingInIsolation';

package/src/lib/hooks/useScrollingInIsolation/useScrollingInIsolation.d.ts

@@ -0,0 +1,11 @@
+/**
+ *  This hook allows to stop wheel events from propagating to parent elements.
+ *  Normally, when you scroll a child element, the scroll event will propagate to the parent element,
+ *  as calling event.stopPropagation() on syncthetic events does not stop the propagation
+ */
+import React from 'react';
+interface ScrollInIsolationProps {
+    onWheel?: (event: WheelEvent) => void;
+}
+export declare const useScrollingInIsolation: <T extends HTMLElement>(options?: ScrollInIsolationProps) => React.RefObject<T>;
+export {};

package/src/lib/hooks/useScrollingInIsolation/useScrollingInIsolation.spec.d.ts

@@ -0,0 +1 @@
+export {};