@entur-partner/common 5.3.1 → 6.0.1

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 } 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';
@@ -17,26 +17,21 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
   _setPrototypeOf(subClass, superClass);
 }
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -44,23 +39,20 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
-var _excluded$f = ["as", "children", "contrast", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "padding", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "margin", "display", "justifyContent", "alignItems", "maxWidth", "width", "background", "color", "flexDirection", "flexWrap", "className"];
+var _excluded$e = ["as", "children", "contrast", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "padding", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "margin", "display", "justifyContent", "alignItems", "maxWidth", "width", "background", "color", "flexDirection", "flexWrap", "className"];
 function responsiveProp(prefix, prop) {
   if (Array.isArray(prop)) {
     var classes = [];
@@ -69,40 +61,38 @@ function responsiveProp(prefix, prop) {
     prop[2] && classes.push("" + prefix + prop[2] + "-xl");
     return classes;
   }
-
   return [prefix + prop];
 }
 var Box = function Box(_ref) {
   var _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'div' : _ref$as,
-      children = _ref.children,
-      contrast = _ref.contrast,
-      paddingTop = _ref.paddingTop,
-      paddingRight = _ref.paddingRight,
-      paddingBottom = _ref.paddingBottom,
-      paddingLeft = _ref.paddingLeft,
-      paddingX = _ref.paddingX,
-      paddingY = _ref.paddingY,
-      padding = _ref.padding,
-      marginTop = _ref.marginTop,
-      marginRight = _ref.marginRight,
-      marginBottom = _ref.marginBottom,
-      marginLeft = _ref.marginLeft,
-      marginX = _ref.marginX,
-      marginY = _ref.marginY,
-      margin = _ref.margin,
-      display = _ref.display,
-      justifyContent = _ref.justifyContent,
-      alignItems = _ref.alignItems,
-      maxWidth = _ref.maxWidth,
-      width = _ref.width,
-      background = _ref.background,
-      color = _ref.color,
-      flexDirection = _ref.flexDirection,
-      flexWrap = _ref.flexWrap,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
+    children = _ref.children,
+    contrast = _ref.contrast,
+    paddingTop = _ref.paddingTop,
+    paddingRight = _ref.paddingRight,
+    paddingBottom = _ref.paddingBottom,
+    paddingLeft = _ref.paddingLeft,
+    paddingX = _ref.paddingX,
+    paddingY = _ref.paddingY,
+    padding = _ref.padding,
+    marginTop = _ref.marginTop,
+    marginRight = _ref.marginRight,
+    marginBottom = _ref.marginBottom,
+    marginLeft = _ref.marginLeft,
+    marginX = _ref.marginX,
+    marginY = _ref.marginY,
+    margin = _ref.margin,
+    display = _ref.display,
+    justifyContent = _ref.justifyContent,
+    alignItems = _ref.alignItems,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    background = _ref.background,
+    color = _ref.color,
+    flexDirection = _ref.flexDirection,
+    flexWrap = _ref.flexWrap,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var classes = [];
   var resolvedPaddingTop = paddingTop || paddingY || padding;
   var resolvedPaddingBottom = paddingBottom || paddingY || padding;
@@ -123,11 +113,9 @@ var Box = function Box(_ref) {
   resolvedMarginRight && classes.push.apply(classes, responsiveProp('eps-mr-', resolvedMarginRight));
   display && classes.push.apply(classes, responsiveProp('eps-', display));
   justifyContent && classes.push.apply(classes, responsiveProp('eps-justify-', justifyContent));
-
   if (alignItems) {
     classes.push.apply(classes, responsiveProp('eps-items-', alignItems));
   }
-
   maxWidth && classes.push.apply(classes, responsiveProp('eps-max-w-', maxWidth));
   width && classes.push.apply(classes, responsiveProp('eps-w-', width));
   color && classes.push("eps-color-" + color);
@@ -142,14 +130,12 @@ var Box = function Box(_ref) {
 
 var Stack = function Stack(_ref) {
   var children = _ref.children,
-      space = _ref.space,
-      className = _ref.className;
+    space = _ref.space,
+    className = _ref.className;
   var stackItems = Children.toArray(children);
-
   if (stackItems.length <= 1) {
     return React.createElement(React.Fragment, null, stackItems);
   }
-
   return React.createElement("div", {
     className: className
   }, stackItems.map(function (child, index) {
@@ -168,14 +154,12 @@ var ActionBarLeft = function ActionBarLeft(_ref) {
     className: "eps-action-bar-left"
   }, children);
 };
-
 var ActionBarRight = function ActionBarRight(_ref2) {
   var children = _ref2.children;
   return React.createElement("div", {
     className: "eps-action-bar-right"
   }, children);
 };
-
 var ActionBar = function ActionBar(_ref3) {
   var children = _ref3.children;
   return React.createElement(React.Fragment, null, React.createElement("div", {
@@ -185,12 +169,11 @@ var ActionBar = function ActionBar(_ref3) {
   }, children));
 };
 
-var _excluded$e = ["children", "className"];
+var _excluded$d = ["children", "className"];
 var LinkButton = function LinkButton(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return React.createElement(Link$1, _extends({}, rest, {
     as: "button",
     className: cx('eps-link-button', className)
@@ -204,10 +187,8 @@ var LinkButton = function LinkButton(_ref) {
  * @param flag case sensitive flag. If it is an environment variable
  * you can drop the REACT_APP_ prefix.
  */
-
 function featureFlag(flag) {
   var _window$localStorage, _window$localStorage2;
-
   return process.env["REACT_APP_" + flag] === 'true' || ((_window$localStorage = window.localStorage) == null ? void 0 : _window$localStorage.getItem(flag)) === 'true' || ((_window$localStorage2 = window.localStorage) == null ? void 0 : _window$localStorage2.getItem("REACT_APP_" + flag)) === 'true';
 }
 /**
@@ -217,40 +198,33 @@ function featureFlag(flag) {
  * @param flag case sensitive flag. If it is an environment variable
  * you can drop the REACT_APP_ prefix.
  */
-
 function useFeatureToggle(flag) {
   return featureFlag(flag);
 }
 var FeatureToggle = function FeatureToggle(_ref) {
   var children = _ref.children,
-      flag = _ref.flag;
+    flag = _ref.flag;
   var feature = useFeatureToggle(flag);
-
   if (feature) {
     return React.createElement(React.Fragment, null, children);
   }
-
   return null;
 };
 
 var _environmentColors, _humanReadableEnviron;
-
 var Environment;
-
 (function (Environment) {
   Environment["Local"] = "local";
   Environment["Development"] = "dev";
   Environment["Staging"] = "staging";
   Environment["Production"] = "prod";
 })(Environment || (Environment = {}));
-
 var environmentColors = (_environmentColors = {}, _environmentColors[Environment.Local] = '#B482FB', _environmentColors[Environment.Development] = '#5AC39A', _environmentColors[Environment.Staging] = '#FFCA28', _environmentColors);
 /**
  * Gets the color for the given environment. This is the color used for the environment
  * indicator. There is no color for production as it should not have any special environment
  * indication.
  */
-
 var getColorForEnvironment = function getColorForEnvironment(environment) {
   return environmentColors[environment];
 };
@@ -259,13 +233,12 @@ var getHumanReadableEnvironment = function getHumanReadableEnvironment(environme
   return humanReadableEnvironment[environment];
 };
 
-var _excluded$d = ["title", "accentColor"];
+var _excluded$c = ["title", "accentColor"];
 var EnturPartnerLogoSvg = function EnturPartnerLogoSvg(_ref) {
   var title = _ref.title,
-      _ref$accentColor = _ref.accentColor,
-      accentColor = _ref$accentColor === void 0 ? '#FF5959' : _ref$accentColor,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-
+    _ref$accentColor = _ref.accentColor,
+    accentColor = _ref$accentColor === void 0 ? '#FF5959' : _ref$accentColor,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return React.createElement("svg", _extends({
     width: 257,
     height: 37,
@@ -290,10 +263,10 @@ var EnturPartnerLogoSvg = function EnturPartnerLogoSvg(_ref) {
 };
 var EnturPartnerLogo = function EnturPartnerLogo(_ref2) {
   var _ref2$as = _ref2.as,
-      Component = _ref2$as === void 0 ? 'nav' : _ref2$as,
-      className = _ref2.className,
-      altText = _ref2.altText,
-      environment = _ref2.environment;
+    Component = _ref2$as === void 0 ? 'nav' : _ref2$as,
+    className = _ref2.className,
+    altText = _ref2.altText,
+    environment = _ref2.environment;
   var classList = cx(['eps-logo-wrapper', className]);
   return React.createElement(Component, {
     className: classList
@@ -306,9 +279,9 @@ var EnturPartnerLogo = function EnturPartnerLogo(_ref2) {
 
 var Menu = function Menu(_ref) {
   var _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'nav' : _ref$as,
-      className = _ref.className,
-      children = _ref.children;
+    Component = _ref$as === void 0 ? 'nav' : _ref$as,
+    className = _ref.className,
+    children = _ref.children;
   var classList = cx(['eds-contrast', 'eps-menu', className]);
   return React.createElement(Component, {
     className: classList
@@ -317,34 +290,31 @@ var Menu = function Menu(_ref) {
 
 var Content = function Content(_ref) {
   var _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'main' : _ref$as,
-      className = _ref.className,
-      children = _ref.children;
+    Component = _ref$as === void 0 ? 'main' : _ref$as,
+    className = _ref.className,
+    children = _ref.children;
   var classList = cx(['eps-content', className]);
   return React.createElement(Component, {
     className: classList
   }, children);
 };
 
-var _excluded$c = ["className", "children", "userName", "open", "onOpenChange", "environment"];
+var _excluded$b = ["className", "children", "userName", "open", "onOpenChange", "environment"];
 var UserMenu = function UserMenu(_ref) {
   var className = _ref.className,
-      messages = _ref.messages,
-      onLogout = _ref.onLogout,
-      onLanguageChange = _ref.onLanguageChange,
-      userName = _ref.userName,
-      language = _ref.language,
-      environment = _ref.environment,
-      showVersionItem = _ref.showVersionItem,
-      showMyProfileItem = _ref.showMyProfileItem,
-      onNavigateToMyProfile = _ref.onNavigateToMyProfile;
-  var history = useHistory();
+    messages = _ref.messages,
+    onLogout = _ref.onLogout,
+    onLanguageChange = _ref.onLanguageChange,
+    userName = _ref.userName,
+    language = _ref.language,
+    environment = _ref.environment,
+    showVersionItem = _ref.showVersionItem,
+    showMyProfileItem = _ref.showMyProfileItem,
+    onNavigateToMyProfile = _ref.onNavigateToMyProfile;
   var triggerClassList = cx(['eps-user-menu__trigger-button', className]);
-
   var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
+    open = _useState[0],
+    setOpen = _useState[1];
   return React.createElement("div", {
     id: "eps-user-menu"
   }, React.createElement(CustomOverflowMenu, {
@@ -379,19 +349,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'
@@ -421,16 +382,14 @@ var UserMenu = function UserMenu(_ref) {
     inline: true
   })), messages.logout))));
 };
-
 var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
   var className = _ref2.className,
-      children = _ref2.children,
-      userName = _ref2.userName,
-      open = _ref2.open,
-      onOpenChange = _ref2.onOpenChange,
-      environment = _ref2.environment,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
-
+    children = _ref2.children,
+    userName = _ref2.userName,
+    open = _ref2.open,
+    onOpenChange = _ref2.onOpenChange,
+    environment = _ref2.environment,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
   var overflowItemsClasses = cx('eps-overflow-menu__group', {
     'eps-overflow-menu__group--open': open
   });
@@ -471,48 +430,57 @@ var CustomOverflowMenu = function CustomOverflowMenu(_ref2) {
     ref: overflowContentRef
   }, children));
 };
-
 var CustomOverflowMenuItem = function CustomOverflowMenuItem(props) {
   return React.createElement("button", _extends({
     className: cx(props.className, 'eps-overflow-menu__item'),
     role: "menuitem"
   }, 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;
   }
-
   if (element.contains(event.target)) {
     return true;
-  } // For elements inside a Shadow DOM we need to check the composedPath
-
-
+  }
+  // For elements inside a Shadow DOM we need to check the composedPath
   if (event.composed && event.composedPath) {
     var contains = event.composedPath().find(function (target) {
       if (target === window) {
         return false;
       }
-
       return element.contains(target);
     });
     return contains ? true : false;
   }
-
   return false;
 }
-
 function useOutsideClick(ref, buttonRef, handler) {
   React.useEffect(function () {
     var listener = function listener(event) {
       if (elementContainsEventTarget(ref.current, event) || elementContainsEventTarget(buttonRef.current, event)) {
         return;
       }
-
       handler();
     };
-
     document.addEventListener('mousedown', listener);
     document.addEventListener('touchstart', listener);
     return function () {
@@ -522,14 +490,13 @@ function useOutsideClick(ref, buttonRef, handler) {
   }, [ref, buttonRef, handler]);
 }
 
-var _excluded$b = ["label", "organisations", "onChange", "selectedOrganisationId"];
+var _excluded$a = ["label", "organisations", "onChange", "selectedOrganisationId"];
 var OrganisationDropDown = function OrganisationDropDown(_ref) {
   var label = _ref.label,
-      organisations = _ref.organisations,
-      handleChange = _ref.onChange,
-      selectedOrganisationId = _ref.selectedOrganisationId,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-
+    organisations = _ref.organisations,
+    handleChange = _ref.onChange,
+    selectedOrganisationId = _ref.selectedOrganisationId,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var selectedOrganisation = organisations.find(function (org) {
     return org.id === selectedOrganisationId;
   });
@@ -561,7 +528,6 @@ function useEventListener(eventName, handler, element) {
   if (element === void 0) {
     element = window;
   }
-
   var savedHandler = useRef();
   useEffect(function () {
     savedHandler.current = handler;
@@ -569,11 +535,9 @@ function useEventListener(eventName, handler, element) {
   useEffect(function () {
     var isSupported = element && element.addEventListener;
     if (!isSupported) return;
-
     var eventListener = function eventListener(event) {
       return savedHandler.current == null ? void 0 : savedHandler.current(event);
     };
-
     element.addEventListener(eventName, eventListener);
     return function () {
       element.removeEventListener(eventName, eventListener);
@@ -581,21 +545,19 @@ function useEventListener(eventName, handler, element) {
   }, [eventName, element]);
 }
 
-var _excluded$a = ["language", "options", "className", "onChange"];
+var _excluded$9 = ["language", "options", "className", "onChange"];
 var LanguageSelect = function LanguageSelect(_ref) {
   var language = _ref.language,
-      options = _ref.options,
-      className = _ref.className,
-      _onChange = _ref.onChange,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
+    options = _ref.options,
+    className = _ref.className,
+    _onChange = _ref.onChange,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var classNames = cx('eps-language-select', className);
   return React.createElement("div", _extends({}, rest, {
     className: classNames
   }), React.createElement(SegmentedControl, {
     onChange: function onChange(language) {
       assertIsDefined(language);
-
       _onChange(language);
     },
     selectedValue: language
@@ -609,30 +571,26 @@ var LanguageSelect = function LanguageSelect(_ref) {
   })));
 };
 
-var _excluded$9 = ["title", "inputComponent", "languages", "values", "onChange", "name", "variant", "feedback"];
+var _excluded$8 = ["title", "inputComponent", "languages", "values", "onChange", "name", "variant", "feedback"];
 var ExpandableMultiLanguageInput = function ExpandableMultiLanguageInput(_ref) {
   var title = _ref.title,
-      InputComponent = _ref.inputComponent,
-      languages = _ref.languages,
-      values = _ref.values,
-      onChange = _ref.onChange,
-      name = _ref.name,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
+    InputComponent = _ref.inputComponent,
+    languages = _ref.languages,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var handleOnChange = function handleOnChange(language, value) {
     var changes = _extends({}, values);
-
     if (value === '' || !value) {
       delete changes[language];
     } else {
       changes[language] = value;
     }
-
     onChange(changes);
   };
-
   return React.createElement(ExpandablePanel, {
     title: title,
     defaultOpen: true,
@@ -645,8 +603,8 @@ var ExpandableMultiLanguageInput = function ExpandableMultiLanguageInput(_ref) {
     space: "medium"
   }, languages.map(function (_ref2) {
     var langKey = _ref2.value,
-        label = _ref2.label,
-        required = _ref2.required;
+      label = _ref2.label,
+      required = _ref2.required;
     return React.createElement(InputComponent, _extends({
       "data-testid": "multi-lang-input-" + name + "-" + langKey,
       key: title + langKey,
@@ -662,35 +620,31 @@ var ExpandableMultiLanguageInput = function ExpandableMultiLanguageInput(_ref) {
   })));
 };
 
-var _excluded$8 = ["className", "inputComponent", "alertLabel", "alertLevel", "name", "languages", "values", "onChange", "defaultLanguage", "label", "onBlur"];
+var _excluded$7 = ["className", "inputComponent", "alertLabel", "alertLevel", "name", "languages", "values", "onChange", "defaultLanguage", "label", "onBlur"];
 /**
  * @deprecated use ExpandableMultiLanguageInput
  */
-
 var MultiLanguageInput = function MultiLanguageInput(_ref) {
   var className = _ref.className,
-      InputComponent = _ref.inputComponent,
-      alertLabel = _ref.alertLabel,
-      alertLevel = _ref.alertLevel,
-      name = _ref.name,
-      languages = _ref.languages,
-      values = _ref.values,
-      onChange = _ref.onChange,
-      _ref$defaultLanguage = _ref.defaultLanguage,
-      defaultLanguage = _ref$defaultLanguage === void 0 ? 'nob' : _ref$defaultLanguage,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
+    InputComponent = _ref.inputComponent,
+    alertLabel = _ref.alertLabel,
+    alertLevel = _ref.alertLevel,
+    name = _ref.name,
+    languages = _ref.languages,
+    values = _ref.values,
+    onChange = _ref.onChange,
+    _ref$defaultLanguage = _ref.defaultLanguage,
+    defaultLanguage = _ref$defaultLanguage === void 0 ? 'nob' : _ref$defaultLanguage,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var _useState = useState(defaultLanguage),
-      language = _useState[0],
-      setLanguage = _useState[1];
-
+    language = _useState[0],
+    setLanguage = _useState[1];
   var classNames = cx('multi-language-input', className);
   var currentValue = values[language];
-
   var handleOnBlur = function handleOnBlur(e) {
     e.persist();
     var currentTarget = e.currentTarget;
@@ -700,23 +654,18 @@ var MultiLanguageInput = function MultiLanguageInput(_ref) {
       }
     }, 0);
   };
-
   var handleLanguageChange = function handleLanguageChange(language) {
     setLanguage(language);
   };
-
   var handleOnChange = function handleOnChange(value) {
     var changes = Object.assign({}, values);
-
     if (value === '' || !value) {
       delete changes[language];
     } else {
       changes[language] = value;
     }
-
     onChange(changes);
   };
-
   return React.createElement("div", {
     className: classNames,
     tabIndex: 0,
@@ -743,12 +692,11 @@ var MultiLanguageInput = function MultiLanguageInput(_ref) {
   }, rest))));
 };
 
-var _excluded$7 = ["children", "className"];
+var _excluded$6 = ["children", "className"];
 var Unbutton = function Unbutton(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   return React.createElement(Button, _extends({
     variant: "primary"
   }, rest, {
@@ -763,40 +711,31 @@ function isFunction(functionToCheck) {
 var newAppVersionErrorMessage = "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.";
 var ErrorBoundary = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ErrorBoundary, _Component);
-
   function ErrorBoundary(props) {
     var _this;
-
     _this = _Component.call(this, props) || this;
     _this.state = {
       error: null
     };
     return _this;
   }
-
   ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
     return {
       error: error
     };
   };
-
   var _proto = ErrorBoundary.prototype;
-
   _proto.componentDidCatch = function componentDidCatch(error, errorInfo) {
     var _this$props$handleErr, _this$props;
-
     // React always logs in development
     (_this$props$handleErr = (_this$props = this.props).handleError) == null ? void 0 : _this$props$handleErr.call(_this$props, error, errorInfo);
   };
-
   _proto.render = function render() {
     var _this2 = this;
-
     var error = this.state.error;
     var _this$props2 = this.props,
-        fallback = _this$props2.fallback,
-        children = _this$props2.children;
-
+      fallback = _this$props2.fallback,
+      children = _this$props2.children;
     if (error) {
       if (isFunction(fallback)) {
         return fallback({
@@ -810,17 +749,13 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
       } else if (error.name === 'NotFoundError' && error.message === newAppVersionErrorMessage) {
         return React.createElement(RefreshBannerInfo, null);
       }
-
       return fallback;
     }
-
     return children;
   };
-
   return ErrorBoundary;
 }(Component);
 var LANGUAGE_STORAGE_KEY = 'EP::locale';
-
 function RefreshBannerInfo() {
   // Taken from ./app-shell/src/storage.ts
   var language = localStorage.getItem(LANGUAGE_STORAGE_KEY);
@@ -841,25 +776,23 @@ function RefreshBannerInfo() {
   }, isNorwegian ? 'Oppdater' : 'Refresh')));
 }
 
-var _excluded$6 = ["date", "locale", "as", "hideTime"];
+var _excluded$5 = ["date", "locale", "as", "hideTime"];
 var FormatDateTime = function FormatDateTime(_ref) {
   var date = _ref.date,
-      locale = _ref.locale,
-      _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'main' : _ref$as,
-      hideTime = _ref.hideTime,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
+    locale = _ref.locale,
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'main' : _ref$as,
+    hideTime = _ref.hideTime,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return React.createElement(Component, _extends({}, rest), hideTime ? localeDate(date, locale) : localeDateTime(date, locale));
 };
 
-var _excluded$5 = ["amount", "as"];
+var _excluded$4 = ["amount", "as"];
 var FormatCurrencyAmount = function FormatCurrencyAmount(_ref) {
   var amount = _ref.amount,
-      _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'span' : _ref$as,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
+    _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var parsedAmount = Number(amount) || 0;
   var formattedAmount = new Intl.NumberFormat('nb-NO', {
     maximumFractionDigits: 2,
@@ -868,19 +801,18 @@ var FormatCurrencyAmount = function FormatCurrencyAmount(_ref) {
   return React.createElement(Component, _extends({}, rest), formattedAmount);
 };
 
-var _excluded$4 = ["items", "locale", "className"];
+var _excluded$3 = ["items", "locale", "className"];
 var AuditInfo = function AuditInfo(_ref) {
   var items = _ref.items,
-      locale = _ref.locale,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
+    locale = _ref.locale,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var classNames = cx('ep-audit-info', className);
   return React.createElement("div", _extends({
     className: classNames
   }, rest), items.map(function (_ref2, i) {
     var label = _ref2.label,
-        value = _ref2.value;
+      value = _ref2.value;
     return React.createElement(Stack, {
       space: "small",
       key: i
@@ -893,21 +825,20 @@ var AuditInfo = function AuditInfo(_ref) {
   }));
 };
 
-var _excluded$3 = ["isOpen", "children", "message", "size", "buttons", "onConfirm", "messages", "onClose", "onDismiss"];
+var _excluded$2 = ["isOpen", "children", "message", "size", "buttons", "onConfirm", "messages", "onClose", "onDismiss"];
 var ConfirmModal = function ConfirmModal(_ref) {
   var _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-      children = _ref.children,
-      message = _ref.message,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      buttons = _ref.buttons,
-      onConfirm = _ref.onConfirm,
-      messages = _ref.messages,
-      onClose = _ref.onClose,
-      onDismiss = _ref.onDismiss,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    children = _ref.children,
+    message = _ref.message,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    buttons = _ref.buttons,
+    onConfirm = _ref.onConfirm,
+    messages = _ref.messages,
+    onClose = _ref.onClose,
+    onDismiss = _ref.onDismiss,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var childrenToRender = children ? children : message;
   var handleDismiss = onClose ? onClose : onDismiss;
   return React.createElement(Modal, _extends({
@@ -925,54 +856,37 @@ var ConfirmModal = function ConfirmModal(_ref) {
   }, messages.confirm)) : buttons));
 };
 
-var _excluded$2 = ["children", "shouldBlockNavigation"];
+var _excluded$1 = ["children", "shouldBlockNavigation"];
 var RouteLeavingGuard = function RouteLeavingGuard(_ref) {
   var children = _ref.children,
-      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;
+    shouldBlockNavigation = _ref.shouldBlockNavigation,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  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) {
   var collectionSize = _ref.collectionSize,
-      pageSize = _ref.pageSize,
-      _onPageChange = _ref.onPageChange,
-      currentPage = _ref.currentPage;
+    pageSize = _ref.pageSize,
+    _onPageChange = _ref.onPageChange,
+    currentPage = _ref.currentPage;
   var pageCount = Math.ceil(collectionSize / pageSize);
   return React.createElement(Pagination, {
     pageCount: pageCount,
@@ -985,12 +899,12 @@ var Pager = function Pager(_ref) {
 
 var StatusLabel = function StatusLabel(_ref) {
   var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? '' : _ref$label,
-      aggressiveInactive = _ref.aggressiveInactive,
-      showBullet = _ref.showBullet,
-      center = _ref.center;
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    aggressiveInactive = _ref.aggressiveInactive,
+    showBullet = _ref.showBullet,
+    center = _ref.center;
   var bulletClassNames = cx('eps-status-label__bullet', {
     active: active,
     aggressive: aggressiveInactive
@@ -1010,51 +924,25 @@ var StatusLabel = function StatusLabel(_ref) {
  * check BusinessCapabilities but because it represents a minimal subset of
  * what we need to check.
  */
-
 var PermissionCheck = function PermissionCheck(_ref) {
   var children = _ref.children,
-      _ref$fallback = _ref.fallback,
-      fallback = _ref$fallback === void 0 ? null : _ref$fallback,
-      permissions = _ref.permissions,
-      _ref$oneOf = _ref.oneOf,
-      oneOf = _ref$oneOf === void 0 ? [] : _ref$oneOf,
-      _ref$all = _ref.all,
-      all = _ref$all === void 0 ? [] : _ref$all;
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback,
+    permissions = _ref.permissions,
+    _ref$oneOf = _ref.oneOf,
+    oneOf = _ref$oneOf === void 0 ? [] : _ref$oneOf,
+    _ref$all = _ref.all,
+    all = _ref$all === void 0 ? [] : _ref$all;
   var allIsAllowed = hasAllPermissions(all, permissions);
   var oneOfIsAllowed = hasOneOfPermissions(oneOf, permissions);
   var allowed = allIsAllowed && oneOfIsAllowed;
   return React.createElement(React.Fragment, null, allowed ? children : fallback);
 };
 
-var _excluded$1 = ["children", "actualPermissions", "all", "oneOf", "onReject"];
-var PermissionCheckedRoute = function PermissionCheckedRoute(_ref) {
-  var children = _ref.children,
-      actualPermissions = _ref.actualPermissions,
-      all = _ref.all,
-      oneOf = _ref.oneOf,
-      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
-  }, React.createElement(Route, _extends({}, props), children));
-};
-
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var prependBreadcrumbItem = _ref.prependBreadcrumbItem,
-      pathname = _ref.pathname,
-      onBreadcrumbLookup = _ref.onBreadcrumbLookup;
+    pathname = _ref.pathname,
+    onBreadcrumbLookup = _ref.onBreadcrumbLookup;
   var paths = splitUrlPath(pathname);
   var breadcrumbs = paths.map(function (path) {
     return {
@@ -1067,27 +955,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   });
   var breadcrumbElements = breadcrumbs.map(function (_ref3, i) {
     var title = _ref3.title,
-        path = _ref3.path;
+      path = _ref3.path;
     var isLast = i === breadcrumbs.length - 1;
-
     if (isLast) {
       return React.createElement(BreadcrumbItem, {
         key: path,
         as: 'span'
       }, title);
     }
-
     return React.createElement(BreadcrumbItem, {
       key: path,
       as: Link$2,
       to: path
     }, title);
   });
-
   if (prependBreadcrumbItem) {
     return React.createElement(BreadcrumbNavigation, null, [prependBreadcrumbItem].concat(breadcrumbElements));
   }
-
   return React.createElement(BreadcrumbNavigation, null, breadcrumbElements);
 };
 
@@ -1100,15 +984,14 @@ var Link = function Link(props) {
 var _excluded = ["as", "children", "fontSize", "color", "lineHeight", "fontWeight", "className"];
 var Text = function Text(_ref) {
   var _ref$as = _ref.as,
-      component = _ref$as === void 0 ? 'span' : _ref$as,
-      children = _ref.children,
-      fontSize = _ref.fontSize,
-      color = _ref.color,
-      lineHeight = _ref.lineHeight,
-      fontWeight = _ref.fontWeight,
-      className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    component = _ref$as === void 0 ? 'span' : _ref$as,
+    children = _ref.children,
+    fontSize = _ref.fontSize,
+    color = _ref.color,
+    lineHeight = _ref.lineHeight,
+    fontWeight = _ref.fontWeight,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var classes = [];
   fontSize && classes.push.apply(classes, responsiveProp('eps-font-size-', fontSize));
   lineHeight && classes.push.apply(classes, responsiveProp('eps-line-height-', lineHeight));
@@ -1129,10 +1012,9 @@ var Text = function Text(_ref) {
  * @param Props.onBreadcrumbLookup - A function that takes a path and returns a i18n translated string or undefined
  * @returns A Helmet component with updated title
  */
-
 function PageTitle(_ref) {
   var pathname = _ref.pathname,
-      onBreadcrumbLookup = _ref.onBreadcrumbLookup;
+    onBreadcrumbLookup = _ref.onBreadcrumbLookup;
   var paths = splitUrlPath(pathname);
   var pageTitles = paths.map(function (path) {
     return {
@@ -1149,5 +1031,5 @@ function PageTitle(_ref) {
   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 };
+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, RouteLeavingGuard, Stack, StatusLabel, Text, Unbutton, UserMenu, featureFlag, getColorForEnvironment, getHumanReadableEnvironment, responsiveProp, useEventListener, useFeatureToggle };
 //# sourceMappingURL=common.esm.js.map