@entur-partner/common 10.0.1 → 10.0.2-alpha.0

package/dist/common.esm.js

@@ -2,7 +2,7 @@ import React, { Children, Component, useState, useEffect, useRef } from 'react';
 import { localeDate, localeDateTime, isDate, isDateString, splitUrlPath, isString, isFunction, assertIsDefined, hasAllPermissions, hasOneOfPermissions } from '@entur-partner/util';
 import cx from 'classnames';
 import { BreadcrumbItem, BreadcrumbNavigation, Pagination } from '@entur/menu';
-import { Link as Link$1, useInRouterContext, useBlocker, useNavigate } from 'react-router-dom';
+import { useSearchParams, Link as Link$1, useInRouterContext, useBlocker, useNavigate } from 'react-router-dom';
 import { ButtonGroup, SecondaryButton, PrimaryButton, Button } from '@entur/button';
 import { Modal } from '@entur/modal';
 import { Paragraph, Link as Link$2, Heading6 } from '@entur/typography';
@@ -192,10 +192,42 @@ var AuditInfo = function AuditInfo(_ref) {
   }));
 };
 
+var ProjectContext = /*#__PURE__*/React.createContext(undefined);
+var useProject = function useProject() {
+  var context = React.useContext(ProjectContext);
+  if (!context) {
+    throw new Error("Must be used within a ProjectProvider");
+  }
+  return {
+    defaultProjectId: context.defaultProjectId,
+    projectName: context.projectName
+  };
+};
+/**
+ * A Provider to sync project id across micro-frontends. Used by useNavigateParams to ensure project id is always present in the url.
+ */
+var ProjectProvider = function ProjectProvider(_ref) {
+  var defaultProjectId = _ref.defaultProjectId,
+    projectName = _ref.projectName,
+    children = _ref.children;
+  return React.createElement(ProjectContext.Provider, {
+    value: {
+      defaultProjectId: defaultProjectId,
+      projectName: projectName
+    }
+  }, children);
+};
+
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var prependBreadcrumbItem = _ref.prependBreadcrumbItem,
     pathname = _ref.pathname,
     onBreadcrumbLookup = _ref.onBreadcrumbLookup;
+  var _useProject = useProject(),
+    projectName = _useProject.projectName,
+    defaultProjectId = _useProject.defaultProjectId;
+  var _useSearchParams = useSearchParams(),
+    searchParams = _useSearchParams[0];
+  var projectValue = searchParams.get(projectName);
   var paths = splitUrlPath(pathname);
   var breadcrumbs = paths.map(function (path) {
     return {
@@ -216,10 +248,13 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
         as: "span"
       }, title);
     }
+    if (!projectValue) {
+      searchParams.set(projectName, defaultProjectId);
+    }
     return React.createElement(BreadcrumbItem, {
       key: path,
       as: Link$1,
-      to: path
+      to: path + "?" + searchParams.toString()
     }, title);
   });
   if (prependBreadcrumbItem) {
@@ -1102,5 +1137,36 @@ function useEventListener(eventName, handler, element) {
   }, [eventName, element]);
 }
 
-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, useDocumentTitle, useEventListener, useFeatureToggle };
+/**
+ * A custom hook that wraps the useNavigate hook from react-router-dom for MicroFrontend State
+ *
+ * @param to can be a string path, a To object, or a number (delta)
+ * @param options contains options for modifying the navigation
+ * @returns a function that navigates to the specified path with organisationId in the search params
+ */
+function useNavigateParams() {
+  var _useProject = useProject(),
+    projectName = _useProject.projectName,
+    defaultProjectId = _useProject.defaultProjectId;
+  var navigate = useNavigate();
+  var _useSearchParams = useSearchParams(),
+    searchParams = _useSearchParams[0];
+  var projectValue = searchParams.get(projectName);
+  var navigateParam = function navigateParam(to, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    if (projectValue == null) {
+      searchParams.set(projectName, defaultProjectId);
+    }
+    if (typeof to === "number") {
+      navigate(to + "?" + searchParams.toString(), options);
+    } else {
+      navigate(to + "?" + searchParams.toString(), options);
+    }
+  };
+  return navigateParam;
+}
+
+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, ProjectProvider, RouteLeavingGuard, Stack, StatusLabel, Text, Unbutton, UserMenu, featureFlag, getColorForEnvironment, getHumanReadableEnvironment, responsiveProp, useDocumentTitle, useEventListener, useFeatureToggle, useNavigateParams, useProject };
 //# sourceMappingURL=common.esm.js.map