@opengeoweb/shared 9.29.0 → 9.30.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, Grid, 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, ListItemSecondaryAction } 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, Checkbox } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, 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 } from 'react';
@@ -11,8 +11,8 @@ import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 import { useStore } from 'react-redux';
 import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$3, getHours as getHours$1, startOfDay, addMinutes, addHours, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
-import configureStore from 'redux-mock-store';
-import { configureStore as configureStore$1 } from '@reduxjs/toolkit';
+import configureStoreToBeDeprecated from 'redux-mock-store';
+import { configureStore } from '@reduxjs/toolkit';
 
 var en = {
 	"shared-choose-app-mode": "Choose your default app mode",
@@ -3485,15 +3485,12 @@ $$a({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 const showPrompt = event => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // eslint-disable-next-line no-param-reassign
-  event.returnValue = 'Changes that you made may not be saved.'; // changes are your browser have default text to overrule this
+  event.preventDefault();
 };
 function usePreventBrowserClose(shouldPreventClose) {
   React.useEffect(() => {
@@ -4835,16 +4832,12 @@ const MenuItemTheme = () => {
   return jsx(MenuItem, Object.assign({
     divider: true
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true
     }, {
-      children: [jsx(Grid, Object.assign({
-        item: true
-      }, {
+      children: [jsx(Grid2, {
         children: t('shared-choose-app-mode')
-      })), jsx(Grid, Object.assign({
-        item: true
-      }, {
+      }), jsx(Grid2, {
         children: jsxs(RadioGroup, Object.assign({
           onChange: toggleTheme
         }, {
@@ -4862,7 +4855,7 @@ const MenuItemTheme = () => {
             label: t('shared-dark')
           })]
         }))
-      }))]
+      })]
     }))
   }));
 };
