@opengeoweb/shared 9.21.0 → 9.22.0

package/index.esm.js

@@ -4,7 +4,7 @@ import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerM
 import * as React from 'react';
 import React__default, { useRef, Component } from 'react';
 import i18n from 'i18next';
-import { initReactI18next, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
@@ -63,7 +63,8 @@ var en = {
 	"shared-sentry-enable-both": "Disable HTML + Canvas recording",
 	"shared-sentry-disable-both": "Enable HTML + Canvas recording",
 	"shared-sentry-cors-wait": "Disabled untill with and without CORS headers fetching mechanism has been implemented",
-	"shared-sentry-disclaimer": "I understand that while using canvas recording, adding a layer without correct CORS headers will cause error and make the recording to fail. A new recording without the canvas or the layer can be made after reloading the application."
+	"shared-sentry-disclaimer": "I understand that while using canvas recording, adding a layer without correct CORS headers will cause error and make the recording to fail. A new recording without the canvas or the layer can be made after reloading the application.",
+	"shared-clear": "Clear"
 };
 var fi = {
 	"shared-choose-app-mode": "ei käännetty",
@@ -113,7 +114,8 @@ var fi = {
 	"shared-sentry-enable-both": "ei käännetty",
 	"shared-sentry-disable-both": "ei käännetty",
 	"shared-sentry-cors-wait": "ei käännetty",
-	"shared-sentry-disclaimer": "ei käännetty"
+	"shared-sentry-disclaimer": "ei käännetty",
+	"shared-clear": "ei käännetty"
 };
 var no = {
 	"shared-choose-app-mode": "Velg din standardmodus",
@@ -163,57 +165,59 @@ var no = {
 	"shared-sentry-enable-both": "Skru av HTML + lerret-opptak",
 	"shared-sentry-disable-both": "Skru på HTML + lerret-opptak",
 	"shared-sentry-cors-wait": "Avskrudd inntil CORS-relaterte headere er implementert",
-	"shared-sentry-disclaimer": "Jeg forstår at ved å bruke lerretopptak vil opptaket feile dersom jeg legger til et lag uten riktig CORS-headere. Ved å laste inn applikasjonen på nytt kan man starte nytt opptak uten lerret eller lag."
+	"shared-sentry-disclaimer": "Jeg forstår at ved å bruke lerretopptak vil opptaket feile dersom jeg legger til et lag uten riktig CORS-headere. Ved å laste inn applikasjonen på nytt kan man starte nytt opptak uten lerret eller lag.",
+	"shared-clear": "ikke oversatt"
 };
 var nl = {
-	"shared-choose-app-mode": "niet vertaald",
-	"shared-cheat-sheet": "niet vertaald",
-	"shared-save": "niet vertaald",
-	"shared-viewer": "niet vertaald",
-	"shared-editor": "niet vertaald",
-	"shared-reload-page": "niet vertaald",
-	"shared-search-label": "niet vertaald",
-	"shared-last-updated": "niet vertaald",
-	"shared-click-to-refresh": "niet vertaald",
-	"shared-error-occurred": "niet vertaald",
-	"shared-confirmation-description": "niet vertaald",
-	"shared-confirmation-cancel": "niet vertaald",
-	"shared-confirmation-submit": "niet vertaald",
-	"shared-close-caps": "niet vertaald",
-	"shared-close": "niet vertaald",
-	"shared-search": "niet vertaald",
-	"shared-choose-selected-time": "niet vertaald",
-	"shared-move-selected-time": "niet vertaald",
-	"shared-move-one-step": "niet vertaald",
-	"shared-toggle-timeslider": "niet vertaald",
-	"shared-timeslider-scale": "niet vertaald",
-	"shared-expand-timeslider-scale": "niet vertaald",
-	"shared-mouseover-selected-time": "niet vertaald",
-	"shared-mouseover-on-off": "niet vertaald",
-	"shared-change-timestep-or-speed": "niet vertaald",
-	"shared-return-to-current-time": "niet vertaald",
-	"shared-change-layer-values-scrolling": "niet vertaald",
-	"shared-change-layermanager-small": "niet vertaald",
-	"shared-change-layermanager-medium": "niet vertaald",
-	"shared-change-layermanager-large": "niet vertaald",
-	"shared-shortcut-left-click": "niet vertaald",
-	"shared-shortcut-mouse-scroll-timeslider": "niet vertaald",
-	"shared-shortcut-hold-click": "niet vertaald",
-	"shared-shortcut-scroll": "niet vertaald",
-	"shared-shortcut-hover": "niet vertaald",
-	"shared-shortcut-when-active": "niet vertaald",
-	"shared-shortcut-home": "niet vertaald",
-	"shared-shortcut-mouse-scroll": "niet vertaald",
-	"shared-shortcut-or": "niet vertaald",
-	"shared-sentry-recording": "niet vertaald",
-	"shared-sentry-information": "niet vertaald",
-	"shared-sentry-enable-message": "niet vertaald",
-	"shared-sentry-disable": "niet vertaald",
-	"shared-sentry-enable": "niet vertaald",
-	"shared-sentry-enable-both": "niet vertaald",
-	"shared-sentry-disable-both": "niet vertaald",
-	"shared-sentry-cors-wait": "niet vertaald",
-	"shared-sentry-disclaimer": "niet vertaald"
+	"shared-choose-app-mode": "Kies je standaard app-modus",
+	"shared-cheat-sheet": "Cheat sheet",
+	"shared-save": "Opslaan",
+	"shared-viewer": "Kijker",
+	"shared-editor": "Bewerker",
+	"shared-reload-page": "Pagina vernieuwen",
+	"shared-search-label": "Zoek door services of voer een service-URL in",
+	"shared-last-updated": "Laatst bijgewerkt {{time}}",
+	"shared-click-to-refresh": "Klik om te vernieuwen",
+	"shared-error-occurred": "Oeps, er is een fout opgetreden. Rapporteer de onderstaande fout en herlaad de pagina indien nodig.",
+	"shared-confirmation-description": "Weet je het zeker?",
+	"shared-confirmation-cancel": "Ga terug",
+	"shared-confirmation-submit": "Verzenden",
+	"shared-close-caps": "SLUITEN",
+	"shared-close": "Sluiten",
+	"shared-search": "Zoeken",
+	"shared-choose-selected-time": "Kies een geselecteerd tijdstip",
+	"shared-move-selected-time": "Ga achteruit/vooruit in geselecteerde tijd",
+	"shared-move-one-step": "Ga 1 stap achteruit/vooruit in geselecteerde tijd",
+	"shared-toggle-timeslider": "Timeslider verbergen/tonen",
+	"shared-timeslider-scale": "Timeslider zichtbare periode wijzigen",
+	"shared-expand-timeslider-scale": "Timeslider zichtbare periode vergroten/verkleinen",
+	"shared-mouseover-selected-time": "Mouseover om de geselecteerde tijd te wijzigen",
+	"shared-mouseover-on-off": "Mouseover aan / uit zetten",
+	"shared-change-timestep-or-speed": "Wijzig tijdsinterval of animatiesnelheid",
+	"shared-return-to-current-time": "Terug naar huidige tijd",
+	"shared-change-layer-values-scrolling": "Wijzig de waarde van een laag in de lagen manager door te scrollen",
+	"shared-change-layermanager-small": "Verander de grootte van de lagen manager naar klein",
+	"shared-change-layermanager-medium": "Verander de grootte van de lagen manager naar middel",
+	"shared-change-layermanager-large": "Verander de grootte van de lagen manager naar groot",
+	"shared-shortcut-left-click": "Klik met de linkermuisknop op de timeslider",
+	"shared-shortcut-mouse-scroll-timeslider": "Scroll over de timeslider",
+	"shared-shortcut-hold-click": "Houd de linkermuisknop ingedrukt op de timeslider + sleep naar links of rechts",
+	"shared-shortcut-scroll": "+ Scroll timeslider",
+	"shared-shortcut-hover": "Hover over de timeslider of tijd indicator",
+	"shared-shortcut-when-active": "wanneer slider actief is",
+	"shared-shortcut-home": "Home",
+	"shared-shortcut-mouse-scroll": "+ Scroll",
+	"shared-shortcut-or": "of",
+	"shared-sentry-recording": "Sentry Opname",
+	"shared-sentry-information": "Om performance en fouten te monitoren, registreert GeoWeb gebruiksinformatie. Tijdens dit proces verlaat geen enkele gevoelige gebruikersinformatie de browser.",
+	"shared-sentry-enable-message": "Door opname te starten, ga ik akkoord dat de opnamegerelateerde gegevens ter verwerking naar de servers van Sentry worden verzonden.",
+	"shared-sentry-disable": "HTML opname stoppen",
+	"shared-sentry-enable": "HTML opname starten",
+	"shared-sentry-enable-both": "HTML + Canvas opname stoppen",
+	"shared-sentry-disable-both": "HTML + Canvas opname starten",
+	"shared-sentry-cors-wait": "Uitgeschakeld totdat het fetching mechanisme met en zonder CORS-headers is geïmplementeerd",
+	"shared-sentry-disclaimer": "Ik begrijp dat bij het gebruik van canvasopnamen het toevoegen van een laag zonder de juiste CORS-headers fouten zal veroorzaken en ervoor zal zorgen dat de opname mislukt. Een nieuwe opname zonder het canvas of de laag kan worden gemaakt na het opnieuw laden van de applicatie.",
+	"shared-clear": "Wissen"
 };
 var sharedTranslations = {
 	en: en,
@@ -2219,35 +2223,16 @@ const CustomDialog = _a => {
 };
 
 const SHARED_NAMESPACE = 'shared';
-const initSharedI18n = () => {
-  i18n.use(initReactI18next).init({
-    lng: 'en',
-    ns: SHARED_NAMESPACE,
-    interpolation: {
-      escapeValue: false
-    },
-    resources: {
-      en: {
-        shared: sharedTranslations.en
-      },
-      fi: {
-        shared: sharedTranslations.fi
-      },
-      no: {
-        shared: sharedTranslations.no
-      },
-      nl: {
-        shared: sharedTranslations.nl
-      }
-    }
-  });
-};
 const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
   ns: SHARED_NAMESPACE
 }, params));
 
 const confirmStyle = {
   width: {
+    xs: '100%',
+    sm: 'auto'
+  },
+  minWidth: {
     xs: '100%',
     sm: '150px'
   },
@@ -4205,17 +4190,42 @@ $$8({ global: true, forced: parseInt !== $parseInt }, {
 });
 
 const isDraggingClassName = 'is-dragging';
+const useBoundsProps = nodeRef => {
+  const [boundsProps, setBoundsProps] = React__default.useState({});
+  React__default.useEffect(() => {
+    var _a;
+    if (nodeRef) {
+      setBoundsProps({
+        bounds: (_a = nodeRef === null || nodeRef === void 0 ? void 0 : nodeRef.current) === null || _a === void 0 ? void 0 : _a.parentNode,
+        boundsByDirection: true
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return boundsProps;
+};
 const ResizeComponent = _a => {
   var {
       children,
       onResizeStart = () => {},
       onResizeStop = () => {},
       size,
-      setSize,
+      setSize = () => {},
       minHeight = 50,
-      minWidth = 50
+      minWidth = 50,
+      enable = {
+        top: false,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: true,
+        bottomRight: true,
+        bottomLeft: true,
+        topLeft: true
+      },
+      nodeRef
     } = _a,
-    props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth"]);
+    props = __rest(_a, ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"]);
   const theme = useTheme();
   const onStartResize = React__default.useCallback((event, _direction, node) => {
     event.stopPropagation();
@@ -4235,6 +4245,9 @@ const ResizeComponent = _a => {
   }, [onResizeStart, setSize]);
   const onStopResize = React__default.useCallback((event, direction, node, delta) => {
     node.classList.remove(isDraggingClassName);
+    if (!size) {
+      return;
+    }
     const width = parseInt(size.width, 10) + delta.width;
     const height = parseInt(size.height, 10) + delta.height;
     setSize({
@@ -4243,14 +4256,13 @@ const ResizeComponent = _a => {
     });
     onResizeStop(event, direction, node, delta);
   }, [setSize, onResizeStop, size]);
-  return jsx(Resizable
-  // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
-  , Object.assign({
-    // TODO: implement bounds https://gitlab.com/opengeoweb/opengeoweb/-/issues/1035
+  const boundsProps = useBoundsProps(nodeRef);
+  return jsx(Resizable, Object.assign({
     minHeight: minHeight,
     minWidth: minWidth,
     size: size,
-    onResizeStop: onStopResize,
+    onResizeStop: onStopResize
+  }, boundsProps, {
     handleComponent: {
       bottomRight: jsx(Resize, {
         style: {
@@ -4272,16 +4284,7 @@ const ResizeComponent = _a => {
         className: "resizableHandle"
       })
     },
-    enable: {
-      top: false,
-      right: false,
-      bottom: false,
-      left: false,
-      topRight: true,
-      bottomRight: true,
-      bottomLeft: true,
-      topLeft: true
-    },
+    enable: enable,
     onResizeStart: onStartResize
   }, props, {
     children: children
@@ -4732,8 +4735,18 @@ const UserMenu = ({
     }, {
       children: !_isAdmin ? jsx(Avatar, {
         children: initials
-      }) : jsx(Admin, {
-        children: initials
+      }) : jsxs(Fragment, {
+        children: [jsx(Admin, {}), initials && jsx("div", Object.assign({
+          style: {
+            position: 'absolute',
+            fontSize: '14px',
+            color: '#FFF',
+            fontFamily: 'Roboto',
+            fontWeight: 500
+          }
+        }, {
+          children: initials
+        }))]
       })
     })), _isOpen && jsx(Paper, Object.assign({
       sx: styles$4.container,
@@ -5383,7 +5396,8 @@ const DraggableComponent = _a => {
         setSize: setSize,
         onResizeStart: onStartResize,
         onResizeStop: onStopResize,
-        onResize: onResize
+        onResize: onResize,
+        nodeRef: nodeRef
       }, {
         children: jsx(ToolContainer, Object.assign({
           maxHeight: initialMaxHeight,
@@ -5477,7 +5491,7 @@ const ShortcutList = ({
 }) => {
   const {
     t
-  } = useTranslation();
+  } = useTranslation(SHARED_NAMESPACE);
   const shortcuts = [{
     titleKey: 'shared-choose-selected-time',
     description: jsx(ShortCutSegment, {
@@ -6070,7 +6084,7 @@ const UserMenuItemSentryRecording = ({
         },
         minHeight: 300,
         minWidth: 500,
-        title: "Sentry Recording",
+        title: t('shared-sentry-recording'),
         isOpen: true,
         onClose: onClose,
         bounds: "parent"
@@ -6153,13 +6167,13 @@ const UserMenuItemSentryRecording = ({
             item: true,
             justifyContent: "center"
           }, {
-            children: jsxs(Typography, Object.assign({
+            children: jsx(Typography, Object.assign({
               sx: {
                 paddingTop: '20px',
                 textAlign: 'center'
               }
             }, {
-              children: [' ', t('shared-sentry-disclaimer')]
+              children: t('shared-sentry-disclaimer')
             }))
           }))]
         }))
@@ -7721,7 +7735,7 @@ const isURL = string => /^https?:\/\//.test(string);
 const ClearButton = ({
   onClick
 }) => jsx(CustomIconButton, Object.assign({
-  tooltipTitle: "Clear",
+  tooltipTitle: translateKeyOutsideComponents('shared-clear'),
   sx: buttonStyle,
   onClick: onClick
 }, {
@@ -9111,4 +9125,4 @@ class RenderCounter {
 }
 const renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, initSharedI18n, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, translateKeyOutsideComponents, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, 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, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.21.0",
+  "version": "9.22.0",
   "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": {
-    "@mui/material": "~5.15.11",
+    "@mui/material": "^5.16.0",
     "@opengeoweb/theme": "*",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",

package/src/index.d.ts

@@ -3,5 +3,5 @@ export * from './lib/components';
 export * from './lib/hooks';
 export * from './lib/utils';
 export * from './lib/types';
-export * from './lib/utils/i18n';
+export { SHARED_NAMESPACE } from './lib/utils/i18n';
 export { sharedTranslations };

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { ResizableComponentProps } from './types';
 export declare const isDraggingClassName = "is-dragging";
+export interface BoundsProps {
+    bounds: HTMLElement;
+    boundsByDirection: boolean;
+}
+export declare const useBoundsProps: (nodeRef?: React.RefObject<HTMLElement>) => BoundsProps | object;
 declare const ResizeComponent: React.FC<ResizableComponentProps>;
 export default ResizeComponent;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ResizableProps } from 're-resizable';
+import React from 'react';
 export interface DraggablePosition {
     x: number;
     y: number;
@@ -23,4 +23,5 @@ export interface ResizableComponentProps extends Omit<ResizableProps, 'size'> {
     size?: Size;
     children: React.ReactNode;
     onResizeStart?: () => void;
+    nodeRef?: React.RefObject<HTMLElement>;
 }