@availity/mui-breadcrumbs 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.2.0...@availity/mui-breadcrumbs@0.2.1) (2024-01-03)
+
+
+### Bug Fixes
+
+* **mui-breadcrumbs:** change how target is passed ([ac9b41c](https://github.com/Availity/element/commit/ac9b41c74a31aeb3a08cae67751d34c6fb98f9df))
+* **mui-breadcrumbs:** set default target on link to _top ([087d5d1](https://github.com/Availity/element/commit/087d5d15a05c59d15fc68284d7b362b14276a4cf))
+
 ## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.1.9...@availity/mui-breadcrumbs@0.2.0) (2023-12-14)
 
 

package/dist/index.d.ts

@@ -5,6 +5,10 @@ interface Crumb {
     name: string;
     /** The url for navigating to the ancestor page. */
     url: string;
+    /** The target on the Link component
+     * @default _top
+     */
+    target?: string;
 }
 interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator' | 'slotProps' | 'slots'> {
     /** The name of the active page (the page the user is currently on). */

package/dist/index.js

@@ -29,14 +29,15 @@ var import_material = require("@mui/material");
 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 }) => {
+var Breadcrumb = ({ name, url, target = "_top" }) => {
   const props = {
     "aria-label": name,
     children: name
   };
   return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
     ...props,
-    href: url
+    href: url,
+    target
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
     ...props
   });
@@ -63,9 +64,10 @@ var Breadcrumbs = ({
         loadApp: false,
         children: "Home"
       }),
-      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, {
+      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, {
         name,
-        url
+        url,
+        target
       }, name)),
       children,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {

package/dist/index.mjs

@@ -3,14 +3,15 @@ import { Breadcrumbs as MuiBreadcrumbs, Typography } from "@mui/material";
 import { NavigateNextIcon, MoreHorizontalIcon } from "@availity/mui-icon";
 import { Link } from "@availity/mui-link";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Breadcrumb = ({ name, url }) => {
+var Breadcrumb = ({ name, url, target = "_top" }) => {
   const props = {
     "aria-label": name,
     children: name
   };
   return url ? /* @__PURE__ */ jsx(Link, {
     ...props,
-    href: url
+    href: url,
+    target
   }) : /* @__PURE__ */ jsx(Typography, {
     ...props
   });
@@ -37,9 +38,10 @@ var Breadcrumbs = ({
         loadApp: false,
         children: "Home"
       }),
-      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url }) => /* @__PURE__ */ jsx(Breadcrumb, {
+      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ jsx(Breadcrumb, {
         name,
-        url
+        url,
+        target
       }, name)),
       children,
       /* @__PURE__ */ jsx(Typography, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-breadcrumbs",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Availity MUI Breadcrumbs Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Breadcrumbs.test.tsx

@@ -104,5 +104,39 @@ describe('Breadcrumbs', () => {
       expect(currentPageBreadcrumb).not.toHaveAttribute('href');
       expect(currentPageBreadcrumb).toHaveTextContent('...');
     });
+
+    test('crumb should have default target of _top', () => {
+      const { getByTestId } = render(
+        <Breadcrumbs
+          data-testid="testBreadcrumbs"
+          crumbs={[
+            { name: 'Grand Parent', url: '/grandparent' },
+            { name: 'Parent', url: '/grandparent/parent' },
+          ]}
+        />
+      );
+
+      const breadcrumbs = getByTestId('testBreadcrumbs').getElementsByClassName('MuiBreadcrumbs-li');
+      const grandparentBreadcrumb = breadcrumbs[1].getElementsByTagName('a')[0];
+
+      expect(grandparentBreadcrumb).toHaveAttribute('target', '_top');
+    });
+
+    test('crumb should set target to what is passed in config', () => {
+      const { getByTestId } = render(
+        <Breadcrumbs
+          data-testid="testBreadcrumbs"
+          crumbs={[
+            { name: 'Grand Parent', url: '/grandparent', target: '_self' },
+            { name: 'Parent', url: '/grandparent/parent' },
+          ]}
+        />
+      );
+
+      const breadcrumbs = getByTestId('testBreadcrumbs').getElementsByClassName('MuiBreadcrumbs-li');
+      const grandparentBreadcrumb = breadcrumbs[1].getElementsByTagName('a')[0];
+
+      expect(grandparentBreadcrumb).toHaveAttribute('target', '_self');
+    });
   });
 });

package/src/lib/Breadcrumbs.tsx

@@ -7,6 +7,10 @@ interface Crumb {
   name: string;
   /** The url for navigating to the ancestor page. */
   url: string;
+  /** The target on the Link component
+   * @default _top
+   */
+  target?: string;
 }
 
 export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator' | 'slotProps' | 'slots'> {
@@ -26,13 +30,13 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'
   homeUrl?: string;
 }
 
-const Breadcrumb = ({ name, url }: Crumb) => {
+const Breadcrumb = ({ name, url, target = '_top' }: Crumb) => {
   const props = {
     'aria-label': name,
     children: name,
   };
 
-  return url ? <Link {...props} href={url} /> : <Typography {...props} />;
+  return url ? <Link {...props} href={url} target={target} /> : <Typography {...props} />;
 };
 
 export const Breadcrumbs = ({
@@ -55,7 +59,9 @@ export const Breadcrumbs = ({
       </Link>
       {crumbs &&
         crumbs.length > 0 &&
-        crumbs.map(({ name = emptyState, url }) => <Breadcrumb name={name} url={url} key={name} />)}
+        crumbs.map(({ name = emptyState, url, target }) => (
+          <Breadcrumb name={name} url={url} target={target} key={name} />
+        ))}
       {children}
       <Typography>{active || emptyState}</Typography>
     </MuiBreadcrumbs>