techsbcn-storybook 2.1.0 → 2.2.0

package/dist/components/navigation/AppBreadcrumbs/AppBreadcrumbs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AppBreadcrumbsProps {
+    separator?: React.ReactNode;
+    maxItems?: number;
+}
+export declare const AppBreadcrumbs: React.FC<AppBreadcrumbsProps>;
+export {};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/layouts/MainLayoutSimple/MainLayoutSimple';
 export * from './components/layouts/SplitLayout/SplitLayout';
 export * from './components/navigation/VerticalNav/VerticalNav';
 export * from './components/navigation/components/UserInfo';
+export * from './components/navigation/AppBreadcrumbs/AppBreadcrumbs';
 export * from './components/layouts/Standard/AppSidebar/AppSidebar';
 export * from './components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar';
 export * from './components/layouts/Standard/AppHeader/AppHeader';

package/dist/index.js

@@ -1815,6 +1815,22 @@ var UserInfo = (props) => {
     props.displayName.charAt(0).toUpperCase()
   ), /* @__PURE__ */ React8__default.default.createElement(material.Box, { sx: { ml: 1, width: "100%", display: "flex", alignItems: "center", alignContent: "flex-end" } }, /* @__PURE__ */ React8__default.default.createElement(material.Box, { className: "user-name" }, props.displayName), props.menuActions && props.menuActions.length > 0 && /* @__PURE__ */ React8__default.default.createElement(material.Box, { sx: { ml: "auto", display: "flex" }, className: "cursor-pointer" }, /* @__PURE__ */ React8__default.default.createElement(iconsMaterial.ExpandMore, { onClick: handleClick }), /* @__PURE__ */ React8__default.default.createElement(material.Menu, { anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose }, props.menuActions.map((item, i) => /* @__PURE__ */ React8__default.default.createElement(material.MenuItem, { key: i, onClick: item.action }, item.title)))))));
 };
+var AppBreadcrumbs = (props) => {
+  const matches = reactRouter.useMatches();
+  const crumbs = matches.flatMap((match) => {
+    const breadcrumb = match.handle?.breadcrumb;
+    if (!breadcrumb) return [];
+    const result = typeof breadcrumb === "function" ? breadcrumb(match) : breadcrumb;
+    return Array.isArray(result) ? result : [result];
+  });
+  if (!crumbs.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React8__default.default.createElement(material.Breadcrumbs, { "aria-label": "breadcrumb", separator: props.separator, maxItems: props.maxItems }, crumbs.map((crumb, index) => {
+    const isLast = index === crumbs.length - 1;
+    return isLast || !crumb.to ? /* @__PURE__ */ React8__default.default.createElement(material.Typography, { key: index, variant: "body2", sx: { color: isLast ? "text.primary" : "text.secondary" } }, crumb.label) : /* @__PURE__ */ React8__default.default.createElement(material.Link, { key: index, component: reactRouter.Link, to: crumb.to, underline: "hover", variant: "body2", color: "inherit" }, crumb.label);
+  }));
+};
 
 // src/components/layouts/Standard/AppSidebar/AppSidebar.scss
 var css11 = `.app-sidebar {
@@ -2906,6 +2922,7 @@ var SearchBaseDefaults = {
   orderAsc: true
 };
 
+exports.AppBreadcrumbs = AppBreadcrumbs;
 exports.AppHeader = AppHeader;
 exports.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;