@availity/mui-breadcrumbs 0.1.9 → 0.2.1

package/CHANGELOG.md

@@ -2,12 +2,28 @@
 
 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)
+
+
+### Features
+
+* add form story ([11d1f6c](https://github.com/Availity/element/commit/11d1f6c6191540bf02ff42d4056ac553eecc8c73))
+
 ## [0.1.9](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.1.8...@availity/mui-breadcrumbs@0.1.9) (2023-11-16)
 
 ### Dependency Updates
 
-* `mui-icon` updated to version `0.7.3`
-* `mui-link` updated to version `0.2.4`
+- `mui-icon` updated to version `0.7.3`
+- `mui-link` updated to version `0.2.4`
+
 ## [0.1.8](https://github.com/Availity/element/compare/@availity/mui-breadcrumbs@0.1.7...@availity/mui-breadcrumbs@0.1.8) (2023-11-08)
 
 ### Dependency Updates

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,6 +29,19 @@ 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, target = "_top" }) => {
+  const props = {
+    "aria-label": name,
+    children: name
+  };
+  return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
+    ...props,
+    href: url,
+    target
+  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
+    ...props
+  });
+};
 var Breadcrumbs = ({
   active,
   children,
@@ -37,18 +50,6 @@ var Breadcrumbs = ({
   homeUrl = "/public/apps/dashboard",
   ...rest
 }) => {
-  const renderBreadCrumb = ({ name = emptyState, url }) => {
-    const props = {
-      "aria-label": name,
-      children: name
-    };
-    return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
-      ...props,
-      href: url
-    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
-      ...props
-    });
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Breadcrumbs, {
     ...rest,
     separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.NavigateNextIcon, {
@@ -63,7 +64,11 @@ var Breadcrumbs = ({
         loadApp: false,
         children: "Home"
       }),
-      crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb)),
+      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, {
+        name,
+        url,
+        target
+      }, name)),
       children,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
         children: active || emptyState

package/dist/index.mjs

@@ -3,6 +3,19 @@ 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, target = "_top" }) => {
+  const props = {
+    "aria-label": name,
+    children: name
+  };
+  return url ? /* @__PURE__ */ jsx(Link, {
+    ...props,
+    href: url,
+    target
+  }) : /* @__PURE__ */ jsx(Typography, {
+    ...props
+  });
+};
 var Breadcrumbs = ({
   active,
   children,
@@ -11,18 +24,6 @@ var Breadcrumbs = ({
   homeUrl = "/public/apps/dashboard",
   ...rest
 }) => {
-  const renderBreadCrumb = ({ name = emptyState, url }) => {
-    const props = {
-      "aria-label": name,
-      children: name
-    };
-    return url ? /* @__PURE__ */ jsx(Link, {
-      ...props,
-      href: url
-    }) : /* @__PURE__ */ jsx(Typography, {
-      ...props
-    });
-  };
   return /* @__PURE__ */ jsxs(MuiBreadcrumbs, {
     ...rest,
     separator: /* @__PURE__ */ jsx(NavigateNextIcon, {
@@ -37,7 +38,11 @@ var Breadcrumbs = ({
         loadApp: false,
         children: "Home"
       }),
-      crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb)),
+      crumbs && crumbs.length > 0 && crumbs.map(({ name = emptyState, url, target }) => /* @__PURE__ */ jsx(Breadcrumb, {
+        name,
+        url,
+        target
+      }, name)),
       children,
       /* @__PURE__ */ jsx(Typography, {
         children: active || emptyState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-breadcrumbs",
-  "version": "0.1.9",
+  "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,6 +30,15 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'
   homeUrl?: string;
 }
 
+const Breadcrumb = ({ name, url, target = '_top' }: Crumb) => {
+  const props = {
+    'aria-label': name,
+    children: name,
+  };
+
+  return url ? <Link {...props} href={url} target={target} /> : <Typography {...props} />;
+};
+
 export const Breadcrumbs = ({
   active,
   children,
@@ -34,15 +47,6 @@ export const Breadcrumbs = ({
   homeUrl = '/public/apps/dashboard',
   ...rest
 }: BreadcrumbsProps): JSX.Element => {
-  const renderBreadCrumb = ({ name = emptyState, url }: Crumb) => {
-    const props = {
-      'aria-label': name,
-      children: name,
-    };
-
-    return url ? <Link {...props} href={url} /> : <Typography {...props} />;
-  };
-
   return (
     <MuiBreadcrumbs
       {...rest}
@@ -53,9 +57,13 @@ export const Breadcrumbs = ({
       <Link aria-label="Home" href={homeUrl} loadApp={false}>
         Home
       </Link>
-      {crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb))}
+      {crumbs &&
+        crumbs.length > 0 &&
+        crumbs.map(({ name = emptyState, url, target }) => (
+          <Breadcrumb name={name} url={url} target={target} key={name} />
+        ))}
       {children}
-      {<Typography>{active || emptyState}</Typography>}
+      <Typography>{active || emptyState}</Typography>
     </MuiBreadcrumbs>
   );
 };