@entur-partner/common 8.0.0 → 8.0.4

package/dist/common.esm.js

@@ -1,9 +1,9 @@
 import React, { Children, useState, useEffect, useRef, Component } from 'react';
 import cx from 'classnames';
 import { Link as Link$1, Heading6, Paragraph } from '@entur/typography';
-import { NorwayIcon, UKIcon, UserIcon, LogOutIcon, DownArrowIcon, ChannelsIcon } from '@entur/icons';
+import { UserIcon, DownArrowIcon, NorwayIcon, UKIcon, ChannelsIcon, LogOutIcon } from '@entur/icons';
 import { SecondaryButton, Button, PrimaryButton, ButtonGroup } from '@entur/button';
-import { Link as Link$2, useNavigate, useInRouterContext, useBlocker } from 'react-router-dom';
+import { useNavigate, Link as Link$2, 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';
@@ -300,97 +300,51 @@ var Content = function Content(_ref) {
   }, children);
 };
 
+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 () {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, buttonRef, handler]);
+}
+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
+  if (event.composed && event.composedPath) {
+    var contains = event.composedPath().find(function (target) {
+      if (target === window) {
+        return false;
+      }
+      return element.contains(target);
+    });
+    return !!contains;
+  }
+  return false;
+}
+
 var _excluded$b = ["className", "children", "userName", "open", "onOpenChange", "environment"];
