@availity/mui-breadcrumbs 0.2.14 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.3.0...@availity/mui-breadcrumbs@0.3.1) (2025-01-03)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.3.0`
+* `mui-link` updated to version `0.3.0`
+## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.2.14...@availity/mui-breadcrumbs@0.3.0) (2024-12-11)
+
+
+### Features
+
+* **mui-breadcrumbs:** add LinkProps prop to pass props to the links ([ae54fc4](https://github.com/Availity/element/commit/ae54fc41cc0511f22d7abc5e24a62ab19e3e06b6))
+
 ## [0.2.14](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.2.13...@availity/mui-breadcrumbs@0.2.14) (2024-12-09)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material/Breadcrumbs';
+import { LinkProps } from '@availity/mui-link';
 
 interface Crumb {
     /** The name of the ancestor page. */
@@ -9,6 +10,8 @@ interface Crumb {
      * @default _top
      */
     target?: string;
+    /** Props passed to the Links */
+    LinkProps?: Omit<LinkProps, 'href'>;
 }
 interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator' | 'slotProps' | 'slots'> {
     /** The name of the active page (the page the user is currently on). */
@@ -28,7 +31,9 @@ interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator' | 'slotP
     /** A string value that can be used to name an element
      * @default breadcrumbs */
     'aria-label'?: string;
+    /** Props passed to the Links */
+    LinkProps?: Omit<LinkProps, 'href'>;
 }
-declare const Breadcrumbs: ({ active, children, crumbs, emptyState, homeUrl, ...rest }: BreadcrumbsProps) => JSX.Element;
+declare const Breadcrumbs: ({ active, children, crumbs, emptyState, homeUrl, LinkProps, ...rest }: BreadcrumbsProps) => JSX.Element;
 
 export { Breadcrumbs, type BreadcrumbsProps };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material/Breadcrumbs';
+import { LinkProps } from '@availity/mui-link';
 
 interface Crumb {
     /** The name of the ancestor page. */
@@ -9,6 +10,8 @@ interface Crumb {
      * @default _top
      */
     target?: string;
+    /** Props passed to the Links */
+    LinkProps?: Omit<LinkProps, 'href'>;
 }
 interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator' | 'slotProps' | 'slots'> {
     /** The name of the active page (the page the user is currently on). */
@@ -28,7 +31,9 @@ interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator' | 'slotP
     /** A string value that can be used to name an element
      * @default breadcrumbs */
     'aria-label'?: string;
+    /** Props passed to the Links */
+    LinkProps?: Omit<LinkProps, 'href'>;
 }
-declare const Breadcrumbs: ({ active, children, crumbs, emptyState, homeUrl, ...rest }: BreadcrumbsProps) => JSX.Element;
+declare const Breadcrumbs: ({ active, children, crumbs, emptyState, homeUrl, LinkProps, ...rest }: BreadcrumbsProps) => JSX.Element;
 
 export { Breadcrumbs, type BreadcrumbsProps };

package/dist/index.js

@@ -69,12 +69,12 @@ var import_Typography = __toESM(require("@mui/material/Typography"));
 var import_mui_icon = require("@availity/mui-icon");
 var import_mui_link = require("@availity/mui-link");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Breadcrumb = ({ name, url, target = "_top" }) => {
+var Breadcrumb = ({ name, url, target = "_top", LinkProps: LinkProps2 }) => {
   const props = {
     "aria-label": name,
     children: name
   };
-  return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, __spreadProps(__spreadValues({}, props), { href: url, target })) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Typography.default, __spreadValues({}, props));
+  return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, __spreadProps(__spreadValues(__spreadValues({}, props), LinkProps2), { href: url, target })) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Typography.default, __spreadValues({}, props));
 };
 var Breadcrumbs = (_a) => {
   var _b = _a, {
@@ -82,13 +82,15 @@ var Breadcrumbs = (_a) => {
     children,
     crumbs,
     emptyState = "...",
-    homeUrl = "/public/apps/dashboard"
+    homeUrl = "/public/apps/dashboard",
+    LinkProps: LinkProps2
   } = _b, rest = __objRest(_b, [
     "active",
     "children",
     "crumbs",
     "emptyState",
-    "homeUrl"
+    "homeUrl",
+    "LinkProps"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Breadcrumbs.default,
@@ -99,7 +101,7 @@ var Breadcrumbs = (_a) => {
       "aria-label": rest["aria-label"] || "breadcrumbs",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, { "aria-label": "Home", href: homeUrl, loadApp: false, children: "Home" }),
-        crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, { name, url, target }, name)),
+        crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, { name, url, target, LinkProps: LinkProps2 }, name)),
         children,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Typography.default, { children: active || emptyState })
       ]

package/dist/index.mjs

@@ -36,12 +36,12 @@ import Typography from "@mui/material/Typography";
 import { NavigateNextIcon, MoreHorizontalIcon } from "@availity/mui-icon";
 import { Link } from "@availity/mui-link";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Breadcrumb = ({ name, url, target = "_top" }) => {
+var Breadcrumb = ({ name, url, target = "_top", LinkProps: LinkProps2 }) => {
   const props = {
     "aria-label": name,
     children: name
   };
-  return url ? /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, props), { href: url, target })) : /* @__PURE__ */ jsx(Typography, __spreadValues({}, props));
+  return url ? /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues(__spreadValues({}, props), LinkProps2), { href: url, target })) : /* @__PURE__ */ jsx(Typography, __spreadValues({}, props));
 };
 var Breadcrumbs = (_a) => {
   var _b = _a, {
@@ -49,13 +49,15 @@ var Breadcrumbs = (_a) => {
     children,
     crumbs,
     emptyState = "...",
-    homeUrl = "/public/apps/dashboard"
+    homeUrl = "/public/apps/dashboard",
+    LinkProps: LinkProps2
   } = _b, rest = __objRest(_b, [
     "active",
     "children",
     "crumbs",
     "emptyState",
-    "homeUrl"
+    "homeUrl",
+    "LinkProps"
   ]);
   return /* @__PURE__ */ jsxs(
     MuiBreadcrumbs,
@@ -66,7 +68,7 @@ var Breadcrumbs = (_a) => {
       "aria-label": rest["aria-label"] || "breadcrumbs",
       children: [
         /* @__PURE__ */ jsx(Link, { "aria-label": "Home", href: homeUrl, loadApp: false, children: "Home" }),
-        crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ jsx(Breadcrumb, { name, url, target }, name)),
+        crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ jsx(Breadcrumb, { name, url, target, LinkProps: LinkProps2 }, name)),
         children,
         /* @__PURE__ */ jsx(Typography, { children: active || emptyState })
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-breadcrumbs",
-  "version": "0.2.14",
+  "version": "0.3.1",
   "description": "Availity MUI Breadcrumbs Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -46,7 +46,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.11.1",
-    "@availity/mui-link": "^0.4.5"
+    "@availity/mui-icon": "^0.12.0",
+    "@availity/mui-link": "^0.4.6"
   }
 }

package/src/lib/Breadcrumbs.stories.tsx

@@ -21,6 +21,18 @@ export const _Breadcrumbs: StoryObj<typeof Breadcrumbs> = {
   },
 };
 
+export const _BreadcrumbsLinkProps: StoryObj<typeof Breadcrumbs> = {
+  render: (args: BreadcrumbsProps) => <Breadcrumbs {...args} />,
+  args: {
+    active: 'Current Page',
+    'aria-label': 'test-breadcrumbs',
+    crumbs: [{ name: 'Previous Page', url: '/previous-page' }],
+    LinkProps: {
+      loadApp: false,
+    },
+  },
+};
+
 export const _BreadcrumbsChildren: StoryObj<typeof Breadcrumbs> = {
   render: (args: BreadcrumbsProps) => (
     <Breadcrumbs {...args}>

package/src/lib/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { default as MuiBreadcrumbs, BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material/Breadcrumbs';
 import Typography from '@mui/material/Typography';
 import { NavigateNextIcon, MoreHorizontalIcon } from '@availity/mui-icon';
-import { Link } from '@availity/mui-link';
+import { Link, LinkProps } from '@availity/mui-link';
 
 interface Crumb {
   /** The name of the ancestor page. */
@@ -12,6 +12,8 @@ interface Crumb {
    * @default _top
    */
   target?: string;
+  /** Props passed to the Links */
+  LinkProps?: Omit<LinkProps, 'href'>;
 }
 
 export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator' | 'slotProps' | 'slots'> {
@@ -32,15 +34,17 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'
   /** A string value that can be used to name an element
    * @default breadcrumbs */
   'aria-label'?: string;
+  /** Props passed to the Links */
+  LinkProps?: Omit<LinkProps, 'href'>;
 }
 
-const Breadcrumb = ({ name, url, target = '_top' }: Crumb) => {
+const Breadcrumb = ({ name, url, target = '_top', LinkProps }: Crumb) => {
   const props = {
     'aria-label': name,
     children: name,
   };
 
-  return url ? <Link {...props} href={url} target={target} /> : <Typography {...props} />;
+  return url ? <Link {...props} {...LinkProps} href={url} target={target} /> : <Typography {...props} />;
 };
 
 export const Breadcrumbs = ({
@@ -49,6 +53,7 @@ export const Breadcrumbs = ({
   crumbs,
   emptyState = '...',
   homeUrl = '/public/apps/dashboard',
+  LinkProps,
   ...rest
 }: BreadcrumbsProps): JSX.Element => {
   return (
@@ -65,7 +70,7 @@ export const Breadcrumbs = ({
       {crumbs &&
         crumbs.length > 0 &&
         crumbs.map(({ name = emptyState, url, target }) => (
-          <Breadcrumb name={name} url={url} target={target} key={name} />
+          <Breadcrumb name={name} url={url} target={target} key={name} LinkProps={LinkProps} />
         ))}
       {children}
       <Typography>{active || emptyState}</Typography>