piral-breadcrumbs 1.1.0-beta.5752 → 1.1.0-beta.5772

package/esm/Breadcrumbs.js

@@ -3,6 +3,12 @@ import * as React from 'react';
 import { useLocation, useRouteMatch } from 'react-router';
 import { PiralBreadcrumbsContainer, PiralBreadcrumbItem } from './components';
 import { useBreadcrumbs } from './useBreadcrumbs';
+function getContent(title, location, path, params) {
+    if (typeof title === 'function') {
+        return title({ location, path, params });
+    }
+    return title;
+}
 export const Breadcrumbs = () => {
     var _a;
     const location = useLocation();
@@ -14,8 +20,13 @@ export const Breadcrumbs = () => {
         const { title, path } = settings, props = __rest(settings, ["title", "path"]);
         const key = `bc_${i}_${settings.path}`;
         const current = i === currentIndex;
-        const computedPath = path.replace(/:([A-Za-z0-9_]+)/g, (s, id) => { var _a; return (_a = params[id]) !== null && _a !== void 0 ? _a : s; });
-        return (React.createElement(PiralBreadcrumbItem, Object.assign({ key: key, current: current, path: computedPath }, props), title));
+        const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+            if (id in params) {
+                return params[id] || '';
+            }
+            return s;
+        });
+        return (React.createElement(PiralBreadcrumbItem, Object.assign({ key: key, current: current, path: computedPath }, props), getContent(title, location, 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;AAElD,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,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,mCAAI,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,KAAe,QAAQ,EAAlB,KAAK,UAAK,QAAQ,EAApC,iBAAyB,CAAW,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,mBAAmB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,MAAM,CAAC,EAAE,CAAC,mCAAI,CAAC,CAAA,EAAA,CAAC,CAAC;QAEnF,OAAO,CACL,oBAAC,mBAAmB,kBAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,IAAM,KAAK,GAC3E,KAAK,CACc,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":";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,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,mCAAI,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,KAAe,QAAQ,EAAlB,KAAK,UAAK,QAAQ,EAApC,iBAAyB,CAAW,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,kBAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,IAAM,KAAK,GAC3E,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"}

package/esm/types.d.ts

@@ -1,5 +1,6 @@
 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 {
     }
@@ -52,6 +53,11 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 }
 export interface PiralCustomBreadcrumbSettings {
 }
+export interface BreadcrumbTitleParams {
+    location: Location;
+    path: string;
+    params: Record<string, string>;
+}
 export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
     /**
      * Gets the path of breadcrumb for navigation purposes.
@@ -77,7 +83,7 @@ export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
     /**
      * The title of the breadcrumb.
      */
-    title: ReactNode;
+    title: ReactNode | ((params: BreadcrumbTitleParams) => ReactNode);
 }
 export interface BreadcrumbRegistration extends BaseRegistration {
     matcher: RegExp;

package/lib/Breadcrumbs.js

@@ -6,6 +6,12 @@ const React = require("react");
 const react_router_1 = require("react-router");
 const components_1 = require("./components");
 const useBreadcrumbs_1 = require("./useBreadcrumbs");
+function getContent(title, location, path, params) {
+    if (typeof title === 'function') {
+        return title({ location, path, params });
+    }
+    return title;
+}
 const Breadcrumbs = () => {
     var _a;
     const location = (0, react_router_1.useLocation)();
@@ -17,8 +23,13 @@ const Breadcrumbs = () => {
         const { title, path } = settings, props = tslib_1.__rest(settings, ["title", "path"]);
         const key = `bc_${i}_${settings.path}`;
         const current = i === currentIndex;
-        const computedPath = path.replace(/:([A-Za-z0-9_]+)/g, (s, id) => { var _a; return (_a = params[id]) !== null && _a !== void 0 ? _a : s; });
-        return (React.createElement(components_1.PiralBreadcrumbItem, Object.assign({ key: key, current: current, path: computedPath }, props), title));
+        const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+            if (id in params) {
+                return params[id] || '';
+            }
+            return s;
+        });
+        return (React.createElement(components_1.PiralBreadcrumbItem, Object.assign({ key: key, current: current, path: computedPath }, props), getContent(title, location, 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;AAE3C,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,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,mCAAI,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,KAAe,QAAQ,EAAlB,KAAK,kBAAK,QAAQ,EAApC,iBAAyB,CAAW,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,mBAAmB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,MAAM,CAAC,EAAE,CAAC,mCAAI,CAAC,CAAA,EAAA,CAAC,CAAC;QAEnF,OAAO,CACL,oBAAC,gCAAmB,kBAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,IAAM,KAAK,GAC3E,KAAK,CACc,CACvB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,oBAAC,sCAAyB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;AAC3D,CAAC,CAAC;AArBW,QAAA,WAAW,eAqBtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"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,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,mCAAI,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,KAAe,QAAQ,EAAlB,KAAK,kBAAK,QAAQ,EAApC,iBAAyB,CAAW,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,kBAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,IAAM,KAAK,GAC3E,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"}

package/lib/types.d.ts

@@ -1,5 +1,6 @@
 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 {
     }
@@ -52,6 +53,11 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 }
 export interface PiralCustomBreadcrumbSettings {
 }
+export interface BreadcrumbTitleParams {
+    location: Location;
+    path: string;
+    params: Record<string, string>;
+}
 export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
     /**
      * Gets the path of breadcrumb for navigation purposes.
@@ -77,7 +83,7 @@ export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
     /**
      * The title of the breadcrumb.
      */
-    title: ReactNode;
+    title: ReactNode | ((params: BreadcrumbTitleParams) => ReactNode);
 }
 export interface BreadcrumbRegistration extends BaseRegistration {
     matcher: RegExp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-breadcrumbs",
-  "version": "1.1.0-beta.5752",
+  "version": "1.1.0-beta.5772",
   "description": "Plugin for creating a breadcrumb manager in Piral.",
   "keywords": [
     "piral",
@@ -66,9 +66,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-router": "^5.1.8",
-    "piral-core": "1.1.0-beta.5752",
+    "piral-core": "1.1.0-beta.5772",
     "react": "^18.0.0",
     "react-router": "^5.2.0"
   },
-  "gitHead": "a25a97f00b21282f33439320bef90ccbcc27ee96"
+  "gitHead": "d8e1c4bdf3a7ebb171fd3b05fdbe2f9fd97f259f"
 }

package/piral-breadcrumbs.min.js

@@ -1 +1 @@
-(()=>{var pr=Object.create;var C=Object.defineProperty,lr=Object.defineProperties,dr=Object.getOwnPropertyDescriptor,fr=Object.getOwnPropertyDescriptors,br=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,gr=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var H=(r,e,t)=>e in r?C(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,f=(r,e)=>{for(var t in e||(e={}))G.call(e,t)&&H(r,t,e[t]);if(S)for(var t of S(e))z.call(e,t)&&H(r,t,e[t]);return r},g=(r,e)=>lr(r,fr(e)),K=r=>C(r,"__esModule",{value:!0});var B=(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')}),L=r=>typeof r=="symbol"?r:r+"",y=(r,e)=>{var t={};for(var a in r)G.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a]);if(r!=null&&S)for(var a of S(r))e.indexOf(a)<0&&z.call(r,a)&&(t[a]=r[a]);return t};var W=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),hr=(r,e)=>{K(r);for(var t in e)C(r,t,{get:e[t],enumerable:!0})},Br=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of br(e))!G.call(r,a)&&a!=="default"&&C(r,a,{get:()=>e[a],enumerable:!(t=dr(e,a))||t.enumerable});return r},x=r=>Br(K(C(r!=null?pr(gr(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var tr=W((qr,er)=>{er.exports=Array.isArray||function(r){return Object.prototype.toString.call(r)=="[object Array]"}});var cr=W((Jr,R)=>{var D=tr();R.exports=ir;R.exports.parse=N;R.exports.compile=Er;R.exports.tokensToFunction=ar;R.exports.tokensToRegExp=nr;var Cr=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function N(r,e){for(var t=[],a=0,o=0,i="",m=e&&e.delimiter||"/",n;(n=Cr.exec(r))!=null;){var s=n[0],u=n[1],p=n.index;if(i+=r.slice(o,p),o=p+s.length,u){i+=u[1];continue}var c=r[o],l=n[2],d=n[3],b=n[4],w=n[5],v=n[6],P=n[7];i&&(t.push(i),i="");var A=l!=null&&c!=null&&c!==l,sr=v==="+"||v==="*",mr=v==="?"||v==="*",J=n[2]||m,M=b||w;t.push({name:d||a++,prefix:l||"",delimiter:J,optional:mr,repeat:sr,partial:A,asterisk:!!P,pattern:M?Ar(M):P?".*":"[^"+$(J)+"]+?"})}return o<r.length&&(i+=r.substr(o)),i&&t.push(i),t}function Er(r,e){return ar(N(r,e),e)}function wr(r){return encodeURI(r).replace(/[\/?#]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}function Pr(r){return encodeURI(r).replace(/[?#]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}function ar(r,e){for(var t=new Array(r.length),a=0;a<r.length;a++)typeof r[a]=="object"&&(t[a]=new RegExp("^(?:"+r[a].pattern+")$",q(e)));return function(o,i){for(var m="",n=o||{},s=i||{},u=s.pretty?wr:encodeURIComponent,p=0;p<r.length;p++){var c=r[p];if(typeof c=="string"){m+=c;continue}var l=n[c.name],d;if(l==null)if(c.optional){c.partial&&(m+=c.prefix);continue}else throw new TypeError('Expected "'+c.name+'" to be defined');if(D(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(l.length===0){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var b=0;b<l.length;b++){if(d=u(l[b]),!t[p].test(d))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(d)+"`");m+=(b===0?c.prefix:c.delimiter)+d}continue}if(d=c.asterisk?Pr(l):u(l),!t[p].test(d))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+d+'"');m+=c.prefix+d}return m}}function $(r){return r.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function Ar(r){return r.replace(/([=!:$\/()])/g,"\\$1")}function O(r,e){return r.keys=e,r}function q(r){return r&&r.sensitive?"":"i"}function Sr(r,e){var t=r.source.match(/\((?!\?)/g);if(t)for(var a=0;a<t.length;a++)e.push({name:a,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return O(r,e)}function Ir(r,e,t){for(var a=[],o=0;o<r.length;o++)a.push(ir(r[o],e,t).source);var i=new RegExp("(?:"+a.join("|")+")",q(t));return O(i,e)}function Tr(r,e,t){return nr(N(r,t),e,t)}function nr(r,e,t){D(e)||(t=e||t,e=[]),t=t||{};for(var a=t.strict,o=t.end!==!1,i="",m=0;m<r.length;m++){var n=r[m];if(typeof n=="string")i+=$(n);else{var s=$(n.prefix),u="(?:"+n.pattern+")";e.push(n),n.repeat&&(u+="(?:"+s+u+")*"),n.optional?n.partial?u=s+"("+u+")?":u="(?:"+s+"("+u+"))?":u=s+"("+u+")",i+=u}}var p=$(t.delimiter||"/"),c=i.slice(-p.length)===p;return a||(i=(c?i.slice(0,-p.length):i)+"(?:"+p+"(?=$))?"),o?i+="$":i+=a&&c?"":"(?="+p+"|$)",O(new RegExp("^"+i,q(t)),e)}function ir(r,e,t){return D(e)||(t=e||t,e=[]),t=t||{},r instanceof RegExp?Sr(r,e):D(r)?Ir(r,e,t):Tr(r,e,t)}});var U=x(B("react")),T=x(B("react-router"));var _=x(B("piral-core")),X=(0,_.getPiralComponent)("BreadcrumbsContainer"),Z=(0,_.getPiralComponent)("BreadcrumbItem");var Q=x(B("piral-core"));function xr(r,e){let[t]=r.filter(a=>a.matcher.test(e));return t}function vr(r,e){let t=e.split("/");for(;t.length>1;){t.pop();let a=t.join("/"),o=I(r,a);if(o)return o}}function I(r,e){if(e)return xr(r,e)||vr(r,e)}function V(r){let e=(0,Q.useGlobalState)(a=>a.registry.breadcrumbs),t=Object.keys(e).map(a=>e[a]);if(t.length>0){let a=I(t,r);if(a){let o=[a],i=I(t,a.settings.parent);for(;i!==void 0;)o.push(i),i=I(t,i.settings.parent);return o.reverse()}}return[]}var j=()=>{var m;let r=(0,T.useLocation)(),e=V(r.pathname),t=e.length-1,a=e[t],{params:o}=(0,T.useRouteMatch)((m=a==null?void 0:a.settings.path)!=null?m:"/"),i=e.map(({settings:n},s)=>{let w=n,{title:u,path:p}=w,c=y(w,["title","path"]),l=`bc_${s}_${n.path}`,d=s===t,b=p.replace(/:([A-Za-z0-9_]+)/g,(v,P)=>{var A;return(A=o[P])!=null?A:v});return U.createElement(Z,f({key:l,current:d,path:b},c),u)});return U.createElement(X,{children:i})};j.displayName="Breadcrumbs";var F={};hr(F,{registerBreadcrumbs:()=>yr,unregisterBreadcrumbs:()=>Rr});function yr(r,e){r.dispatch(t=>g(f({},t),{registry:g(f({},t.registry),{breadcrumbs:f(f({},t.registry.breadcrumbs),e)})}))}function Rr(r,e){r.dispatch(t=>g(f({},t),{registry:g(f({},t.registry),{breadcrumbs:e.reduce((a,o)=>{let n=a,{[o]:i}=n;return y(n,[L(o)])},t.registry.breadcrumbs)})}))}var h=x(B("piral-core"));var Y=x(B("react")),E=x(B("piral-core")),k=r=>Y.createElement(E.ExtensionSlot,{name:"breadcrumbs",params:r,empty:()=>(0,E.defaultRender)(r.children,"default_breadcrumbs")}),rr=r=>(0,E.defaultRender)(r.children);var or=cr();function ur(r){return r.matcher instanceof RegExp?r.matcher:typeof r.matcher=="string"?or(r.matcher):or(r.path)}function Dr(r){let e={},t=0;for(let a of r)e[`global-${t++}`]={pilet:void 0,matcher:ur(a),settings:a};return e}function $r(r){return e=>g(f({},e),{components:f({BreadcrumbItem:rr,BreadcrumbsContainer:k},e.components),registry:g(f({},e.registry),{breadcrumbs:r})})}function Wr(r={}){let{breadcrumbs:e=[]}=r;return t=>(t.defineActions(F),t.dispatch((0,h.withAll)($r(Dr(e)),(0,h.withRootExtension)("piral-breadcrumbs",j))),(a,o)=>{let i=o.name,m=0;return{registerBreadcrumbs(n){let s={};for(let p of n){let u=p,{name:c=m++}=u,l=y(u,["name"]),d=(0,h.buildName)(i,c);s[d]=l}return t.registerBreadcrumbs(s),()=>t.unregisterBreadcrumbs(Object.keys(s))},registerBreadcrumb(n,s){typeof n!="string"&&(s=n,n=m++);let u=(0,h.buildName)(i,n);return t.registerBreadcrumbs({[u]:{pilet:i,matcher:ur(s),settings:s}}),()=>t.unregisterBreadcrumbs([u])},unregisterBreadcrumb(n){let s=(0,h.buildName)(i,n);t.unregisterBreadcrumbs([s])}}})}})();
+(()=>{var pr=Object.create;var C=Object.defineProperty,lr=Object.defineProperties,fr=Object.getOwnPropertyDescriptor,dr=Object.getOwnPropertyDescriptors,br=Object.getOwnPropertyNames,A=Object.getOwnPropertySymbols,gr=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var z=(r,e,t)=>e in r?C(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,d=(r,e)=>{for(var t in e||(e={}))G.call(e,t)&&z(r,t,e[t]);if(A)for(var t of A(e))M.call(e,t)&&z(r,t,e[t]);return r},g=(r,e)=>lr(r,dr(e)),H=r=>C(r,"__esModule",{value:!0});var B=(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')}),K=r=>typeof r=="symbol"?r:r+"",y=(r,e)=>{var t={};for(var a in r)G.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a]);if(r!=null&&A)for(var a of A(r))e.indexOf(a)<0&&M.call(r,a)&&(t[a]=r[a]);return t};var W=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),hr=(r,e)=>{H(r);for(var t in e)C(r,t,{get:e[t],enumerable:!0})},Br=(r,e,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of br(e))!G.call(r,a)&&a!=="default"&&C(r,a,{get:()=>e[a],enumerable:!(t=fr(e,a))||t.enumerable});return r},x=r=>Br(H(C(r!=null?pr(gr(r)):{},"default",r&&r.__esModule&&"default"in r?{get:()=>r.default,enumerable:!0}:{value:r,enumerable:!0})),r);var tr=W((qr,er)=>{er.exports=Array.isArray||function(r){return Object.prototype.toString.call(r)=="[object Array]"}});var or=W((Jr,R)=>{var T=tr();R.exports=ir;R.exports.parse=N;R.exports.compile=wr;R.exports.tokensToFunction=ar;R.exports.tokensToRegExp=nr;var Er=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function N(r,e){for(var t=[],a=0,c=0,i="",m=e&&e.delimiter||"/",n;(n=Er.exec(r))!=null;){var s=n[0],u=n[1],p=n.index;if(i+=r.slice(c,p),c=p+s.length,u){i+=u[1];continue}var o=r[c],l=n[2],f=n[3],b=n[4],w=n[5],v=n[6],$=n[7];i&&(t.push(i),i="");var P=l!=null&&o!=null&&o!==l,sr=v==="+"||v==="*",mr=v==="?"||v==="*",q=n[2]||m,J=b||w;t.push({name:f||a++,prefix:l||"",delimiter:q,optional:mr,repeat:sr,partial:P,asterisk:!!$,pattern:J?Sr(J):$?".*":"[^"+D(q)+"]+?"})}return c<r.length&&(i+=r.substr(c)),i&&t.push(i),t}function wr(r,e){return ar(N(r,e),e)}function Pr(r){return encodeURI(r).replace(/[\/?#]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}function Ar(r){return encodeURI(r).replace(/[?#]/g,function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})}function ar(r,e){for(var t=new Array(r.length),a=0;a<r.length;a++)typeof r[a]=="object"&&(t[a]=new RegExp("^(?:"+r[a].pattern+")$",L(e)));return function(c,i){for(var m="",n=c||{},s=i||{},u=s.pretty?Pr:encodeURIComponent,p=0;p<r.length;p++){var o=r[p];if(typeof o=="string"){m+=o;continue}var l=n[o.name],f;if(l==null)if(o.optional){o.partial&&(m+=o.prefix);continue}else throw new TypeError('Expected "'+o.name+'" to be defined');if(T(l)){if(!o.repeat)throw new TypeError('Expected "'+o.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(l.length===0){if(o.optional)continue;throw new TypeError('Expected "'+o.name+'" to not be empty')}for(var b=0;b<l.length;b++){if(f=u(l[b]),!t[p].test(f))throw new TypeError('Expected all "'+o.name+'" to match "'+o.pattern+'", but received `'+JSON.stringify(f)+"`");m+=(b===0?o.prefix:o.delimiter)+f}continue}if(f=o.asterisk?Ar(l):u(l),!t[p].test(f))throw new TypeError('Expected "'+o.name+'" to match "'+o.pattern+'", but received "'+f+'"');m+=o.prefix+f}return m}}function D(r){return r.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function Sr(r){return r.replace(/([=!:$\/()])/g,"\\$1")}function O(r,e){return r.keys=e,r}function L(r){return r&&r.sensitive?"":"i"}function Ir(r,e){var t=r.source.match(/\((?!\?)/g);if(t)for(var a=0;a<t.length;a++)e.push({name:a,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return O(r,e)}function Tr(r,e,t){for(var a=[],c=0;c<r.length;c++)a.push(ir(r[c],e,t).source);var i=new RegExp("(?:"+a.join("|")+")",L(t));return O(i,e)}function Dr(r,e,t){return nr(N(r,t),e,t)}function nr(r,e,t){T(e)||(t=e||t,e=[]),t=t||{};for(var a=t.strict,c=t.end!==!1,i="",m=0;m<r.length;m++){var n=r[m];if(typeof n=="string")i+=D(n);else{var s=D(n.prefix),u="(?:"+n.pattern+")";e.push(n),n.repeat&&(u+="(?:"+s+u+")*"),n.optional?n.partial?u=s+"("+u+")?":u="(?:"+s+"("+u+"))?":u=s+"("+u+")",i+=u}}var p=D(t.delimiter||"/"),o=i.slice(-p.length)===p;return a||(i=(o?i.slice(0,-p.length):i)+"(?:"+p+"(?=$))?"),c?i+="$":i+=a&&o?"":"(?="+p+"|$)",O(new RegExp("^"+i,L(t)),e)}function ir(r,e,t){return T(e)||(t=e||t,e=[]),t=t||{},r instanceof RegExp?Ir(r,e):T(r)?Tr(r,e,t):Dr(r,e,t)}});var U=x(B("react")),I=x(B("react-router"));var _=x(B("piral-core")),X=(0,_.getPiralComponent)("BreadcrumbsContainer"),Z=(0,_.getPiralComponent)("BreadcrumbItem");var Q=x(B("piral-core"));function xr(r,e){let[t]=r.filter(a=>a.matcher.test(e));return t}function vr(r,e){let t=e.split("/");for(;t.length>1;){t.pop();let a=t.join("/"),c=S(r,a);if(c)return c}}function S(r,e){if(e)return xr(r,e)||vr(r,e)}function V(r){let e=(0,Q.useGlobalState)(a=>a.registry.breadcrumbs),t=Object.keys(e).map(a=>e[a]);if(t.length>0){let a=S(t,r);if(a){let c=[a],i=S(t,a.settings.parent);for(;i!==void 0;)c.push(i),i=S(t,i.settings.parent);return c.reverse()}}return[]}function yr(r,e,t,a){return typeof r=="function"?r({location:e,path:t,params:a}):r}var j=()=>{var m;let r=(0,I.useLocation)(),e=V(r.pathname),t=e.length-1,a=e[t],{params:c}=(0,I.useRouteMatch)((m=a==null?void 0:a.settings.path)!=null?m:"/"),i=e.map(({settings:n},s)=>{let w=n,{title:u,path:p}=w,o=y(w,["title","path"]),l=`bc_${s}_${n.path}`,f=s===t,b=p.replace(/:(([A-Za-z0-9_]+)\*?)/g,(v,$,P)=>P in c?c[P]||"":v);return U.createElement(Z,d({key:l,current:f,path:b},o),yr(u,r,b,c))});return U.createElement(X,{children:i})};j.displayName="Breadcrumbs";var F={};hr(F,{registerBreadcrumbs:()=>Rr,unregisterBreadcrumbs:()=>Cr});function Rr(r,e){r.dispatch(t=>g(d({},t),{registry:g(d({},t.registry),{breadcrumbs:d(d({},t.registry.breadcrumbs),e)})}))}function Cr(r,e){r.dispatch(t=>g(d({},t),{registry:g(d({},t.registry),{breadcrumbs:e.reduce((a,c)=>{let n=a,{[c]:i}=n;return y(n,[K(c)])},t.registry.breadcrumbs)})}))}var h=x(B("piral-core"));var Y=x(B("react")),E=x(B("piral-core")),k=r=>Y.createElement(E.ExtensionSlot,{name:"breadcrumbs",params:r,empty:()=>(0,E.defaultRender)(r.children,"default_breadcrumbs")}),rr=r=>(0,E.defaultRender)(r.children);var cr=or();function ur(r){return r.matcher instanceof RegExp?r.matcher:typeof r.matcher=="string"?cr(r.matcher):cr(r.path)}function $r(r){let e={},t=0;for(let a of r)e[`global-${t++}`]={pilet:void 0,matcher:ur(a),settings:a};return e}function Gr(r){return e=>g(d({},e),{components:d({BreadcrumbItem:rr,BreadcrumbsContainer:k},e.components),registry:g(d({},e.registry),{breadcrumbs:r})})}function Xr(r={}){let{breadcrumbs:e=[]}=r;return t=>(t.defineActions(F),t.dispatch((0,h.withAll)(Gr($r(e)),(0,h.withRootExtension)("piral-breadcrumbs",j))),(a,c)=>{let i=c.name,m=0;return{registerBreadcrumbs(n){let s={};for(let p of n){let u=p,{name:o=m++}=u,l=y(u,["name"]),f=(0,h.buildName)(i,o);s[f]=l}return t.registerBreadcrumbs(s),()=>t.unregisterBreadcrumbs(Object.keys(s))},registerBreadcrumb(n,s){typeof n!="string"&&(s=n,n=m++);let u=(0,h.buildName)(i,n);return t.registerBreadcrumbs({[u]:{pilet:i,matcher:ur(s),settings:s}}),()=>t.unregisterBreadcrumbs([u])},unregisterBreadcrumb(n){let s=(0,h.buildName)(i,n);t.unregisterBreadcrumbs([s])}}})}})();

package/src/Breadcrumbs.test.tsx

@@ -3,6 +3,7 @@ import create from 'zustand';
 import { render } 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';
@@ -16,9 +17,7 @@ jest.mock('react-router', () => ({
       pathname: '/example',
     };
   },
-  useRouteMatch() {
-    return {};
-  },
+  useRouteMatch: jest.fn(() => ({})),
 }));
 
 function createMockContainer(breadcrumbs = {}) {
@@ -50,18 +49,18 @@ function createMockContainer(breadcrumbs = {}) {
 }
 
 describe('Piral-Breadcrumb Container component', () => {
-  it('uses container for a breadcrumbs', () => {
+  it('breadcrumbs empty', () => {
     const { context } = createMockContainer();
     const node = render(
       <StateContext.Provider value={context}>
         <Breadcrumbs />
       </StateContext.Provider>,
     );
-    expect(node.getAllByRole("container").length).toBe(1);
-    expect(node.queryByRole("dialog")).toBe(null);
+    expect(node.getAllByRole('container').length).toBe(1);
+    expect(node.queryByRole('dialog')).toBe(null);
   });
 
-  it('uses container and item for each breadcrumb', () => {
+  it('breadcrumbs are created successfully', () => {
     const { context } = createMockContainer({
       home: {
         matcher: /^\/$/,
@@ -92,7 +91,134 @@ describe('Piral-Breadcrumb Container component', () => {
         <Breadcrumbs />
       </StateContext.Provider>,
     );
-    expect(node.getAllByRole("container").length).toBe(1);
-    expect(node.getAllByRole("dialog").length).toBe(2);
+    expect(node.getAllByRole('container').length).toBe(1);
+    expect(node.getAllByRole('dialog').length).toBe(2);
+  });
+
+  it('dynamic title function replaces wildcard with route param', () => {
+    (useRouteMatch as any).mockReturnValueOnce({ params: { example: '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">/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$/,
+        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">/</div>');
+  });
+
+  it('dynamic title function with static title', () => {
+    (useRouteMatch as any).mockReturnValueOnce({ params: { imNotHere: 'replacedWildcard' } });
+
+    const { context } = createMockContainer({
+      example: {
+        matcher: /^\/example$/,
+        settings: {
+          path: '/example',
+          title: ({ path }) => {
+            return 'My 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">My Path</div>');
+  });
+
+  it('static title', () => {
+    (useRouteMatch as any).mockReturnValueOnce({ params: {} });
+
+    const { context } = createMockContainer({
+      example: {
+        matcher: /^\/example$/,
+        settings: {
+          path: '/:example*',
+          title: 'My Path',
+          parent: '/',
+        },
+      },
+    });
+    const node = render(
+      <StateContext.Provider value={context}>
+        <Breadcrumbs />
+      </StateContext.Provider>,
+    );
+
+    expect(node.getAllByRole('container').length).toBe(1);
+    expect(node.getAllByRole('container')[0].innerHTML).toBe('<div role="dialog">My Path</div>');
   });
 });

package/src/Breadcrumbs.tsx

@@ -2,6 +2,21 @@ import * as React from 'react';
 import { useLocation, useRouteMatch } from 'react-router';
 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>,
+) {
+  if (typeof title === 'function') {
+    return title({ location, path, params });
+  }
+
+  return title;
+}
 
 export const Breadcrumbs: React.FC = () => {
   const location = useLocation();
@@ -14,11 +29,17 @@ export const Breadcrumbs: React.FC = () => {
     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) => params[id] ?? s);
+    const computedPath = path.replace(/:(([A-Za-z0-9_]+)\*?)/g, (s, _, id) => {
+      if (id in params) {
+        return params[id] || '';
+      }
+
+      return s;
+    });
 
     return (
       <PiralBreadcrumbItem key={key} current={current} path={computedPath} {...props}>
-        {title}
+        {getContent(title, location, computedPath, params)}
       </PiralBreadcrumbItem>
     );
   });

package/src/actions.test.ts

@@ -16,7 +16,7 @@ describe('Breadcrumbs Actions Module', () => {
     registerBreadcrumbs(ctx, {
       foo: 10 as any,
     });
-    expect((state.getState())).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -26,7 +26,7 @@ describe('Breadcrumbs Actions Module', () => {
       },
     });
     unregisterBreadcrumbs(ctx, ['foo']);
-    expect((state.getState())).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,

package/src/create.test.ts

@@ -86,4 +86,21 @@ describe('Create Breadcrumb API Extensions', () => {
     const ids = Object.keys(container.context.registerBreadcrumbs.mock.calls[0][0]);
     expect(container.context.unregisterBreadcrumbs.mock.calls[0][0]).toEqual(ids);
   });
+
+  it('createBreadcrumsApi can use dynamic function as breadcrumb title', () => {
+    const container = createMockContainer();
+    container.context.registerBreadcrumbs = jest.fn();
+    container.context.unregisterBreadcrumbs = jest.fn();
+    const api = createApi(container);
+    const dispose = api.registerBreadcrumb({
+      title: ({ path }) => path,
+      path: '/example',
+    });
+    expect(container.context.registerBreadcrumbs).toHaveBeenCalledTimes(1);
+    expect(container.context.unregisterBreadcrumbs).toHaveBeenCalledTimes(0);
+    dispose();
+    expect(container.context.registerBreadcrumbs).toHaveBeenCalledTimes(1);
+    const ids = Object.keys(container.context.registerBreadcrumbs.mock.calls[0][0]);
+    expect(container.context.unregisterBreadcrumbs.mock.calls[0][0]).toEqual(ids);
+  });
 });

package/src/types.ts

@@ -1,5 +1,6 @@
 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 {}
@@ -12,6 +13,7 @@ declare module 'piral-core/lib/types/custom' {
      * @param values The breadcrumbs to register.
      */
     registerBreadcrumbs(values: Dict<BreadcrumbRegistration>): void;
+
     /**
      * Unregisters an existing breadcrumb.
      * @param name The name of the breadcrumb to be removed.
@@ -58,6 +60,12 @@ export interface BreadcrumbItemProps extends Omit<BreadcrumbSettings, 'title'> {
 
 export interface PiralCustomBreadcrumbSettings {}
 
+export interface BreadcrumbTitleParams {
+  location: Location;
+  path: string;
+  params: Record<string, string>;
+}
+
 export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
   /**
    * Gets the path of breadcrumb for navigation purposes.
@@ -83,7 +91,7 @@ export interface BreadcrumbSettings extends PiralCustomBreadcrumbSettings {
   /**
    * The title of the breadcrumb.
    */
-  title: ReactNode;
+  title: ReactNode | ((params: BreadcrumbTitleParams) => ReactNode);
 }
 
 export interface BreadcrumbRegistration extends BaseRegistration {
@@ -96,12 +104,14 @@ export interface PiletBreadcrumbsApi {
    * Registers a set of breadcrumbs.
    * @param values The different breadcrumb settings.
    */
-  registerBreadcrumbs(values: Array<{ name?: string; } & BreadcrumbSettings>): RegistrationDisposer;
+  registerBreadcrumbs(values: Array<{ name?: string } & BreadcrumbSettings>): RegistrationDisposer;
+
   /**
    * Registers a breadcrumb with the provided settings.
    * @param settings The settings for configuring the breadcrumb.
    */
   registerBreadcrumb(settings: BreadcrumbSettings): RegistrationDisposer;
+
   /**
    * Registers a named breadcrumb with the provided settings.
    * The name has to be unique within the current pilet.
@@ -109,6 +119,7 @@ export interface PiletBreadcrumbsApi {
    * @param settings The settings for configuring the breadcrumb.
    */
   registerBreadcrumb(name: string, settings: BreadcrumbSettings): RegistrationDisposer;
+
   /**
    * Unregisters a breadcrumb known by the given name.
    * Only previously registered tiles can be unregistered.