piral-breadcrumbs 1.5.3-beta.6918 → 1.5.3-beta.6941

package/README.md

@@ -1,6 +1,6 @@
 [![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
 
-# [Piral Breadcrumbs](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-breadcrumbs.svg?style=flat)](https://www.npmjs.com/package/piral-breadcrumbs) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+# [Piral Breadcrumbs](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-breadcrumbs.svg?style=flat)](https://www.npmjs.com/package/piral-breadcrumbs) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Community Chat](https://dcbadge.vercel.app/api/server/kKJ2FZmK8t?style=flat)](https://discord.gg/kKJ2FZmK8t)
 
 This is plugin that only has a peer dependency to `piral-core`. What `piral-breadcrumbs` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 

package/esm/Breadcrumbs.js

@@ -1,30 +1,65 @@
 import * as React from 'react';
-import { useLocation, useRouteMatch } from 'react-router';
+import { useGlobalStateContext } from 'piral-core';
 import { PiralBreadcrumbsContainer, PiralBreadcrumbItem } from './components';
 import { useBreadcrumbs } from './useBreadcrumbs';
-function getContent(title, location, path, params) {
+const getKey = /:(([A-Za-z0-9_]+)\*?)/g;
+function getContent(title, path, params) {
     if (typeof title === 'function') {
-        return title({ location, path, params });
+        return title({ path, params });
     }
     return title;
 }
+function useNavigationPath() {
+    const { navigation } = useGlobalStateContext();
+    const [path, setPath] = React.useState(navigation.path);
+    React.useEffect(() => {
+        return navigation.listen(() => {
+            setPath(navigation.path);
+        });
+    }, []);
+    return path;
+}
+function getKeys(template) {
+    const keys = [];
+    let result;
+    while (result = getKey.exec(template)) {
+        keys.push(result[2]);
+    }
+    return keys;
+}
+function getParams(current, path) {
+    const params = {};
+    if (current) {
+        const matcher = current.matcher;
+        const data = matcher.exec(path);
+        if (data) {
+            const keys = getKeys(current.settings.path);
+            for (let i = 0; i < keys.length; i++) {
+                params[keys[i]] = data[i + 1];
+            }
+        }
+    }
+    return params;
+}
+function useParams(current, path) {
+    return React.useMemo(() => getParams(current, path), [current, path]);
+}
 export const Breadcrumbs = () => {
-    const location = useLocation();
-    const breadcrumbs = useBreadcrumbs(location.pathname);
+    const path = useNavigationPath();
+    const breadcrumbs = useBreadcrumbs(path);
     const currentIndex = breadcrumbs.length - 1;
-    const current = breadcrumbs[currentIndex];
-    const { params } = useRouteMatch(current?.settings.path ?? '/');
+    const params = useParams(breadcrumbs[currentIndex], path);
     const children = breadcrumbs.map(({ settings }, i) => {
         const { title, path, ...props } = settings;
         const key = `bc_${i}_${settings.path}`;
         const current = i === currentIndex;
-        const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+        const computedPath = path.replace(getKey, (s, _, id) => {
             if (id in params) {
                 return params[id] || '';
             }
             return s;
         });
-        return (React.createElement(PiralBreadcrumbItem, { key: key, current: current, path: computedPath, ...props }, getContent(title, location, computedPath, params)));
+        return (React.createElement(PiralBreadcrumbItem, { key: key, current: current, path: computedPath, ...props }, getContent(title, computedPath, params)));
     });
     return React.createElement(PiralBreadcrumbsContainer, { children: children });
 };

package/esm/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,SAAS,UAAU,CACjB,KAAkC,EAClC,QAAkB,EAClB,IAAY,EACZ,MAA8B;IAE9B,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;QAC/B,OAAO,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KAC1C;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAa,GAAG,EAAE;IACxC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;QACnD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,QAAQ,CAAC;QAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvC,MAAM,OAAO,GAAG,CAAC,KAAK,YAAY,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,wBAAwB,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;YACvE,IAAI,EAAE,IAAI,MAAM,EAAE;gBAChB,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;aACzB;YAED,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,mBAAmB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,KAAM,KAAK,IAC3E,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAC9B,CACvB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC3D,CAAC,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/esm/types.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { Dict, BaseRegistration, RegistrationDisposer } from 'piral-core';
-import type { Location } from 'history';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletBreadcrumbsApi {
     }
@@ -54,7 +53,6 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 export interface PiralCustomBreadcrumbSettings {
 }
 export interface BreadcrumbTitleParams {
-    location: Location;
     path: string;
     params: Record<string, string>;
 }

package/lib/Breadcrumbs.js

@@ -2,32 +2,67 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumbs = void 0;
 const React = require("react");
-const react_router_1 = require("react-router");
+const piral_core_1 = require("piral-core");
 const components_1 = require("./components");
 const useBreadcrumbs_1 = require("./useBreadcrumbs");
-function getContent(title, location, path, params) {
+const getKey = /:(([A-Za-z0-9_]+)\*?)/g;
+function getContent(title, path, params) {
     if (typeof title === 'function') {
-        return title({ location, path, params });
+        return title({ path, params });
     }
     return title;
 }
+function useNavigationPath() {
+    const { navigation } = (0, piral_core_1.useGlobalStateContext)();
+    const [path, setPath] = React.useState(navigation.path);
+    React.useEffect(() => {
+        return navigation.listen(() => {
+            setPath(navigation.path);
+        });
+    }, []);
+    return path;
+}
+function getKeys(template) {
+    const keys = [];
+    let result;
+    while (result = getKey.exec(template)) {
+        keys.push(result[2]);
+    }
+    return keys;
+}
+function getParams(current, path) {
+    const params = {};
+    if (current) {
+        const matcher = current.matcher;
+        const data = matcher.exec(path);
+        if (data) {
+            const keys = getKeys(current.settings.path);
+            for (let i = 0; i < keys.length; i++) {
+                params[keys[i]] = data[i + 1];
+            }
+        }
+    }
+    return params;
+}
+function useParams(current, path) {
+    return React.useMemo(() => getParams(current, path), [current, path]);
+}
 const Breadcrumbs = () => {
-    const location = (0, react_router_1.useLocation)();
-    const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)(location.pathname);
+    const path = useNavigationPath();
+    const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)(path);
     const currentIndex = breadcrumbs.length - 1;
-    const current = breadcrumbs[currentIndex];
-    const { params } = (0, react_router_1.useRouteMatch)(current?.settings.path ?? '/');
+    const params = useParams(breadcrumbs[currentIndex], path);
     const children = breadcrumbs.map(({ settings }, i) => {
         const { title, path, ...props } = settings;
         const key = `bc_${i}_${settings.path}`;
         const current = i === currentIndex;
-        const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+        const computedPath = path.replace(getKey, (s, _, id) => {
             if (id in params) {
                 return params[id] || '';
             }
             return s;
         });
-        return (React.createElement(components_1.PiralBreadcrumbItem, { key: key, current: current, path: computedPath, ...props }, getContent(title, location, computedPath, params)));
+        return (React.createElement(components_1.PiralBreadcrumbItem, { key: key, current: current, path: computedPath, ...props }, getContent(title, computedPath, params)));
     });
     return React.createElement(components_1.PiralBreadcrumbsContainer, { children: children });
 };

package/lib/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,+CAA0D;AAC1D,6CAA8E;AAC9E,qDAAkD;AAIlD,SAAS,UAAU,CACjB,KAAkC,EAClC,QAAkB,EAClB,IAAY,EACZ,MAA8B;IAE9B,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE;QAC/B,OAAO,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KAC1C;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAEM,MAAM,WAAW,GAAa,GAAG,EAAE;IACxC,MAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAC;IAC/B,MAAM,WAAW,GAAG,IAAA,+BAAc,EAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,4BAAa,EAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;QACnD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,GAAG,QAAQ,CAAC;QAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvC,MAAM,OAAO,GAAG,CAAC,KAAK,YAAY,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,wBAAwB,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;YACvE,IAAI,EAAE,IAAI,MAAM,EAAE;gBAChB,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;aACzB;YAED,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,gCAAmB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,KAAM,KAAK,IAC3E,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAC9B,CACvB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,oBAAC,sCAAyB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC3D,CAAC,CAAC;AA3BW,QAAA,WAAW,eA2BtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/lib/types.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { Dict, BaseRegistration, RegistrationDisposer } from 'piral-core';
-import type { Location } from 'history';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletBreadcrumbsApi {
     }
@@ -54,7 +53,6 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 export interface PiralCustomBreadcrumbSettings {
 }
 export interface BreadcrumbTitleParams {
-    location: Location;
     path: string;
     params: Record<string, string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-breadcrumbs",
-  "version": "1.5.3-beta.6918",
+  "version": "1.5.3-beta.6941",
   "description": "Plugin for creating a breadcrumb manager in Piral.",
   "keywords": [
     "piral",
@@ -54,7 +54,7 @@
   "scripts": {
     "cleanup": "rimraf esm lib piral-breadcrumbs.min.js",
     "build": "yarn build:bundle && yarn build:commonjs && yarn build:esnext",
-    "build:bundle": "esbuild src/index.ts --outfile=piral-breadcrumbs.min.js --bundle --external:piral-core --external:react --external:react-router --minify",
+    "build:bundle": "esbuild src/index.ts --outfile=piral-breadcrumbs.min.js --bundle --external:piral-core --external:react --minify",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-breadcrumbs.json src --exclude \"src/**/*.test.*\"",
@@ -62,10 +62,8 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "@types/react-router": "^5.1.8",
-    "piral-core": "1.5.3-beta.6918",
-    "react": "^18.0.0",
-    "react-router": "^5.2.0"
+    "piral-core": "1.5.3-beta.6941",
+    "react": "^18.0.0"
   },
-  "gitHead": "b429fd493008c23cdae293dd1bc7140e6ac5cb53"
+  "gitHead": "3ec6cbf6364601eab8cf0ce6ef372a2c79a7f008"
 }

package/piral-breadcrumbs.min.js

@@ -1 +1 @@
-(()=>{var L=Object.create;var l=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var D=r=>l(r,"__esModule",{value:!0});var m=(r=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(r,{get:(e,t)=>(typeof require!="undefined"?require:e)[t]}):r)(function(r){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+r+'" is not supported')});var z=(r,e)=>{D(r);for(var t in e)l(r,t,{get:e[t],enumerable:!0})},Z=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of N(e))!O.call(r,n)&&n!=="default"&&l(r,n,{get:()=>e[n],enumerable:!(t=M(e,n))||t.enumerable});return r},b=r=>Z(D(l(r!=null?L($(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var x=b(m("react")),g=b(m("react-router"));var R=b(m("piral-core")),I=(0,R.getPiralComponent)("BreadcrumbsContainer"),G=(0,R.getPiralComponent)("BreadcrumbItem");var _=b(m("piral-core"));function q(r,e){let[t]=r.filter(n=>n.matcher.test(e));return t}function H(r,e){let t=e.split("/");for(;t.length>1;){t.pop();let n=t.join("/"),a=f(r,n);if(a)return a}}function f(r,e){if(e)return q(r,e)||H(r,e)}function w(r){let e=(0,_.useGlobalState)(n=>n.registry.breadcrumbs),t=Object.keys(e).map(n=>e[n]);if(t.length>0){let n=f(t,r);if(n){let a=[n],o=f(t,n.settings.parent);for(;o!==void 0;)a.push(o),o=f(t,o.settings.parent);return a.reverse()}}return[]}function J(r,e,t,n){return typeof r=="function"?r({location:e,path:t,params:n}):r}var C=()=>{let r=(0,g.useLocation)(),e=w(r.pathname),t=e.length-1,n=e[t],{params:a}=(0,g.useRouteMatch)(n?.settings.path??"/"),o=e.map(({settings:u},c)=>{let{title:i,path:d,...B}=u,h=`bc_${c}_${u.path}`,y=c===t,S=d.replace(/:(([A-Za-z0-9_]+)\*?)/g,(F,V,A)=>A in a?a[A]||"":F);return x.createElement(G,{key:h,current:y,path:S,...B},J(i,r,S,a))});return x.createElement(I,{children:o})};C.displayName="Breadcrumbs";var P={};z(P,{registerBreadcrumbs:()=>K,unregisterBreadcrumbs:()=>Q});function K(r,e){r.dispatch(t=>({...t,registry:{...t.registry,breadcrumbs:{...t.registry.breadcrumbs,...e}}}))}function Q(r,e){r.dispatch(t=>({...t,registry:{...t.registry,breadcrumbs:e.reduce((n,a)=>{let{[a]:o,...u}=n;return u},t.registry.breadcrumbs)}}))}var s=b(m("piral-core"));var k=b(m("react")),p=b(m("piral-core")),E=r=>k.createElement(p.ExtensionSlot,{name:"breadcrumbs",params:r,empty:()=>(0,p.defaultRender)(r.children,"default_breadcrumbs")}),j=r=>(0,p.defaultRender)(r.children);function v(r){return r.matcher instanceof RegExp?r.matcher:typeof r.matcher=="string"?(0,s.createRouteMatcher)(r.matcher):(0,s.createRouteMatcher)(r.path)}function T(r){let e={},t=0;for(let n of r)e[`global-${t++}`]={pilet:void 0,matcher:v(n),settings:n};return e}function U(r){return e=>({...e,components:{BreadcrumbItem:j,BreadcrumbsContainer:E,...e.components},registry:{...e.registry,breadcrumbs:r}})}function ur(r={}){let{breadcrumbs:e=[]}=r;return t=>(t.defineActions(P),t.dispatch((0,s.withAll)(U(T(e)),(0,s.withRootExtension)("piral-breadcrumbs",C))),(n,a)=>{let o=a.name,u=0;return{registerBreadcrumbs(c){let i={};for(let d of c){let{name:B=u++,...h}=d,y=(0,s.buildName)(o,B);i[y]=h}return t.registerBreadcrumbs(i),()=>t.unregisterBreadcrumbs(Object.keys(i))},registerBreadcrumb(c,i){typeof c!="string"&&(i=c,c=u++);let d=(0,s.buildName)(o,c);return t.registerBreadcrumbs({[d]:{pilet:o,matcher:v(i),settings:i}}),()=>t.unregisterBreadcrumbs([d])},unregisterBreadcrumb(c){let i=(0,s.buildName)(o,c);t.unregisterBreadcrumbs([i])}}})}})();
+(()=>{var F=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var S=r=>f(r,"__esModule",{value:!0});var d=(r=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(r,{get:(e,t)=>(typeof require!="undefined"?require:e)[t]}):r)(function(r){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+r+'" is not supported')});var z=(r,e)=>{S(r);for(var t in e)f(r,t,{get:e[t],enumerable:!0})},Z=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of $(e))!O.call(r,n)&&n!=="default"&&f(r,n,{get:()=>e[n],enumerable:!(t=M(e,n))||t.enumerable});return r},b=r=>Z(S(f(r!=null?F(K(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var m=b(d("react")),G=b(d("piral-core"));var R=b(d("piral-core")),A=(0,R.getPiralComponent)("BreadcrumbsContainer"),D=(0,R.getPiralComponent)("BreadcrumbItem");var I=b(d("piral-core"));function q(r,e){let[t]=r.filter(n=>n.matcher.test(e));return t}function H(r,e){let t=e.split("/");for(;t.length>1;){t.pop();let n=t.join("/"),s=B(r,n);if(s)return s}}function B(r,e){if(e)return q(r,e)||H(r,e)}function E(r){let e=(0,I.useGlobalState)(n=>n.registry.breadcrumbs),t=Object.keys(e).map(n=>e[n]);if(t.length>0){let n=B(t,r);if(n){let s=[n],a=B(t,n.settings.parent);for(;a!==void 0;)s.push(a),a=B(t,a.settings.parent);return s.reverse()}}return[]}var k=/:(([A-Za-z0-9_]+)\*?)/g;function J(r,e,t){return typeof r=="function"?r({path:e,params:t}):r}function L(){let{navigation:r}=(0,G.useGlobalStateContext)(),[e,t]=m.useState(r.path);return m.useEffect(()=>r.listen(()=>{t(r.path)}),[]),e}function Q(r){let e=[],t;for(;t=k.exec(r);)e.push(t[2]);return e}function T(r,e){let t={};if(r){let s=r.matcher.exec(e);if(s){let a=Q(r.settings.path);for(let o=0;o<a.length;o++)t[a[o]]=s[o+1]}}return t}function U(r,e){return m.useMemo(()=>T(r,e),[r,e])}var x=()=>{let r=L(),e=E(r),t=e.length-1,n=U(e[t],r),s=e.map(({settings:a},o)=>{let{title:u,path:i,...p}=a,h=`bc_${o}_${a.path}`,y=o===t,l=i.replace(k,(j,rr,C)=>C in n?n[C]||"":j);return m.createElement(D,{key:h,current:y,path:l,...p},J(u,l,n))});return m.createElement(A,{children:s})};x.displayName="Breadcrumbs";var P={};z(P,{registerBreadcrumbs:()=>V,unregisterBreadcrumbs:()=>W});function V(r,e){r.dispatch(t=>({...t,registry:{...t.registry,breadcrumbs:{...t.registry.breadcrumbs,...e}}}))}function W(r,e){r.dispatch(t=>({...t,registry:{...t.registry,breadcrumbs:e.reduce((n,s)=>{let{[s]:a,...o}=n;return o},t.registry.breadcrumbs)}}))}var c=b(d("piral-core"));var w=b(d("react")),g=b(d("piral-core")),_=r=>w.createElement(g.ExtensionSlot,{name:"breadcrumbs",params:r,empty:()=>(0,g.defaultRender)(r.children,"default_breadcrumbs")}),v=r=>(0,g.defaultRender)(r.children);function N(r){return r.matcher instanceof RegExp?r.matcher:typeof r.matcher=="string"?(0,c.createRouteMatcher)(r.matcher):(0,c.createRouteMatcher)(r.path)}function X(r){let e={},t=0;for(let n of r)e[`global-${t++}`]={pilet:void 0,matcher:N(n),settings:n};return e}function Y(r){return e=>({...e,components:{BreadcrumbItem:v,BreadcrumbsContainer:_,...e.components},registry:{...e.registry,breadcrumbs:r}})}function pr(r={}){let{breadcrumbs:e=[]}=r;return t=>(t.defineActions(P),t.dispatch((0,c.withAll)(Y(X(e)),(0,c.withRootExtension)("piral-breadcrumbs",x))),(n,s)=>{let a=s.name,o=0;return{registerBreadcrumbs(u){let i={};for(let p of u){let{name:h=o++,...y}=p,l=(0,c.buildName)(a,h);i[l]=y}return t.registerBreadcrumbs(i),()=>t.unregisterBreadcrumbs(Object.keys(i))},registerBreadcrumb(u,i){typeof u!="string"&&(i=u,u=o++);let p=(0,c.buildName)(a,u);return t.registerBreadcrumbs({[p]:{pilet:a,matcher:N(i),settings:i}}),()=>t.unregisterBreadcrumbs([p])},unregisterBreadcrumb(u){let i=(0,c.buildName)(a,u);t.unregisterBreadcrumbs([i])}}})}})();

package/src/Breadcrumbs.test.tsx

@@ -7,7 +7,6 @@ import { describe, it, expect, vitest, afterEach } from 'vitest';
 import { render, cleanup } from '@testing-library/react';
 import { StateContext } from 'piral-core';
 import { Breadcrumbs } from './Breadcrumbs';
-import { useRouteMatch } from 'react-router';
 
 const MockBcContainer: React.FC<any> = ({ children }) => <div role="container">{children}</div>;
 MockBcContainer.displayName = 'MockBcContainer';
@@ -15,16 +14,7 @@ MockBcContainer.displayName = 'MockBcContainer';
 const MockBcItem: React.FC<any> = ({ children }) => <div role="dialog">{children}</div>;
 MockBcItem.displayName = 'MockBcTile';
 
-vitest.mock('react-router', () => ({
-  useLocation() {
-    return {
-      pathname: '/example',
-    };
-  },
-  useRouteMatch: vitest.fn(() => ({})),
-}));
-
-function createMockContainer(breadcrumbs = {}) {
+function createMockContainer(breadcrumbs = {}, path = '/example') {
   const state = create(() => ({
     components: {
       BreadcrumbsContainer: MockBcContainer,
@@ -47,6 +37,10 @@ function createMockContainer(breadcrumbs = {}) {
       dispatch(update) {
         state.setState(update(state.getState()));
       },
+      navigation: {
+        path,
+        listen() {},
+      },
     } as any,
     api: {} as any,
   };
@@ -104,11 +98,9 @@ describe('Piral-Breadcrumb Container component', () => {
   });
 
   it('dynamic title function replaces wildcard with route param', () => {
-    (useRouteMatch as any).mockReturnValueOnce({ params: { example: 'replacedWildcard' } });
-
     const { context } = createMockContainer({
       example: {
-        matcher: /^\/example$/,
+        matcher: /^\/([a-zA-Z]+)$/,
         settings: {
           path: '/:example*',
           title: ({ path }) => {
@@ -117,7 +109,7 @@ describe('Piral-Breadcrumb Container component', () => {
           parent: '/',
         },
       },
-    });
+    }, '/replacedWildcard');
     const node = render(
       <StateContext.Provider value={context}>
         <Breadcrumbs />
@@ -129,35 +121,7 @@ describe('Piral-Breadcrumb Container component', () => {
     expect(node.getAllByRole('container')[0].innerHTML).toBe('<div role="dialog">/replacedWildcard</div>');
   });
 
-  it('dynamic title function no match in params', () => {
-    (useRouteMatch as any).mockReturnValueOnce({ params: { imNotHere: 'replacedWildcard' } });
-
-    const { context } = createMockContainer({
-      example: {
-        matcher: /^\/example$/,
-        settings: {
-          path: '/:example*',
-          title: ({ path }) => {
-            return path;
-          },
-          parent: '/',
-        },
-      },
-    });
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Breadcrumbs />
-      </StateContext.Provider>,
-    );
-
-    expect(node.getAllByRole('container').length).toBe(1);
-    expect(node.getAllByRole('dialog').length).toBe(1);
-    expect(node.getAllByRole('container')[0].innerHTML).toBe('<div role="dialog">/:example*</div>');
-  });
-
   it('dynamic title function with falsely route param', () => {
-    (useRouteMatch as any).mockReturnValueOnce({ params: { example: false } });
-
     const { context } = createMockContainer({
       example: {
         matcher: /^\/example$/,
@@ -182,8 +146,6 @@ describe('Piral-Breadcrumb Container component', () => {
   });
 
   it('dynamic title function with static title', () => {
-    (useRouteMatch as any).mockReturnValueOnce({ params: { imNotHere: 'replacedWildcard' } });
-
     const { context } = createMockContainer({
       example: {
         matcher: /^\/example$/,
@@ -208,8 +170,6 @@ describe('Piral-Breadcrumb Container component', () => {
   });
 
   it('static title', () => {
-    (useRouteMatch as any).mockReturnValueOnce({ params: {} });
-
     const { context } = createMockContainer({
       example: {
         matcher: /^\/example$/,

package/src/Breadcrumbs.tsx

@@ -1,35 +1,78 @@
 import * as React from 'react';
-import { useLocation, useRouteMatch } from 'react-router';
+import { useGlobalStateContext } from 'piral-core';
 import { PiralBreadcrumbsContainer, PiralBreadcrumbItem } from './components';
 import { useBreadcrumbs } from './useBreadcrumbs';
-import { BreadcrumbSettings } from './types';
-import { Location } from 'history';
-
-function getContent(
-  title: BreadcrumbSettings['title'],
-  location: Location,
-  path: string,
-  params: Record<string, string>,
-) {
+import { BreadcrumbRegistration, BreadcrumbSettings } from './types';
+
+const getKey = /:(([A-Za-z0-9_]+)\*?)/g;
+
+function getContent(title: BreadcrumbSettings['title'], path: string, params: Record<string, string>) {
   if (typeof title === 'function') {
-    return title({ location, path, params });
+    return title({ path, params });
   }
 
   return title;
 }
 
+function useNavigationPath() {
+  const { navigation } = useGlobalStateContext();
+  const [path, setPath] = React.useState(navigation.path);
+
+  React.useEffect(() => {
+    return navigation.listen(() => {
+      setPath(navigation.path);
+    });
+  }, []);
+
+  return path;
+}
+
+function getKeys(template: string) {
+  const keys: Array<string> = [];
+  let result: RegExpExecArray;
+
+  while (result = getKey.exec(template)) {
+    keys.push(result[2]);
+  }
+
+  return keys;
+}
+
+function getParams(current: BreadcrumbRegistration, path: string) {
+  const params: Record<string, string> = {};
+
+  if (current) {
+    const matcher = current.matcher;
+    const data = matcher.exec(path);
+
+    if (data) {
+      const keys = getKeys(current.settings.path);
+
+      for (let i = 0; i < keys.length; i++) {
+        params[keys[i]] = data[i + 1];
+      }
+    }
+    
+  }
+
+  return params;
+}
+
+function useParams(current: BreadcrumbRegistration, path: string) {
+  return React.useMemo(() => getParams(current, path), [current, path]);
+}
+
 export const Breadcrumbs: React.FC = () => {
-  const location = useLocation();
-  const breadcrumbs = useBreadcrumbs(location.pathname);
+  const path = useNavigationPath();
+  const breadcrumbs = useBreadcrumbs(path);
   const currentIndex = breadcrumbs.length - 1;
-  const current = breadcrumbs[currentIndex];
-  const { params } = useRouteMatch(current?.settings.path ?? '/');
+  const params = useParams(breadcrumbs[currentIndex], path);
 
   const children = breadcrumbs.map(({ settings }, i) => {
     const { title, path, ...props } = settings;
     const key = `bc_${i}_${settings.path}`;
     const current = i === currentIndex;
-    const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+    const computedPath = path.replace(getKey, (s, _, id) => {
       if (id in params) {
         return params[id] || '';
       }
@@ -39,7 +82,7 @@ export const Breadcrumbs: React.FC = () => {
 
     return (
       <PiralBreadcrumbItem key={key} current={current} path={computedPath} {...props}>
-        {getContent(title, location, computedPath, params)}
+        {getContent(title, computedPath, params)}
       </PiralBreadcrumbItem>
     );
   });

package/src/types.ts

@@ -1,6 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { Dict, BaseRegistration, RegistrationDisposer } from 'piral-core';
-import type { Location } from 'history';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletBreadcrumbsApi {}
@@ -61,7 +60,6 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 export interface PiralCustomBreadcrumbSettings {}
 
 export interface BreadcrumbTitleParams {
-  location: Location;
   path: string;
   params: Record<string, string>;
 }