@entur-partner/common 5.3.0 → 6.0.0

package/dist/common.esm.js

@@ -1,9 +1,9 @@
 import React, { Children, useState, useRef, useEffect, Component } from 'react';
 import cx from 'classnames';
 import { Link as Link$1, Heading6, Paragraph } from '@entur/typography';
-import { NorwayIcon, UKIcon, ChannelsIcon, UserIcon, LogOutIcon, DownArrowIcon } from '@entur/icons';
+import { NorwayIcon, UKIcon, UserIcon, LogOutIcon, DownArrowIcon, ChannelsIcon } from '@entur/icons';
 import { SecondaryButton, Button, PrimaryButton, ButtonGroup } from '@entur/button';
-import { useHistory, Link as Link$2, Prompt, Redirect, Route } from 'react-router-dom';
+import { Link as Link$2, useNavigate, useInRouterContext, useBlocker, redirect, Route } from 'react-router-dom';
 import { SearchableDropdown } from '@entur/dropdown';
 import { SegmentedControl, SegmentedChoice } from '@entur/form';
 import { assertIsDefined, localeDate, localeDateTime, isDate, isDateString, isString, hasAllPermissions, hasOneOfPermissions, splitUrlPath } from '@entur-partner/util';
@@ -338,7 +338,6 @@ var UserMenu = function UserMenu(_ref) {
       showVersionItem = _ref.showVersionItem,
       showMyProfileItem = _ref.showMyProfileItem,
       onNavigateToMyProfile = _ref.onNavigateToMyProfile;
-  var history = useHistory();
   var triggerClassList = cx(['eps-user-menu__trigger-button', className]);
 
   var _useState = useState(false),
@@ -379,19 +378,10 @@ var UserMenu = function UserMenu(_ref) {
   }, React.createElement(UKIcon, {
     size: "1rem",
     inline: true
-  })), messages.switchLanguage), showVersionItem && messages.appVersion && React.createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      history.push('/app-version');
-      setOpen(false);
-    },
-    className: "eps-overflow-menu__item"
-  }, React.createElement("span", {
-    "aria-hidden": true
-  }, React.createElement(ChannelsIcon, {
-    className: "eps-version-icon",
-    size: "1rem",
-    inline: true
-  })), messages.appVersion), showMyProfileItem && messages.myProfile && React.createElement(Link$2, {
+  })), messages.switchLanguage), showVersionItem && messages.appVersion && React.createElement(VersionCustomOverflowMenuItems, {
+    title: messages.appVersion,
+    setOpen: setOpen
+  }), showMyProfileItem && messages.myProfile && React.createElement(Link$2, {
     to: "/permission-admin/my-profile",
     style: {
       textDecoration: 'none'
@@ -479,6 +469,26 @@ var CustomOverflowMenuItem = function CustomOverflowMenuItem(props) {
   }, props));
 };
 
+var VersionCustomOverflowMenuItems = function VersionCustomOverflowMenuItems(_ref3) {
+  var title = _ref3.title,
+      setOpen = _ref3.setOpen;
+  var navigate = useNavigate(); // Hide useNavigate from standalone micro-frontends because it is not under RouterProvider
+
+  return React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      navigate('/app-version');
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(ChannelsIcon, {
+    className: "eps-version-icon",
+    size: "1rem",
+    inline: true
+  })), title);
+};
+
 function elementContainsEventTarget(element, event) {
   if (!element) {
     return false;
@@ -931,41 +941,25 @@ var RouteLeavingGuard = function RouteLeavingGuard(_ref) {
       shouldBlockNavigation = _ref.shouldBlockNavigation,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  var history = useHistory();
-
-  var _useState = useState('ALLOW'),
-      status = _useState[0],
-      setStatus = _useState[1];
-
-  var _useState2 = useState(history.location),
-      lastLocation = _useState2[0],
-      setLastLocation = _useState2[1];
-
-  var closeModal = function closeModal() {
-    setStatus('ALLOW');
-  };
-
-  var allowNavigation = function allowNavigation(nextLocation) {
-    if (shouldBlockNavigation(nextLocation) && status === 'ALLOW') {
-      setStatus('BLOCKED');
-      setLastLocation(nextLocation);
-      return false;
+  assertIsDefined(useInRouterContext() ? true : undefined, "RouteLeavingGuard must be used within a data router.");
+  var blocker = useBlocker(function (_ref2) {
+    var currentLocation = _ref2.currentLocation,
+        nextLocation = _ref2.nextLocation;
+    return currentLocation.pathname !== nextLocation.pathname && shouldBlockNavigation(nextLocation);
+  });
+  return React.createElement(ConfirmModal, _extends({
+    onDismiss: function onDismiss() {
+      if (blocker.state === 'blocked') {
+        blocker.reset();
+      }
+    },
+    open: blocker.state === 'blocked',
+    onConfirm: function onConfirm() {
+      if (blocker.state === 'blocked') {
+        blocker.proceed();
+      }
     }
-
-    return true;
-  };
-
-  var handleConfirm = function handleConfirm() {
-    history.push(lastLocation.pathname);
-  };
-
-  return React.createElement(React.Fragment, null, React.createElement(Prompt, {
-    message: allowNavigation
-  }), React.createElement(ConfirmModal, _extends({
-    onDismiss: closeModal,
-    open: status === 'BLOCKED',
-    onConfirm: handleConfirm
-  }, rest), children));
+  }, rest), children);
 };
 
 var Pager = function Pager(_ref) {
@@ -1035,19 +1029,11 @@ var PermissionCheckedRoute = function PermissionCheckedRoute(_ref) {
       onReject = _ref.onReject,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var redirect = React.createElement(Redirect, {
-    to: {
-      pathname: '/unauthorized',
-      state: {
-        from: props.location
-      }
-    }
-  });
   return React.createElement(PermissionCheck, {
     permissions: actualPermissions,
     all: all,
     oneOf: oneOf,
-    fallback: onReject ? onReject : redirect
+    fallback: onReject != null ? onReject : redirect('/unauthorized')
   }, React.createElement(Route, _extends({}, props), children));
 };
 
@@ -1145,8 +1131,8 @@ function PageTitle(_ref) {
   }).map(function (_ref3) {
     var title = _ref3.title;
     return title;
-  }).reverse().join(' - ');
-  return React.createElement(Helmet, null, React.createElement("title", null, pageTitles, " - Entur Partner"));
+  }).reverse().join(' | ');
+  return React.createElement(Helmet, null, React.createElement("title", null, pageTitles, " | Entur Partner"));
 }
 
 export { ActionBar, ActionBarLeft, ActionBarRight, AuditInfo, Box, Breadcrumbs, ConfirmModal, Content, EnturPartnerLogo, EnturPartnerLogoSvg, Environment, ErrorBoundary, ExpandableMultiLanguageInput, FeatureToggle, FormatCurrencyAmount, FormatDateTime, LanguageSelect, Link, LinkButton, Menu, MultiLanguageInput, OrganisationDropDown, PageTitle, Pager, PermissionCheck, PermissionCheckedRoute, RouteLeavingGuard, Stack, StatusLabel, Text, Unbutton, UserMenu, featureFlag, getColorForEnvironment, getHumanReadableEnvironment, responsiveProp, useEventListener, useFeatureToggle };