@@ -4975,7 +4968,7 @@ const ToolHeader = ({
     role: "heading",
     "aria-label": "toolheader"
   }, {
-    children: jsxs(Grid, Object.assign({
+    children: jsxs(Grid2, Object.assign({
       container: true,
       alignItems: "center",
       sx: {
@@ -4983,17 +4976,19 @@ const ToolHeader = ({
         height: styles.height
       }
     }, {
-      children: [jsxs(Grid, Object.assign({
+      children: [jsxs(Grid2, Object.assign({
         className: "header-left",
-        item: true,
-        xs: columnSizeLeft,
         sx: {
           paddingRight: 1
+        },
+        size: {
+          sm: columnSizeLeft
         }
       }, {
-        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid, Object.assign({
+        children: [_isDraggable && size !== 'xxs' && !_leftHeaderComponent && jsx(Grid2, Object.assign({
           container: true,
-          justifyContent: "flex-start"
+          justifyContent: "flex-start",
+          size: "grow"
         }, {
           children: jsx(CustomIconButton, Object.assign({
             "data-testid": "dragBtn",
@@ -5006,48 +5001,45 @@ const ToolHeader = ({
             children: _dragHandleIcon
           }))
         })), _leftHeaderComponent && _leftHeaderComponent]
-      })), jsx(Grid, Object.assign({
+      })), jsxs(Grid2, Object.assign({
         className: "header-title",
-        item: true,
-        xs: title ? columnSizeTitle : 0
+        size: title ? columnSizeTitle : 0,
+        container: true,
+        justifyContent: "center",
+        alignItems: "center"
       }, {
-        children: jsxs(Grid, Object.assign({
-          container: true,
-          justifyContent: "center",
-          alignItems: "center"
+        children: [title && jsx(Typography, Object.assign({
+          variant: "h2",
+          noWrap: true,
+          sx: {
+            fontSize: styles.fontSize,
+            fontWeight: styles.fontWeight,
+            lineHeight: styles.lineHeight,
+            marginTop: styles.marginTop,
+            textAlign: 'center'
+          },
+          role: "heading"
         }, {
-          children: [title && jsx(Typography, Object.assign({
-            variant: "h2",
-            noWrap: true,
-            sx: {
-              fontSize: styles.fontSize,
-              fontWeight: styles.fontWeight,
-              lineHeight: styles.lineHeight,
-              marginTop: styles.marginTop
-            },
-            role: "heading"
-          }, {
-            children: title
-          })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
-            "data-testid": "dragBtn-xxs",
-            disableRipple: true,
-            sx: {
-              pointerEvents: 'none',
-              transform: 'rotate(90deg)',
-              '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
-                height: 12
-              })
-            }
-          }, {
-            children: _dragHandleIcon
-          }))]
-        }))
-      })), jsxs(Grid, Object.assign({
+          children: title
+        })), size === 'xxs' && jsx(CustomIconButton, Object.assign({
+          "data-testid": "dragBtn-xxs",
+          disableRipple: true,
+          sx: {
+            pointerEvents: 'none',
+            right: -12,
+            transform: 'rotate(90deg)',
+            '&.MuiButtonBase-root.MuiIconButton-root': Object.assign(Object.assign({}, iconStyle), {
+              height: 12
+            })
+          }
+        }, {
+          children: _dragHandleIcon
+        }))]
+      })), jsxs(Grid2, Object.assign({
         className: "header-right",
-        item: true,
-        xs: columnSizeIcon,
         container: true,
-        justifyContent: "flex-end"
+        justifyContent: "flex-end",
+        size: columnSizeIcon
       }, {
         children: [_rightHeaderComponent && _rightHeaderComponent, _onClose && jsx(CustomTooltip, Object.assign({
           title: t('shared-close'),
@@ -5915,14 +5907,14 @@ const ShortcutList = ({
       },
       divider: index !== shortcuts.length - 1
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsxs(Grid2, Object.assign({
         container: true,
         direction: "row",
         justifyContent: "space-between",
-        alignItems: "center"
+        alignItems: "center",
+        size: "grow"
       }, {
-        children: [jsx(Grid, Object.assign({
-          item: true,
+        children: [jsx(Grid2, Object.assign({
           sx: {
             fontSize: 12,
             fontWeight: 300,
@@ -5931,9 +5923,7 @@ const ShortcutList = ({
           }
         }, {
           children: t(shortcut.titleKey)
-        })), jsx(Grid, Object.assign({
-          item: true
-        }, {
+        })), jsx(Grid2, {
           children: jsx(Box, Object.assign({
             sx: {
               alignItems: 'center'
@@ -5941,7 +5931,7 @@ const ShortcutList = ({
           }, {
             children: _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description
           }))
-        }))]
+        })]
       }))
     }), shortcut.titleKey))
   }));
@@ -6021,14 +6011,12 @@ const UserMenuItemCheatSheet = () => {
       onClick: onOpen,
       divider: true
     }, {
-      children: jsx(Grid, Object.assign({
+      children: jsx(Grid2, Object.assign({
         container: true
       }, {
-        children: jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: jsx(Grid2, {
           children: t('shared-cheat-sheet')
-        }))
+        })
       }))
     })), jsx(Backdrop, Object.assign({
       "data-testid": "cheatsheet-content",
@@ -6119,14 +6107,12 @@ const UserMenuItemSentryRecording = ({
       onClick: onOpen,
       divider: true
     }, {
-      children: jsx(Grid, Object.assign({
+      children: jsx(Grid2, Object.assign({
         container: true
       }, {
-        children: jsx(Grid, Object.assign({
-          item: true
-        }, {
+        children: jsx(Grid2, {
           children: t('shared-sentry-recording')
-        }))
+        })
       }))
     })), jsx(Backdrop, Object.assign({
       "data-testid": "sentryRecording-content",
@@ -6146,7 +6132,7 @@ const UserMenuItemSentryRecording = ({
         onClose: onClose,
         bounds: "parent"
       }, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           spacing: 4,
           sx: {
@@ -6154,9 +6140,8 @@ const UserMenuItemSentryRecording = ({
             paddingRight: '70px'
           }
         }, {
-          children: [jsx(Grid, Object.assign({
+          children: [jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
@@ -6165,9 +6150,8 @@ const UserMenuItemSentryRecording = ({
             children: jsx(Typography, {
               children: t('shared-sentry-information')
             })
-          })), jsx(Grid, Object.assign({
+          })), jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center",
             sx: {
               textAlign: 'center'
@@ -6176,9 +6160,8 @@ const UserMenuItemSentryRecording = ({
             children: jsx(Typography, {
               children: t('shared-sentry-enable-message')
             })
-          })), jsxs(Grid, Object.assign({
+          })), jsxs(Grid2, Object.assign({
             container: true,
-            item: true,
             alignItems: "center",
             direction: "column"
           }, {
@@ -6191,9 +6174,8 @@ const UserMenuItemSentryRecording = ({
             }) : jsxs(Typography, {
               children: [" ", t('shared-sentry-enable')]
             })]
-          })), jsxs(Grid, Object.assign({
+          })), jsxs(Grid2, Object.assign({
             container: true,
-            item: true,
             alignItems: "center",
             direction: "column"
           }, {
@@ -6219,9 +6201,8 @@ const UserMenuItemSentryRecording = ({
                 children: ["(", t('shared-sentry-cors-wait'), ")"]
               }))]
             })]
-          })), jsx(Grid, Object.assign({
+          })), jsx(Grid2, Object.assign({
             container: true,
-            item: true,
             justifyContent: "center"
           }, {
             children: jsx(Typography, Object.assign({
@@ -6547,19 +6528,17 @@ const ToggleMenu = ({
           disabled: isDisabled,
           selected: menuItem.isSelected
         }, {
-          children: jsxs(Grid, Object.assign({
+          children: jsxs(Grid2, Object.assign({
             container: true,
             spacing: 2,
-            justifyContent: "space-between"
+            justifyContent: "space-between",
+            size: "grow"
           }, {
-            children: [jsx(Grid, Object.assign({
-              item: true
-            }, {
+            children: [jsx(Grid2, {
               children: jsx(ListItemText, {
                 children: text
               })
-            })), icon && jsx(Grid, Object.assign({
-              item: true,
+            }), icon && jsx(Grid2, Object.assign({
               alignItems: "flex-end"
             }, {
               children: jsx(ListItemIcon, Object.assign({
@@ -8193,7 +8172,7 @@ class CanvasComponent extends Component {
       event,
       deltaY: event.deltaY,
       deltaX: event.deltaX,
-      canvasWidth: event.srcElement.width,
+      canvasWidth: event.target.width,
       mouseX: event.offsetX
     });
   }
@@ -8383,12 +8362,15 @@ const FilterChip = ({
   isSelected: _isSelected = false,
   isDisabled: _isDisabled = false,
   handleClick: _handleClick = () => {},
-  onAction,
+  onClick,
   actionIcon,
   size: _size = 'small'
 }) => {
   const theme = useTheme();
+  const chipRef = useRef(null);
+  const clickHandler = () => onClick ? onClick(chipRef.current) : _handleClick(id, _isSelected);
   return jsx(Chip, {
+    ref: chipRef,
     size: _size,
     id: id,
     label: label,
@@ -8405,13 +8387,13 @@ const FilterChip = ({
       '& .MuiChip-filled': {
         border: '1px solid transparent'
       },
-      '& .MuiChip-labelMedium': {
+      '&.MuiChip-sizeMedium > .MuiChip-label': {
         overflow: 'visible'
       }
     },
-    onClick: () => _handleClick(id, _isSelected),
+    onClick: clickHandler,
     deleteIcon: actionIcon,
-    onDelete: onAction
+    onDelete: actionIcon ? clickHandler : undefined
   });
 };
 
@@ -8617,7 +8599,29 @@ const FilterListItem = ({
           paddingLeft: '0px',
           paddingRight: '50px',
           fontSize: '12px'
-        }
+        },
+        secondaryAction: jsx(CustomIconButton, Object.assign({
+          "aria-label": `Only ${filter.name}`,
+          style: {
+            backgroundColor: 'transparent',
+            width: 'auto',
+            display: isHovering ? 'block' : 'none'
+          },
+          edge: "end",
+          onClick: () => {
+            selectOnlyOne(filter.id);
+          }
+        }, {
+          children: jsx(Typography, Object.assign({
+            sx: {
+              color: 'geowebColors.buttons.primary.default.fill',
+              fontSize: '14px',
+              fontWeight: 500
+            }
+          }, {
+            children: t('shared-only')
+          }))
+        }))
       }, {
         children: [jsx(ListItemIcon, Object.assign({
           sx: {
@@ -8626,8 +8630,10 @@ const FilterListItem = ({
         }, {
           children: jsx(Checkbox, {
             inputProps: {
-              'aria-label': filter.name
+              'aria-label': filter.name,
+              checked: filter.checked
             },
+            className: filter.checked ? 'is-checked' : '',
             color: "secondary",
             checked: filter.checked,
             onChange: () => {
@@ -8643,27 +8649,7 @@ const FilterListItem = ({
           })
         })), children || jsx(FilterLabel, {
           name: name
-        }), isHovering ? jsx(ListItemSecondaryAction, {
-          children: jsx(CustomIconButton, Object.assign({
-            "aria-label": `Only ${filter.name}`,
-            style: {
-              backgroundColor: 'transparent',
-              width: 'auto'
-            },
-            edge: "end",
-            onClick: () => selectOnlyOne(filter.id)
-          }, {
-            children: jsx(Typography, Object.assign({
-              sx: {
-                color: 'geowebColors.buttons.primary.default.fill',
-                fontSize: '14px',
-                fontWeight: 500
-              }
-            }, {
-              children: t('shared-only')
-            }))
-          }))
-        }) : null]
+        })]
       }))
     }));
   }
@@ -9453,25 +9439,8 @@ var index = /*#__PURE__*/Object.freeze({
   utc: utc
 });
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
 const createMockStoreWithEggs = mockState => {
-  const mockStore = configureStore();
+  const mockStore = configureStoreToBeDeprecated();
   const store = mockStore(mockState);
   store.addEggs = typeof jest !== 'undefined' ? jest.fn() : () => {}; // mocking the dynamic module loader
   return store;
@@ -9481,10 +9450,10 @@ const createToolkitMockStoreWithEggs = storeConfig => {
     reducer,
     preloadedState
   } = storeConfig;
-  const store = configureStore$1({
+  const store = configureStore(Object.assign(Object.assign({}, storeConfig), {
     reducer,
     preloadedState
-  });
+  }));
   store.addEggs = typeof jest !== 'undefined' ? jest.fn() : () => {}; // mocking the dynamic module loader
   return store;
 };

package/package.json

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

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

@@ -5,8 +5,8 @@ export interface FilterChipProps {
     isSelected?: boolean;
     isDisabled?: boolean;
     handleClick?: (label: string, isSelected?: boolean) => void;
-    onAction?: React.MouseEventHandler;
     actionIcon?: React.ReactElement;
+    onClick?: (ref: HTMLElement | null) => void;
     size?: 'small' | 'medium';
 }
 declare const FilterChip: React.FC<FilterChipProps>;

package/src/lib/utils/reduxTestUtils/createMockStoreWithEggs.d.ts

@@ -1,5 +1,4 @@
 import { MockStoreEnhanced } from 'redux-mock-store';
-import { AnyAction, Reducer, ReducersMapObject, ThunkMiddleware, StoreEnhancer } from '@reduxjs/toolkit';
 import { ConfigureStoreOptions, ToolkitStore } from '@reduxjs/toolkit/dist/configureStore';
 interface MockStoreWithEggs extends MockStoreEnhanced {
     addEggs?: () => void;
@@ -7,14 +6,6 @@ interface MockStoreWithEggs extends MockStoreEnhanced {
 interface ToolkitStoreWithEggs extends ToolkitStore {
     addEggs?: () => void;
 }
-interface StoreConfig {
-    reducer: Reducer<unknown, AnyAction> | ReducersMapObject<unknown, AnyAction>;
-    preloadedState: ConfigureStoreOptions<unknown, AnyAction, [
-        ThunkMiddleware<unknown, AnyAction>
-    ], [
-        StoreEnhancer
-    ]> | object | undefined;
-}
 export declare const createMockStoreWithEggs: (mockState: unknown) => MockStoreWithEggs;
-export declare const createToolkitMockStoreWithEggs: (storeConfig: StoreConfig) => ToolkitStoreWithEggs;
+export declare const createToolkitMockStoreWithEggs: (storeConfig: ConfigureStoreOptions) => ToolkitStoreWithEggs;
 export {};