@opengeoweb/layer-select 9.20.2 → 9.22.0

package/index.esm.js

@@ -11,6 +11,8 @@ import { createStore } from '@redux-eggs/redux-toolkit';
 import { getSagaExtension } from '@redux-eggs/saga-extension';
 import { takeEvery, select, put, all } from 'redux-saga/effects';
 import { ListItem, ListItemIcon, Checkbox, Typography, ListItemSecondaryAction, Switch, Grid, List, Box, Backdrop, CircularProgress, Button, ListItemText, Dialog, DialogTitle, LinearProgress, DialogContent, InputAdornment, DialogActions } from '@mui/material';
+import i18n from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { FixedSizeList } from 'react-window';
 import { getDimensionsList, LayerInfoButton } from '@opengeoweb/webmap-react';
 import { webmapUtils, LayerType, getCapabilities, WMGetServiceFromStore, clearImageCacheForAllMaps } from '@opengeoweb/webmap';
@@ -19,18 +21,158 @@ import { ReactHookFormProvider, defaultFormOptions, ReactHookFormTextField } fro
 import { useFormContext } from 'react-hook-form';
 
 var en = {
-	"layer-select": "Layer Select"
+	"layer-select": "Layer Select",
+	"select-all": "Select all",
+	"groups-and-keywords-dialog-title": "Groups & Keywords",
+	only: "ONLY",
+	add: "add",
+	remove: "remove",
+	"layer-list-results": "results",
+	groups: "Groups",
+	keywords: "Keywords",
+	"layer-select-button-tooltip": "Open the layer selector",
+	all: "All",
+	services: "Services",
+	"add-a-new-service": "Add a new service",
+	"update-service-title": "Update layers from WMS service",
+	"edit-service-title": "Edit Service",
+	"save-service-title": "Save service",
+	"show-service-title": "Show Service",
+	"service-has-active-layers-error": "Service has active layers. Cannot remove this service",
+	"delete-service": "Delete Service",
+	"copy-url-message": "Service URL copied to clipboard",
+	"get-success-message": "Service \"{{serviceName}}\" has been saved successfully",
+	"service-popup-helper-text": "Short description of what this service does",
+	close: "close",
+	cancel: "cancel",
+	save: "save",
+	"validations-name-existing": "This name already exists. Choose another name.",
+	"validations-service-existing": "URL already exists.",
+	"validations-service-valid-url": "Not a valid URL.",
+	"validations-request-failed": "Download failed. Check the URL.",
+	"validations-field-required": "This field is required",
+	"service-url-label": "This service refers to this URL",
+	"service-name-label": "Service name",
+	"service-abstracts-label": "Abstracts",
+	"service-successfully-updated": "Service \"{{serviceName}}\" has been succesfully updated",
+	"unable-to-update-service": "Unable to update service, reason: \"{{message}}\"",
+	"service-has-been-deleted": "Service \"{{serviceName}}\" has been deleted"
 };
 var fi = {
-	"layer-select": "Layer Select"
+	"layer-select": "Layer Select",
+	"select-all": "Ei käännetty",
+	"groups-and-keywords-dialog-title": "Ei käännetty",
+	only: "Ei käännetty",
+	add: "Ei käännetty",
+	remove: "Ei käännetty",
+	"layer-list-results": "Ei käännetty",
+	groups: "Ei käännetty",
+	keywords: "Ei käännetty",
+	"layer-select-button-tooltip": "Ei käännetty",
+	all: "Ei käännetty",
+	services: "Ei käännetty",
+	"add-a-new-service": "Ei käännetty",
+	"update-service-title": "Ei käännetty",
+	"edit-service-title": "Ei käännetty",
+	"save-service-title": "Ei käännetty",
+	"show-service-title": "Ei käännetty",
+	"service-has-active-layers-error": "Ei käännetty",
+	"delete-service": "Ei käännetty",
+	"copy-url-message": "Ei käännetty",
+	"get-success-message": "Ei käännetty",
+	"service-popup-helper-text": "Ei käännetty",
+	close: "Ei käännetty",
+	cancel: "Ei käännetty",
+	save: "Ei käännetty",
+	"validations-name-existing": "Ei käännetty",
+	"validations-service-existing": "Ei käännetty",
+	"validations-service-valid-url": "Ei käännetty",
+	"validations-request-failed": "Ei käännetty",
+	"validations-field-required": "Ei käännetty",
+	"service-url-label": "Ei käännetty",
+	"service-name-label": "Ei käännetty",
+	"service-abstracts-label": "Ei käännetty",
+	"service-successfully-updated": "Ei käännetty",
+	"unable-to-update-service": "Ei käännetty",
+	"service-has-been-deleted": "Ei käännetty"
 };
 var no = {
-	"layer-select": "Layer Select"
+	"layer-select": "Lagvalg",
+	"select-all": "Velg alle",
+	"groups-and-keywords-dialog-title": "Grupper & Nøkkelord",
+	only: "BARE",
+	add: "legg til",
+	remove: "fjern",
+	"layer-list-results": "resultat",
+	groups: "Grupper",
+	keywords: "Nøkkelord",
+	"layer-select-button-tooltip": "Åpne lagvalg",
+	all: "ALLE",
+	services: "Tjenester",
+	"add-a-new-service": "Legg til en ny tjeneste",
+	"update-service-title": "Oppdater lag fra WMS-tjeneste",
+	"edit-service-title": "Rediger tjeneste",
+	"save-service-title": "Lagre tjeneste",
+	"show-service-title": "Vis tjeneste",
+	"service-has-active-layers-error": "Tjenesten har aktive lag. Kan ikke fjerne denne tjenesten",
+	"delete-service": "Slett tjeneste",
+	"copy-url-message": "Kopier tjeneste-URL til utklippstavle",
+	"get-success-message": "Tjeneste \"{{serviceName}}\" har blitt lagret",
+	"service-popup-helper-text": "Kort beskrivelse av hva denne tjenesten gjør",
+	close: "lukk",
+	cancel: "avbryt",
+	save: "lagre",
+	"validations-name-existing": "Dette navnet eksisterer fra før. Velg et annet navn.",
+	"validations-service-existing": "URL eksisterer fra før.",
+	"validations-service-valid-url": "Ikke en gyldig URL",
+	"validations-request-failed": "Nedlasting feilet. Sjekk URLen",
+	"validations-field-required": "Dette feltet er påkrevd",
+	"service-url-label": "Denne tjenesten referer til denne URLen",
+	"service-name-label": "Tjenestenavn",
+	"service-abstracts-label": "Sammendrag",
+	"service-successfully-updated": "Tjeneste \"{{serviceName}}\" har blitt oppdatert",
+	"unable-to-update-service": "Kan ikke oppdatere tjeneste, grunn: \"{{message}}\"",
+	"service-has-been-deleted": "Tjeneste \"{{serviceName}}\" har blitt slettet"
 };
 var nl = {
-	"layer-select": "Layer Select"
-};
-var layerSelect = {
+	"layer-select": "Layer Select",
+	"select-all": "Selecteer alles",
+	"groups-and-keywords-dialog-title": "Groepen & Trefwoorden",
+	only: "ALLEEN",
+	add: "toevoegen",
+	remove: "verwijderen",
+	"layer-list-results": "resultaten",
+	groups: "Groepen",
+	keywords: "Trefwoorden",
+	"layer-select-button-tooltip": "Open de Layer Select",
+	all: "Alle",
+	services: "Services",
+	"add-a-new-service": "Voeg een nieuwe service toe",
+	"update-service-title": "Lagen bijwerken vanaf WMS service",
+	"edit-service-title": "Service bewerken",
+	"save-service-title": "Service opslaan",
+	"show-service-title": "Service tonen",
+	"service-has-active-layers-error": "Service heeft actieve lagen. Kan niet verwijderd worden",
+	"delete-service": "Service verwijderen",
+	"copy-url-message": "Service URL is naar het klembord gekopieerd",
+	"get-success-message": "Service \"{{serviceName}}\" is succesvol opgeslagen",
+	"service-popup-helper-text": "Korte beschrijving van wat de service doet",
+	close: "sluiten",
+	cancel: "annuleren",
+	save: "opslaan",
+	"validations-name-existing": "Deze naam is al in gebruik. Kies een andere naam.",
+	"validations-service-existing": "URL is al in gebruik.",
+	"validations-service-valid-url": "Geen geldige URL.",
+	"validations-request-failed": "Download mislukt. Controleer de URL.",
+	"validations-field-required": "Dit veld is verplicht",
+	"service-url-label": "Deze service verwijst naar deze URL",
+	"service-name-label": "Service naam",
+	"service-abstracts-label": "Beschrijving",
+	"service-successfully-updated": "Service \"{{serviceName}}\" is succesvol bijgewerkt",
+	"unable-to-update-service": "Bijwerken service niet mogelijk, reden: \"{{message}}\"",
+	"service-has-been-deleted": "Service \"{{serviceName}}\" is verwijderd"
+};
+var layerSelectTranslations = {
 	en: en,
 	fi: fi,
 	no: no,
@@ -2797,11 +2939,20 @@ const KeywordFilterButtonConnect = ({
   }));
 };
 
