@opengeoweb/shared 9.29.0 → 9.29.1

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';
@@ -4835,16 +4835,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 +4858,7 @@ const MenuItemTheme = () => {
             label: t('shared-dark')
           })]
         }))
-      }))]
+      })]
     }))
   }));
 };
@@ -4975,7 +4971,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 +4979,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 +5004,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 +5910,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 +5926,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 +5934,7 @@ const ShortcutList = ({
           }, {
             children: _platform === 'mac' && shortcut.descriptionMac ? shortcut.descriptionMac : shortcut.description
           }))
-        }))]
+        })]
       }))
     }), shortcut.titleKey))
   }));
@@ -6021,14 +6014,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 +6110,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 +6135,7 @@ const UserMenuItemSentryRecording = ({
         onClose: onClose,
         bounds: "parent"
       }, {
-        children: jsxs(Grid, Object.assign({
+        children: jsxs(Grid2, Object.assign({
           container: true,
           spacing: 4,
           sx: {
@@ -6154,9 +6143,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 +6153,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 +6163,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 +6177,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 +6204,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 +6531,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({
@@ -8383,12 +8365,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 +8390,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 +8602,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 +8633,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 +8652,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]
+        })]
       }))
     }));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.29.0",
+  "version": "9.29.1",
   "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>;