@availity/mui-page-header 1.1.37 → 1.2.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.1](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.0...@availity/mui-page-header@1.2.1) (2025-08-21)
+
+### Dependency Updates
+
+* `mui-spaces` updated to version `1.2.0`
+## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.37...@availity/mui-page-header@1.2.0) (2025-08-20)
+
+
+### Features
+
+* **mui-page-header:** add tab variant ([fd6bc4e](https://github.com/Availity/element/commit/fd6bc4ec9b467ef6e885fe27fdee35ac30b87758))
+
+
+### Bug Fixes
+
+* **mui-page-header:** button spacings ([8c36a05](https://github.com/Availity/element/commit/8c36a05d5502f2a9f476d83d9cc994eb36a32b3a))
+
 ## [1.1.37](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.36...@availity/mui-page-header@1.1.37) (2025-07-02)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -40,7 +40,9 @@ interface PageHeaderProps {
     help?: Help;
     /** Logo attributes */
     logo?: LogoSpaceId | LogoPayerId;
+    /** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
+    divider?: JSX.Element;
 }
-declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
+declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, divider }: PageHeaderProps) => JSX.Element;
 
 export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };

package/dist/index.d.ts

@@ -40,7 +40,9 @@ interface PageHeaderProps {
     help?: Help;
     /** Logo attributes */
     logo?: LogoSpaceId | LogoPayerId;
+    /** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
+    divider?: JSX.Element;
 }
-declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
+declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, divider }: PageHeaderProps) => JSX.Element;
 
 export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };

package/dist/index.js

@@ -101,7 +101,8 @@ var PageHeader = ({
   feedback = false,
   headerText,
   logo,
-  help
+  help,
+  divider = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_divider.Divider, {})
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_mui_layout.Grid,
@@ -129,17 +130,17 @@ var PageHeader = ({
             logo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Logo, __spreadValues({}, logo)) })
           ] })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, spacing: 2, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, { variant: "h1", children: headerText }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, sx: { width: "auto" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
             buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
               var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { marginLeft: 2, height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
             })),
-            feedback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { marginLeft: 2, height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_feedback.Feedback, { appName: headerText }) }) : null
+            feedback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_feedback.Feedback, { appName: headerText }) }) : null
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_divider.Divider, {})
+        divider
       ]
     }
   );

package/dist/index.mjs

@@ -68,7 +68,8 @@ var PageHeader = ({
   feedback = false,
   headerText,
   logo,
-  help
+  help,
+  divider = /* @__PURE__ */ jsx(Divider, {})
 }) => {
   return /* @__PURE__ */ jsxs(
     Grid,
@@ -96,17 +97,17 @@ var PageHeader = ({
             logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, __spreadValues({}, logo)) })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, spacing: 2, children: [
           /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
-          /* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, children: [
+          /* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
             buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
               var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
-              return /* @__PURE__ */ jsx(Grid, { marginLeft: 2, height: "100%", children: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
+              return /* @__PURE__ */ jsx(Grid, { height: "100%", children: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
             })),
-            feedback ? /* @__PURE__ */ jsx(Grid, { sx: { marginLeft: 2, height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
+            feedback ? /* @__PURE__ */ jsx(Grid, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Divider, {})
+        divider
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-page-header",
-  "version": "1.1.37",
+  "version": "1.2.1",
   "description": "Availity MUI PageHeader Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -45,6 +45,7 @@
     "@availity/mui-divider": "^1.0.2",
     "@availity/mui-layout": "^1.0.2",
     "@availity/mui-link": "^1.1.1",
+    "@availity/mui-tabs": "^1.2.2",
     "@availity/mui-typography": "^1.0.2",
     "@mui/material": "^6.4.5",
     "@tanstack/react-query": "^4.36.1",
@@ -60,7 +61,7 @@
     "@availity/mui-divider": "^1.0.2",
     "@availity/mui-layout": "^1.0.2",
     "@availity/mui-link": "^1.1.1",
-    "@availity/mui-spaces": "^1.0.29",
+    "@availity/mui-spaces": "^1.0.30",
     "@availity/mui-typography": "^1.0.2",
     "@mui/material": "^6.4.5",
     "react": ">=16.3.0"

package/src/lib/PageHeader.stories.tsx

@@ -1,8 +1,10 @@
 // Each exported component in the package should have its own stories file
 
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces } from '@availity/mui-spaces';
+import { Tab, TabContext, TabList, TabPanel } from '@availity/mui-tabs';
 import { PageHeader, PageHeaderProps } from './PageHeader';
 
 const meta: Meta<typeof PageHeader> = {
@@ -61,6 +63,38 @@ export const _PageHeaderDoubleButtons: StoryObj<typeof PageHeader> = {
   },
 };
 
+/** Divider can be replaced with primary style `<TabList>` */
+export const _PageHeaderTabs: StoryObj<typeof PageHeader> = {
+  render: (args: PageHeaderProps) => {
+    const [value, setValue] = useState('1');
+
+    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+      setValue(newValue);
+    };
+    return (
+      <TabContext value={value}>
+        <PageHeader
+          divider={
+            <TabList {...args} onChange={handleChange} aria-label="pageheader tabs example">
+              <Tab label="Tab One" value="1" />
+              <Tab label="Tab Two" value="2" />
+              <Tab label="Tab Three" value="3" />
+            </TabList>
+          }
+          {...args}
+        />
+        <TabPanel value="1" children={`Hello from Panel ${value}`} />
+        <TabPanel value="2" children={`Hello from Panel ${value}`} />
+        <TabPanel value="3" children={`Hello from Panel ${value}`} />
+      </TabContext>
+    );
+  },
+  args: {
+    headerText: 'This text is a child of PageHeader',
+    breadcrumbs: { active: 'This Page' },
+  },
+};
+
 const queryClient = new QueryClient();
 
 export const _PageHeaderLogo: StoryObj<typeof PageHeader> = {

package/src/lib/PageHeader.test.tsx

@@ -1,6 +1,7 @@
 import { render, waitForElementToBeRemoved } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces } from '@availity/mui-spaces';
+import { Tab, TabContext, TabList } from '@availity/mui-tabs';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '@availity/mock/src/lib/server';
 import { PageHeader } from './PageHeader';
@@ -56,6 +57,21 @@ describe('PageHeader', () => {
     expect(getByText('Button 1')).toBeTruthy();
   });
 
+  test('should render page header with a replaced divider successfully', () => {
+    const { getByText } = render(
+      <TabContext value={1}>
+        <PageHeader
+          breadcrumbs={{ active: 'This page' }}
+          headerText="This is the header"
+          divider={<TabList><Tab value={1} label="Tab One"/></TabList>}
+        />
+      </TabContext>
+    );
+    expect(getByText('This is the header')).toBeTruthy();
+    expect(getByText('This page')).toBeTruthy();
+    expect(getByText('Tab One')).toBeTruthy();
+  });
+
   test('should render page header with a logo successfully', async () => {
     const queryClient = new QueryClient();
     const { getByText, container } = render(

package/src/lib/PageHeader.tsx

@@ -51,6 +51,8 @@ export interface PageHeaderProps {
   help?: Help;
   /** Logo attributes */
   logo?: LogoSpaceId | LogoPayerId;
+  /** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
+  divider?: JSX.Element;
 }
 
 const Logo = (props: LogoSpaceId | LogoPayerId) => {
@@ -80,6 +82,7 @@ export const PageHeader = ({
   headerText,
   logo,
   help,
+  divider = <Divider />
 }: PageHeaderProps): JSX.Element => {
   return (
     <Grid
@@ -125,26 +128,26 @@ export const PageHeader = ({
         </Grid>
       ) : null}
 
-      <Grid direction="row" container sx={{ marginBottom: 2, alignItems: 'center', justifyContent: 'space-between' }}>
+      <Grid direction="row" container sx={{ marginBottom: 2, alignItems: 'center', justifyContent: 'space-between' }} spacing={2}>
         <Grid>
           <Typography variant="h1" children={headerText} />
         </Grid>
-        <Grid container sx={{ width: 'auto' }}>
+        <Grid container sx={{ width: 'auto' }} spacing={2}>
           {buttons &&
             buttons.length > 0 &&
             buttons?.map(({ key, ...buttonProps }) => (
-              <Grid key={key} marginLeft={2} height="100%">
+              <Grid key={key} height="100%">
                 <Button {...buttonProps} size="large" color="secondary" />
               </Grid>
             ))}
           {feedback ? (
-            <Grid sx={{ marginLeft: 2, height: '100%' }}>
+            <Grid sx={{ height: '100%' }}>
               <Feedback appName={headerText} />
             </Grid>
           ) : null}
         </Grid>
       </Grid>
-      <Divider />
+      { divider }
     </Grid>
   );
 };