@opengeoweb/shared 9.37.0 → 10.0.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox, ListItemButton } from '@mui/material';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, ThemeTypes, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import * as React from 'react';
 import React__default, { useRef, Component, useState } from 'react';
@@ -1626,19 +1626,29 @@ var AppHeader = function AppHeader(_ref) {
   });
 };
 
-var _excluded$a = ["bounds", "children"];
+var _excluded$a = ["bounds", "setIsDragging", "children", "onStop"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
     bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
+    setIsDragging = _ref.setIsDragging,
     children = _ref.children,
+    onStop = _ref.onStop,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
+    setIsDragging && setIsDragging(true);
     e.preventDefault();
   };
+  var onDragStop = function onDragStop(event, pos) {
+    setIsDragging && setIsDragging(false);
+    onStop && onStop(event, pos);
+  };
   return jsx(Draggable, Object.assign({
     bounds: bounds
   }, props, {
+    onStop: function onStop(event, pos) {
+      return onDragStop(event, pos);
+    },
     enableUserSelectHack: false,
     onStart: onDragStart,
     children: children
@@ -2519,15 +2529,19 @@ var DraggableComponent = function DraggableComponent(_ref) {
   var _React$useState2 = React__default.useState(startSize),
     size = _React$useState2[0],
     setSize = _React$useState2[1];
+  var _React$useState3 = React__default.useState(false),
+    isDragging = _React$useState3[0],
+    setIsDragging = _React$useState3[1];
   var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
   var onStopDrag = React__default.useCallback(function (_event, position) {
     setPosition(position);
     onDragEnd(position, size);
   }, [setPosition, onDragEnd, size]);
-  var _React$useState3 = React__default.useState(defaultInitialMaxHeight),
-    initialMaxHeight = _React$useState3[0],
-    setInitialMaxHeight = _React$useState3[1];
+  var _React$useState4 = React__default.useState(defaultInitialMaxHeight),
+    initialMaxHeight = _React$useState4[0],
+    setInitialMaxHeight = _React$useState4[1];
   var onStartResize = function onStartResize() {
+    setIsDragging(true);
     setInitialMaxHeight('initial');
   };
   var onResize = React__default.useCallback(function (_event, handle, node, delta) {
@@ -2544,6 +2558,7 @@ var DraggableComponent = function DraggableComponent(_ref) {
     parent.style.transform = "translate(" + newPos.x + "px, " + newPos.y + "px)";
   }, [onChangeSize, position, isRightAligned]);
   var onStopResize = function onStopResize(_event, direction, node, delta) {
+    setIsDragging(false);
     setPosition(calculateNewPosition(position, isRightAligned, direction, delta));
     onResizeStop(_event, direction, node, delta);
   };
@@ -2560,54 +2575,67 @@ var DraggableComponent = function DraggableComponent(_ref) {
       setSize(size);
     }
   });
-  return isOpen ? jsx(DraggableComponent$1, {
-    nodeRef: nodeRef,
-    bounds: bounds,
-    cancel: cancel,
-    position: position,
-    onStop: onStopDrag,
-    handle: "." + headerClassName,
-    onMouseDown: onMouseDown,
-    children: jsx(Box, {
-      tabIndex: -1,
-      sx: Object.assign({
+  return isOpen ? jsxs(Fragment, {
+    children: [isDragging && jsx(Box, {
+      "data-testid": "dragging-overlay",
+      sx: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         position: 'absolute',
-        pointerEvents: 'all',
-        zIndex: zIndex
-      }, startPosition, sx, {
-        '&:hover .resizableHandle': {
-          display: 'inline'
-        }
-      }),
-      ref: nodeRef,
-      className: "toolContainerDraggable",
-      role: "dialog",
-      "aria-label": title,
-      children: jsx(ResizeComponent, Object.assign({}, props, {
-        size: size,
-        setSize: setSize,
-        onResizeStart: onStartResize,
-        onResizeStop: onStopResize,
-        onResize: onResize,
-        nodeRef: nodeRef,
-        children: jsx(ToolContainer, {
-          maxHeight: initialMaxHeight,
-          onClose: onClose,
-          title: title,
-          size: headerSize,
-          isDraggable: true,
-          isResizable: true,
-          elevation: elevation,
-          headerClassName: headerClassName,
-          leftHeaderComponent: leftHeaderComponent,
-          rightHeaderComponent: rightHeaderComponent,
-          dragHandleIcon: dragHandleIcon,
-          closeIcon: closeIcon,
-          className: className,
-          children: children
-        })
-      }))
-    })
+        zIndex: 999
+      }
+    }), jsx(DraggableComponent$1, {
+      nodeRef: nodeRef,
+      bounds: bounds,
+      cancel: cancel,
+      position: position,
+      onStop: onStopDrag,
+      handle: "." + headerClassName,
+      onMouseDown: onMouseDown,
+      setIsDragging: setIsDragging,
+      children: jsx(Box, {
+        tabIndex: -1,
+        sx: Object.assign({
+          position: 'absolute',
+          pointerEvents: 'all',
+          zIndex: zIndex
+        }, startPosition, sx, {
+          '&:hover .resizableHandle': {
+            display: 'inline'
+          }
+        }),
+        ref: nodeRef,
+        className: "toolContainerDraggable",
+        role: "dialog",
+        "aria-label": title,
+        children: jsx(ResizeComponent, Object.assign({}, props, {
+          size: size,
+          setSize: setSize,
+          onResizeStart: onStartResize,
+          onResizeStop: onStopResize,
+          onResize: onResize,
+          nodeRef: nodeRef,
+          children: jsx(ToolContainer, {
+            maxHeight: initialMaxHeight,
+            onClose: onClose,
+            title: title,
+            size: headerSize,
+            isDraggable: true,
+            isResizable: true,
+            elevation: elevation,
+            headerClassName: headerClassName,
+            leftHeaderComponent: leftHeaderComponent,
+            rightHeaderComponent: rightHeaderComponent,
+            dragHandleIcon: dragHandleIcon,
+            closeIcon: closeIcon,
+            className: className,
+            children: children
+          })
+        }))
+      })
+    })]
   }) : null;
 };
 
@@ -4773,130 +4801,6 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
 });
 
-var FilterLabel = function FilterLabel(_ref) {
-  var name = _ref.name;
-  return jsx(Typography, {
-    variant: "body2",
-    sx: {
-      fontSize: '16px',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden'
-    },
-    children: name
-  });
-};
-var FilterListItem = function FilterListItem(_ref2) {
-  var filter = _ref2.filter,
-    _ref2$toggleFilter = _ref2.toggleFilter,
-    toggleFilter = _ref2$toggleFilter === void 0 ? function () {} : _ref2$toggleFilter,
-    _ref2$enableOnlyOneFi = _ref2.enableOnlyOneFilter,
-    enableOnlyOneFilter = _ref2$enableOnlyOneFi === void 0 ? function () {} : _ref2$enableOnlyOneFi,
-    children = _ref2.children;
-  var _useSharedTranslation = useSharedTranslation(),
-    t = _useSharedTranslation.t;
-  var _React$useState = React.useState(false),
-    isHovering = _React$useState[0],
-    setIsHovering = _React$useState[1];
-  var handleMouseEnter = React.useCallback(function () {
-    setIsHovering(true);
-  }, []);
-  var handleMouseLeave = React.useCallback(function () {
-    setIsHovering(false);
-  }, []);
-  var selectOnlyOne = function selectOnlyOne(filterId) {
-    enableOnlyOneFilter(filterId);
-  };
-  var toggleCheckbox = function toggleCheckbox(filterId) {
-    toggleFilter([filterId]);
-  };
-  var mouseMoveRef = React.useRef(null);
-  React.useEffect(function () {
-    window.addEventListener('mousemove', checkHover, true);
-    return function () {
-      window.removeEventListener('mousemove', checkHover, true);
-    };
-  });
-  var checkHover = function checkHover(e) {
-    if (mouseMoveRef.current) {
-      var mouseOver = mouseMoveRef.current.contains(e.target);
-      if (!isHovering && mouseOver) {
-        handleMouseEnter();
-      }
-      if (isHovering && !mouseOver) {
-        handleMouseLeave();
-      }
-    }
-  };
-  var name = filter.amountVisible ? filter.name + " (" + filter.amountVisible + ")" : filter.name;
-  if (filter.amountVisible !== 0) {
-    return jsx("div", {
-      ref: mouseMoveRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleMouseEnter,
-      onBlur: handleMouseLeave,
-      children: jsxs(ListItem, {
-        sx: {
-          width: '100%',
-          minWidth: '300px',
-          padding: '0px',
-          paddingLeft: '0px',
-          paddingRight: '50px',
-          fontSize: '12px'
-        },
-        secondaryAction: jsx(CustomIconButton, {
-          "aria-label": "Only " + filter.name,
-          style: {
-            backgroundColor: 'transparent',
-            width: 'auto',
-            display: isHovering ? 'block' : 'none'
-          },
-          edge: "end",
-          onClick: function onClick() {
-            selectOnlyOne(filter.id);
-          },
-          children: jsx(Typography, {
-            sx: {
-              color: 'geowebColors.buttons.primary.default.fill',
-              fontSize: '14px',
-              fontWeight: 500
-            },
-            children: t('shared-only')
-          })
-        }),
-        children: [jsx(ListItemIcon, {
-          sx: {
-            minWidth: '42px'
-          },
-          children: jsx(Checkbox, {
-            inputProps: {
-              'aria-label': filter.name,
-              checked: filter.checked
-            },
-            className: filter.checked ? 'is-checked' : '',
-            color: "secondary",
-            checked: filter.checked,
-            onChange: function onChange() {
-              toggleCheckbox(filter.id);
-            },
-            sx: {
-              paddingTop: '6px',
-              paddingBottom: '7px',
-              '&&:hover': {
-                backgroundColor: 'transparent'
-              }
-            }
-          })
-        }), children || jsx(FilterLabel, {
-          name: name
-        })]
-      })
-    });
-  }
-  return null;
-};
-
 var FilterOption = function FilterOption(_ref) {
   var optionId = _ref.optionId,
     checked = _ref.checked,
@@ -6011,4 +5915,4 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterLabel, FilterListItem, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, 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, StatusTag, StorybookDocsWrapper, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.37.0",
+  "version": "10.0.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/DraggableResizable/Draggable.d.ts

@@ -10,6 +10,7 @@ export interface DraggableComponentProps {
     onStop?: (event: DraggableEvent, pos: DraggablePosition) => void;
     onMouseDown?: (event: MouseEvent) => void;
     handle?: string;
+    setIsDragging?: (isDragging: boolean) => void;
 }
 declare const DraggableComponent: React.FC<DraggableComponentProps>;
 export default DraggableComponent;

package/src/lib/components/Filter/index.d.ts

@@ -1,8 +1,6 @@
 export { default as Filter } from './Filter';
 export { DEFAULT_FILTER_HEIGHT } from './Filter';
 export type { ListFilter } from './FilterList';
-export { FilterListItem, FilterLabel } from './FilterListItem';
-export type { Filter as FilterListItemFilter, FilterListItemProps, } from './FilterListItem';
 export { FilterOption } from './FilterOption';
 export { default as FilterChip } from './FilterChip';
 export type { FilterChipProps } from './FilterChip';

package/src/lib/components/Filter/FilterListItem.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-export interface Filter {
-    id: string;
-    name: string;
-    checked?: boolean;
-    amountVisible?: number;
-}
-export interface FilterListItemProps {
-    filter: Filter;
-    toggleFilter?: (filterIds: string[]) => void;
-    enableOnlyOneFilter?: (filterId: string) => void;
-    children?: React.ReactNode;
-}
-export declare const FilterLabel: React.FC<{
-    name: string;
-}>;
-export declare const FilterListItem: React.FC<FilterListItemProps>;

package/src/lib/components/Filter/FilterListItem.spec.d.ts

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

package/src/lib/components/Filter/FilterListItem.stories.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const FilterListItemLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const FilterListItemDark: {
-    (): React.ReactElement;
-    tags: string[];
-};