+const LAYER_SELECT_NAMESPACE = 'layerselect';
+const useLayerSelectTranslation = () => useTranslation(LAYER_SELECT_NAMESPACE);
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
+  ns: [LAYER_SELECT_NAMESPACE]
+}, params));
+
 const FilterListItem = ({
   filter,
   toggleFilter,
   enableOnlyOneFilter
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const [isHovering, setIsHovering] = React.useState(false);
   const handleMouseEnter = React.useCallback(() => {
     setIsHovering(true);
@@ -2900,7 +3051,7 @@ const FilterListItem = ({
                 fontWeight: 500
               }
             }, {
-              children: "ONLY"
+              children: t('only')
             }))
           }))
         }) : null]
@@ -2952,7 +3103,6 @@ const KeywordFilterSelectAllSwitchConnect = () => {
   });
 };
 
-const DIALOG_TITLE = 'Groups & Keywords';
 const listStyle = {
   padding: '0px'
 };
@@ -2969,8 +3119,11 @@ const KeywordFilterResults = ({
   order: _order = 0,
   source: _source = 'module'
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   return jsxs(ToolContainerDraggable, Object.assign({
-    title: DIALOG_TITLE,
+    title: t('groups-and-keywords-dialog-title'),
     "data-testid": "keywordFilterResults",
     startSize: {
       width: 349,
@@ -3008,7 +3161,7 @@ const KeywordFilterResults = ({
           padding: '15px 15px 0 24px'
         }
       }, {
-        children: "Select all"
+        children: t('select-all')
       })), jsx(Grid, Object.assign({
         container: true,
         item: true,
@@ -3022,7 +3175,7 @@ const KeywordFilterResults = ({
         children: jsx(KeywordFilterSelectAllSwitchConnect, {})
       }))]
     })), jsx(CustomAccordion, Object.assign({
-      title: "Groups",
+      title: t('groups'),
       detailsSx: accordionDetailsStyle
     }, {
       children: jsx(List, Object.assign({
@@ -3034,7 +3187,7 @@ const KeywordFilterResults = ({
         }, group.id))
       }))
     })), jsx(CustomAccordion, Object.assign({
-      title: "Keywords",
+      title: t('keywords'),
       detailsSx: accordionDetailsStyle
     }, {
       children: jsx(List, Object.assign({
@@ -3084,6 +3237,9 @@ const LayerAddRemoveButton = ({
   deleteLayer,
   mapLayers
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const foundLayer = mapLayers.find(lr => lr.name === layer.name && lr.service === serviceUrl);
   return jsx(CustomToggleButton, Object.assign({
     "data-testid": `layerAddRemoveButton-${layer.name}`,
@@ -3104,7 +3260,7 @@ const LayerAddRemoveButton = ({
     },
     className: "layerAddRemoveButton"
   }, {
-    children: !foundLayer ? 'Add' : 'Remove'
+    children: !foundLayer ? t('add') : t('remove')
   }));
 };
 
@@ -3258,6 +3414,9 @@ const LayerListRow = ({
   onToggleActiveLayer
 }) => {
   var _a;
+  const {
+    t
+  } = useLayerSelectTranslation();
   const rowHeight = widthToRowHeight(layerSelectWidth);
   const columns = widthToColumns(layerSelectWidth);
   const dimensions = getDimensionsList(layer.dimensions);
@@ -3358,14 +3517,14 @@ const LayerListRow = ({
             children: [layer.path.length > 0 && jsxs(Typography, Object.assign({
               sx: layerInfoStyle
             }, {
-              children: ["Groups:", ' ', jsx(SearchHighlight, {
+              children: [t('groups'), ":", ' ', jsx(SearchHighlight, {
                 text: layer.path.join(' / '),
                 search: searchFilter
               })]
             })), ((_a = layer.keywords) === null || _a === void 0 ? void 0 : _a.length) > 0 && jsxs(Typography, Object.assign({
               sx: layerInfoStyle
             }, {
-              children: ["Keywords:", ' ', jsx(SearchHighlight, {
+              children: [t('keywords'), ":", ' ', jsx(SearchHighlight, {
                 text: layer.keywords.slice().sort((a, b) => {
                   return a.localeCompare(b);
                 }).join(', '),
@@ -3412,6 +3571,9 @@ const LayerList = ({
   onToggleActiveLayer,
   currentLayerInfo
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const rowMargin = 4;
   const rowHeight = widthToRowHeight(layerSelectWidth);
   const layerSelectFilterHeight = 155 + serviceListHeight;
@@ -3425,7 +3587,7 @@ const LayerList = ({
         fontSize: '12px'
       }
     }, {
-      children: [filteredLayers.length, " results"]
+      children: [filteredLayers.length, " ", t('layer-list-results')]
     })), jsx(FixedSizeList, Object.assign({
       height: layerSelectHeight - layerSelectFilterHeight < minHeight ? minHeight : layerSelectHeight - layerSelectFilterHeight,
       itemCount: filteredLayers.length,
@@ -3549,12 +3711,15 @@ const style$2 = {
 const LayerSelectButtonConnect = ({
   mapId,
   source: _source = 'app',
-  tooltipTitle: _tooltipTitle = 'Open the layer selector',
+  tooltipTitle,
   icon: _icon = jsx(LayersAdd, {
     "data-testid": "layerSelectButtonConnectIcon"
   }),
   isMultiMap: _isMultiMap = false
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const dispatch = useDispatch();
   const dialogType = _isMultiMap ? `${uiTypes.DialogTypes.LayerSelect}-${mapId}` : uiTypes.DialogTypes.LayerSelect;
   const currentActiveMapId = useAppSelector(store => uiSelectors.getDialogMapId(store, dialogType));
@@ -3572,7 +3737,7 @@ const LayerSelectButtonConnect = ({
     sx: style$2,
     id: "layerSelectButton",
     "data-testid": "layerSelectButton",
-    tooltipTitle: _tooltipTitle
+    tooltipTitle: tooltipTitle || t('layer-select-button-tooltip')
   }, {
     children: _icon
   }));
@@ -3617,6 +3782,9 @@ const ServiceChip = ({
   isDisabled,
   toggleChip
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const chip = _all ? 'all' : service && service.serviceUrl;
   return jsx(CustomTooltip, Object.assign({
     title: (service === null || service === void 0 ? void 0 : service.abstract) ? `Abstract: ${service.abstract}` : ''
@@ -3632,7 +3800,7 @@ const ServiceChip = ({
         disabled: isDisabled,
         sx: style$1
       }, {
-        children: service ? service.serviceName : 'All'
+        children: service ? service.serviceName : t('all')
       }))
     })
   }));
@@ -3837,6 +4005,9 @@ const ServiceOptionsDialog = ({
   setServicePopupInfo,
   isLoading: _isLoading = false
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const openAddService = () => {
     setServicePopupInfo({
       isOpen: true,
@@ -3862,7 +4033,7 @@ const ServiceOptionsDialog = ({
     children: [jsx(Box, Object.assign({
       sx: styles.header
     }, {
-      children: "Services"
+      children: t('services')
     })), jsx(Backdrop, Object.assign({
       sx: styles.loading,
       open: _isLoading
@@ -3885,16 +4056,13 @@ const ServiceOptionsDialog = ({
         variant: "tertiary",
         startIcon: jsx(Add, {})
       }, {
-        children: "Add a new service"
+        children: t('add-a-new-service')
       }))
     }))]
   }));
 };
-const updateServiceTitle = 'Update layers from WMS service';
-const editServiceTitle = 'Edit Service';
-const showServiceTitle = 'Show Service';
 const deleteServiceTitle = hasActiveLayers => {
-  return hasActiveLayers ? 'Service has active layers. Cannot remove this service' : 'Delete Service';
+  return hasActiveLayers ? translateKeyOutsideComponents('service-has-active-layers-error') : translateKeyOutsideComponents('delete-service');
 };
 const tooltipPlacement = () => {
   return 'left';
@@ -3917,6 +4085,9 @@ const Rows = ({
   setServicePopupInfo,
   selectedLayers
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const checkIfServiceHasActiveLayers = serviceUrl => {
     const foundService = selectedLayers.find(object => object.service === serviceUrl);
     if (foundService) {
@@ -3966,7 +4137,7 @@ const Rows = ({
           }, {
             children: [jsx(CustomTooltip, Object.assign({
               "data-testid": "updateServiceTooltip",
-              title: updateServiceTitle,
+              title: t('update-service-title'),
               placement: tooltipPlacement(),
               PopperProps: tooltipPopperProps
             }, {
@@ -3981,7 +4152,7 @@ const Rows = ({
                 children: jsx(Cached, {})
               }))
             })), userAddedService ? jsx(CustomTooltip, Object.assign({
-              title: editServiceTitle,
+              title: t('edit-service-title'),
               placement: tooltipPlacement(),
               PopperProps: tooltipPopperProps
             }, {
@@ -4003,7 +4174,7 @@ const Rows = ({
                 }))
               })
             })) : jsx(CustomTooltip, Object.assign({
-              title: showServiceTitle,
+              title: t('show-service-title'),
               placement: tooltipPlacement(),
               PopperProps: tooltipPopperProps
             }, {
@@ -4284,17 +4455,13 @@ $({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
   }
 });
 
-const VALIDATIONS_NAME_EXISTING = 'This name already exists. Choose another name.';
-const VALIDATIONS_SERVICE_EXISTING = 'URL already exists.';
-const VALIDATIONS_SERVICE_VALID_URL = 'Not a valid URL.';
-const VALIDATIONS_REQUEST_FAILED = 'Download failed. Check the URL.';
 const validateServiceName = (value, services, ownServiceName = '') => {
   const serviceName = value === null || value === void 0 ? void 0 : value.toLowerCase();
   const foundName = Object.keys(services).find(serviceId => {
     var _a;
     return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceName.toLowerCase()) === serviceName && serviceName !== ownServiceName.toLocaleLowerCase();
   });
-  return foundName === undefined ? true : VALIDATIONS_NAME_EXISTING;
+  return foundName === undefined ? true : translateKeyOutsideComponents('validations-name-existing');
 };
 const isValidUrl = url => {
   if (url === '' || url === null || typeof url === 'undefined') {
@@ -4311,7 +4478,7 @@ const validateServiceUrl = (value, services) => {
   // validate valid url
   const isServiceUrlValid = isValidUrl(serviceUrl);
   if (!isServiceUrlValid) {
-    return VALIDATIONS_SERVICE_VALID_URL;
+    return translateKeyOutsideComponents('validations-service-valid-url');
   }
   // check url existing
   const foundUrl = Object.keys(services).find(serviceId => {
@@ -4319,7 +4486,7 @@ const validateServiceUrl = (value, services) => {
     return ((_a = services[serviceId]) === null || _a === void 0 ? void 0 : _a.serviceUrl) === serviceUrl;
   });
   if (foundUrl) {
-    return VALIDATIONS_SERVICE_EXISTING;
+    return translateKeyOutsideComponents('validations-service-existing');
   }
   return true;
 };
@@ -4347,8 +4514,17 @@ const getService = (services, serviceUrl) => {
   }
   return services[serviceIds[serviceIndex]];
 };
-const getServiceSuccesUpdateMessage = serviceName => `Service "${serviceName}" has been succesfully updated`;
-const getServiceFailedUpdateMessage = error => `Unable to update service, reason: "${error.message}"`;
+const getServiceSuccesUpdateMessage = serviceName => translateKeyOutsideComponents('service-successfully-updated', {
+  serviceName
+});
+const getServiceFailedUpdateMessage = error => {
+  const {
+    message
+  } = error;
+  return translateKeyOutsideComponents('unable-to-update-service', {
+    message
+  });
+};
 const ServiceOptionsDialogConnect = ({
   mapId
 }) => {
@@ -4370,7 +4546,9 @@ const ServiceOptionsDialogConnect = ({
   const services = useAppSelector(store => getActiveServices(store));
   const selectedLayers = useAppSelector(store => mapSelectors.getMapLayersWithoutDimensionCurrentValue(store, mapId));
   const layerSelectRemoveService = React.useCallback((serviceId, serviceUrl, serviceName) => {
-    const message = `Service "${serviceName}" has been deleted`;
+    const message = translateKeyOutsideComponents('service-has-been-deleted', {
+      serviceName
+    });
     showSnackbar(message);
     dispatch(layerSelectActions.layerSelectRemoveService({
       serviceId,
@@ -4548,19 +4726,17 @@ const style = {
     marginBottom: 2
   }
 };
-const ADD_HEADING = 'Add a new service';
-const EDIT_HEADING = 'Edit service';
-const SAVE_HEADING = 'Save service';
-const COPY_URL_MESSAGE = 'Service URL copied to clipboard';
-const getSuccesMessage = serviceName => `Service "${serviceName}" has been saved succesfully`;
+const getSuccesMessage = serviceName => translateKeyOutsideComponents('get-success-message', {
+  serviceName
+});
 const getTitleForVariant = variant => {
   switch (variant) {
     case 'add':
-      return ADD_HEADING;
+      return translateKeyOutsideComponents('add-a-new-service');
     case 'edit':
-      return EDIT_HEADING;
+      return translateKeyOutsideComponents('edit-service-title');
     case 'save':
-      return SAVE_HEADING;
+      return translateKeyOutsideComponents('save-service-title');
     default:
       return 'Service';
   }
@@ -4605,6 +4781,9 @@ const ServicePopupUnwrapped = ({
   serviceName,
   showSnackbar: _showSnackbar = () => {}
 }) => {
+  const {
+    t
+  } = useLayerSelectTranslation();
   const {
     formState: {
       errors
@@ -4631,7 +4810,7 @@ const ServicePopupUnwrapped = ({
       setIsLoading(false);
       setShouldForceReload(true);
       setError(fields.serviceUrl.name, {
-        message: VALIDATIONS_REQUEST_FAILED,
+        message: t('validations-request-failed'),
         type: 'SYSTEM'
       });
     }
@@ -4655,7 +4834,7 @@ const ServicePopupUnwrapped = ({
     } catch (error) {
       setIsLoading(false);
       setError(fields.serviceUrl.name, {
-        message: VALIDATIONS_REQUEST_FAILED,
+        message: t('validations-request-failed'),
         type: 'SYSTEM'
       });
     }
@@ -4777,7 +4956,7 @@ const ServicePopupUnwrapped = ({
       }, {
         children: [jsx(ReactHookFormTextField, {
           name: fields.serviceUrl.name,
-          label: fields.serviceUrl.label,
+          label: t('service-url-label'),
           onFocus: onFocusServiceUrl,
           autoFocus: !shouldDisableAutoFocus,
           onBlur: onBlurServiceUrl,
@@ -4800,7 +4979,7 @@ const ServicePopupUnwrapped = ({
                 "aria-label": "copy url",
                 onClick: () => {
                   navigator.clipboard.writeText(serviceUrl);
-                  _showSnackbar(COPY_URL_MESSAGE);
+                  _showSnackbar(t('copy-url-message'));
                 },
                 sx: {
                   marginTop: 0.5
@@ -4813,7 +4992,7 @@ const ServicePopupUnwrapped = ({
           defaultValue: serviceUrl
         }), jsx(ReactHookFormTextField, {
           name: fields.serviceName.name,
-          label: fields.serviceName.label,
+          label: t('service-name-label'),
           rules: {
             required: true,
             validate: {
@@ -4831,13 +5010,13 @@ const ServicePopupUnwrapped = ({
           multiline: true,
           rows: 4,
           name: fields.serviceAbstracts.name,
-          label: fields.serviceAbstracts.label,
+          label: t('service-abstracts-label'),
           disabled: isShowPopup || isLoading,
           isReadOnly: isShowPopup,
           InputProps: {
             disableUnderline: isShowPopup
           },
-          helperText: !isShowPopup ? 'Short description of what this service does' : '',
+          helperText: !isShowPopup ? t('service-popup-helper-text') : '',
           sx: style.textField,
           defaultValue: ""
         }), !isServiceUrlDisabled && jsx(InitialValidationsTrigger, {
@@ -4857,7 +5036,7 @@ const ServicePopupUnwrapped = ({
             width: '117px'
           }
         }, {
-          children: "close"
+          children: t('close')
         })) : jsxs(Fragment, {
           children: [jsx(Button, Object.assign({
             onClick: closePopup,
@@ -4867,7 +5046,7 @@ const ServicePopupUnwrapped = ({
               width: '117px'
             }
           }, {
-            children: "cancel"
+            children: t('cancel')
           })), jsx(Button, Object.assign({
             type: "submit",
             variant: "primary",
@@ -4878,7 +5057,7 @@ const ServicePopupUnwrapped = ({
               marginLeft: '16px!important'
             }
           }, {
-            children: "save"
+            children: t('save')
           }))]
         })
       }))]
@@ -4998,4 +5177,4 @@ const LayerSelectConnect = ({
   });
 };
 
-export { ADD_HEADING, AllChipConnect, COPY_URL_MESSAGE, DIALOG_TITLE, EDIT_HEADING, FilterListItem, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SAVE_HEADING, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, layerSelect as layerSelectTranslations, types as layerSelectTypes, useAppSelector };
+export { AllChipConnect, FilterListItem, KeywordFilterButtonConnect, KeywordFilterResults, KeywordFilterResultsConnect, KeywordFilterResultsListItemConnect, KeywordFilterSelectAllSwitchConnect, LAYER_SELECT_NAMESPACE, LayerAddRemoveButton, LayerList, LayerListConnect, LayerListDimensions, LayerListRow, LayerSelectButtonConnect, LayerSelectConnect, SearchFieldConnect, ServiceChip, ServiceChipConnect, ServiceList, ServiceListConnect, ServiceOptionsButton, ServiceOptionsDialog, ServiceOptionsDialogConnect, ServicePopup, ServicePopupConnect, ServicePopupDialogConnect, getServiceFailedUpdateMessage, getServiceSuccesUpdateMessage, getSuccesMessage, isUserAddedService, layerSelectActions, layerSelectConfig, initialState as layerSelectInitialState, reducer as layerSelectReducer, selectors as layerSelectSelectors, layerSelectTranslations, types as layerSelectTypes, useAppSelector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/layer-select",
-  "version": "9.20.2",
+  "version": "9.22.0",
   "description": "GeoWeb layer select library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,7 +12,7 @@
     "@opengeoweb/store": "*",
     "react-redux": "^8.1.3",
     "@opengeoweb/theme": "*",
-    "@mui/material": "~5.15.11",
+    "@mui/material": "^5.16.0",
     "@opengeoweb/webmap-react": "*",
     "@opengeoweb/webmap": "*",
     "react-window": "^1.8.10",
@@ -25,8 +25,8 @@
     "@redux-eggs/saga-extension": "^2.2.0",
     "lodash": "^4.17.21",
     "redux-saga": "^1.2.3",
-    "i18next": "^23.7.11",
-    "react-i18next": "^13.5.0"
+    "i18next": "^23.11.5",
+    "react-i18next": "^14.1.2"
   },
   "peerDependencies": {
     "react": "18"

package/src/index.d.ts

@@ -1,3 +1,4 @@
 import layerSelectTranslations from '../locales/layer-select.json';
 export * from './lib';
+export { LAYER_SELECT_NAMESPACE } from './lib/utils/i18n';
 export { layerSelectTranslations };

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { uiTypes } from '@opengeoweb/store';
 import { FiltersGrouped } from '../../store/selectors';
-export declare const DIALOG_TITLE = "Groups & Keywords";
 export interface KeywordFilterResultsProps {
     bounds?: string;
     onClose?: () => void;

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

@@ -1,6 +1,20 @@
 import React from 'react';
+import i18n from 'i18next';
+import { Theme } from '@mui/material';
+import { ThemeProviderProps } from '@opengeoweb/theme';
+import { Store } from '@reduxjs/toolkit';
+interface BaseProviderProps {
+    children?: React.ReactNode;
+    theme?: Theme;
+}
 interface LayerSelectTranslationWrapperProps {
     children?: React.ReactNode;
+    i18nInstance?: typeof i18n;
 }
+export declare const ThemeProvider: React.FC<BaseProviderProps>;
 export declare const LayerSelecti18nProvider: React.FC<LayerSelectTranslationWrapperProps>;
+export declare const DemoWrapper: React.FC<BaseProviderProps>;
+export declare const TestThemeStoreProvider: React.FC<ThemeProviderProps & {
+    store: Store;
+}>;
 export {};

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

@@ -15,9 +15,5 @@ export interface ServicePopupProps {
     serviceSetLayers: (payload: serviceTypes.SetLayersForServicePayload) => void;
     showSnackbar?: (message: string) => void;
 }
-export declare const ADD_HEADING = "Add a new service";
-export declare const EDIT_HEADING = "Edit service";
-export declare const SAVE_HEADING = "Save service";
-export declare const COPY_URL_MESSAGE = "Service URL copied to clipboard";
 export declare const getSuccesMessage: (serviceName: string) => string;
 export declare const ServicePopup: React.FC<ServicePopupProps>;

package/src/lib/components/ServicePopup/utils.d.ts

@@ -1,11 +1,6 @@
 import { serviceTypes } from '@opengeoweb/store';
 import { layerSelectTypes } from '../../store';
 export type ValidationResult = string | boolean;
-export declare const VALIDATIONS_NAME_EXISTING = "This name already exists. Choose another name.";
-export declare const VALIDATIONS_SERVICE_EXISTING = "URL already exists.";
-export declare const VALIDATIONS_SERVICE_VALID_URL = "Not a valid URL.";
-export declare const VALIDATIONS_REQUEST_FAILED = "Download failed. Check the URL.";
-export declare const VALIDATIONS_FIELD_REQUIRED = "This field is required";
 export declare const validateServiceName: (value: string, services: layerSelectTypes.ActiveServiceObjectEntities, ownServiceName?: string) => ValidationResult;
 export declare const validateServiceUrl: (value: string, services: layerSelectTypes.ActiveServiceObjectEntities) => ValidationResult;
 export declare const loadWMSService: (serviceUrl: string, forceReload?: boolean) => Promise<serviceTypes.SetLayersForServicePayload>;

package/src/lib/utils/i18n.d.ts

@@ -1,2 +1,6 @@
-export declare const LAYER_SELECT_NAMESPACE = "layerSelect";
-export declare const initLayerSelectI18n: () => void;
+import i18n from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
+export declare const LAYER_SELECT_NAMESPACE = "layerselect";
+export declare const initLayerSelectI18n: () => typeof i18n;
+export declare const useLayerSelectTranslation: () => UseTranslationResponse<typeof LAYER_SELECT_NAMESPACE, typeof i18n>;
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;

package/src/lib/components/testUtils/TestThemeStoreProvider.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ThemeProviderProps } from '@opengeoweb/theme';
-import { Store } from '@reduxjs/toolkit';
-export declare const TestThemeStoreProvider: React.FC<ThemeProviderProps & {
-    store: Store;
-}>;