-var UserMenu = function UserMenu(_ref) {
+var CustomOverflowMenu = function CustomOverflowMenu(_ref) {
   var className = _ref.className,
-    messages = _ref.messages,
-    onLogout = _ref.onLogout,
-    onLanguageChange = _ref.onLanguageChange,
+    children = _ref.children,
     userName = _ref.userName,
-    language = _ref.language,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
     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];
-  return React.createElement("div", {
-    id: "eps-user-menu"
-  }, React.createElement(CustomOverflowMenu, {
-    open: open,
-    onOpenChange: setOpen,
-    className: triggerClassList,
-    userName: userName,
-    environment: environment
-  }, React.createElement("div", {
-    id: "eps-overflow-menu"
-  }, language === 'en' ? React.createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      onLanguageChange('nb');
-      setOpen(false);
-    },
-    className: "eps-overflow-menu__item"
-  }, React.createElement("span", {
-    "aria-hidden": true,
-    className: "eps-overflow-menu__icon-margin"
-  }, React.createElement(NorwayIcon, {
-    size: "1rem",
-    inline: true
-  })), messages.switchLanguage) : React.createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      onLanguageChange('en');
-      setOpen(false);
-    },
-    className: "eps-overflow-menu__item"
-  }, React.createElement("span", {
-    "aria-hidden": true,
-    className: "eps-overflow-menu__icon-margin"
-  }, React.createElement(UKIcon, {
-    size: "1rem",
-    inline: true
-  })), 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'
-    }
-  }, React.createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      setOpen(false);
-      onNavigateToMyProfile();
-    },
-    className: "eps-overflow-menu__item"
-  }, React.createElement("span", {
-    "aria-hidden": true
-  }, React.createElement(UserIcon, {
-    size: "1rem",
-    inline: true
-  })), messages.myProfile)), React.createElement(CustomOverflowMenuItem, {
-    onClick: function onClick() {
-      onLogout();
-      setOpen(false);
-    },
-    "data-testid": "user-menu-logout",
-    className: "eps-overflow-menu__item"
-  }, React.createElement("span", {
-    "aria-hidden": true
-  }, React.createElement(LogOutIcon, {
-    size: "1rem",
-    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$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var overflowItemsClasses = cx('eps-overflow-menu__group', {
     'eps-overflow-menu__group--open': open
   });
@@ -431,15 +385,52 @@ 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 LanguageSwitchMenuItem = function LanguageSwitchMenuItem(_ref) {
+  var language = _ref.language,
+    onLanguageChange = _ref.onLanguageChange,
+    setOpen = _ref.setOpen,
+    name = _ref.name;
+  var useB47LanguageKey = useFeatureToggle('USE_BCP-47_LANGUAGE_KEY');
+  var norwegianLanguageKey = useB47LanguageKey ? 'nb-NO' : 'nb';
+  var englishLanguageKey = useB47LanguageKey ? 'en-GB' : 'en';
+  return React.createElement(React.Fragment, null, language === englishLanguageKey ? React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLanguageChange(norwegianLanguageKey);
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true,
+    className: "eps-overflow-menu__icon-margin"
+  }, React.createElement(NorwayIcon, {
+    size: "1rem",
+    inline: true
+  })), name) : React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLanguageChange(englishLanguageKey);
+      setOpen(false);
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true,
+    className: "eps-overflow-menu__icon-margin"
+  }, React.createElement(UKIcon, {
+    size: "1rem",
+    inline: true
+  })), name));
+};
+
+var VersionMenuItem = function VersionMenuItem(_ref) {
+  var title = _ref.title,
+    setOpen = _ref.setOpen;
   var navigate = useNavigate(); // Hide useNavigate from standalone micro-frontends because it is not under RouterProvider
   return React.createElement(CustomOverflowMenuItem, {
     onClick: function onClick() {
@@ -455,41 +446,92 @@ var VersionCustomOverflowMenuItems = function VersionCustomOverflowMenuItems(_re
     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
-  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 () {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, buttonRef, handler]);
-}
+
+var UserMenuItem = function UserMenuItem(_ref) {
+  var name = _ref.name,
+    setOpen = _ref.setOpen,
+    onNavigateToMyProfile = _ref.onNavigateToMyProfile;
+  return React.createElement(Link$2, {
+    to: "/permission-admin/my-profile",
+    style: {
+      textDecoration: 'none'
+    }
+  }, React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      setOpen(false);
+      onNavigateToMyProfile();
+    },
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(UserIcon, {
+    size: "1rem",
+    inline: true
+  })), name));
+};
+
+var LogOutMenuItem = function LogOutMenuItem(_ref) {
+  var name = _ref.name,
+    setOpen = _ref.setOpen,
+    onLogout = _ref.onLogout;
+  return React.createElement(CustomOverflowMenuItem, {
+    onClick: function onClick() {
+      onLogout();
+      setOpen(false);
+    },
+    "data-testid": "user-menu-logout",
+    className: "eps-overflow-menu__item"
+  }, React.createElement("span", {
+    "aria-hidden": true
+  }, React.createElement(LogOutIcon, {
+    size: "1rem",
+    inline: true
+  })), name);
+};
+
+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 triggerClassList = cx(['eps-user-menu__trigger-button', className]);
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return React.createElement("div", {
+    id: "eps-user-menu"
+  }, React.createElement(CustomOverflowMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    className: triggerClassList,
+    userName: userName,
+    environment: environment
+  }, React.createElement("div", {
+    id: "eps-overflow-menu"
+  }, React.createElement(LanguageSwitchMenuItem, {
+    name: messages.switchLanguage,
+    language: language,
+    onLanguageChange: onLanguageChange,
+    setOpen: setOpen
+  }), showVersionItem && messages.appVersion && React.createElement(VersionMenuItem, {
+    title: messages.appVersion,
+    setOpen: setOpen
+  }), showMyProfileItem && messages.myProfile && React.createElement(UserMenuItem, {
+    name: messages.myProfile,
+    setOpen: setOpen,
+    onNavigateToMyProfile: onNavigateToMyProfile
+  }), React.createElement(LogOutMenuItem, {
+    name: messages.logout,
+    setOpen: setOpen,
+    onLogout: onLogout
+  }))));
+};
 
 var _excluded$a = ["label", "organisations", "onChange", "selectedOrganisationId"];
 var OrganisationDropDown = function OrganisationDropDown(_ref) {