@availity/mui-page-header 2.0.7 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/index.js +58 -129
- package/package.json +30 -30
- package/project.json +5 -6
- package/src/lib/PageHeader.test.tsx +4 -4
- package/src/lib/PageHeader.tsx +3 -5
- package/dist/index.d.mts +0 -48
- package/dist/index.mjs +0 -117
- package/jest.config.js +0 -20
- package/tsconfig.spec.json +0 -10
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [3.0.0](https://github.com/Availity/element/compare/@availity/mui-page-header@2.0.7...@availity/mui-page-header@3.0.0) (2026-06-16)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-breadcrumbs` updated to version `2.0.7`
|
|
10
|
+
* `mui-button` updated to version `2.0.7`
|
|
11
|
+
* `mui-divider` updated to version `2.0.7`
|
|
12
|
+
* `mui-layout` updated to version `2.0.7`
|
|
13
|
+
* `mui-link` updated to version `2.0.7`
|
|
14
|
+
* `mui-spaces` updated to version `2.0.7`
|
|
15
|
+
* `mui-typography` updated to version `2.0.7`
|
|
16
|
+
* `mui-tabs` updated to version `2.0.7`
|
|
17
|
+
* `mui-feedback` updated to version `2.0.7`
|
|
18
|
+
* `@availity/mock` updated to version `2.0.7`
|
|
19
|
+
|
|
20
|
+
### ⚠ BREAKING CHANGES
|
|
21
|
+
|
|
22
|
+
* CJS builds removed, packages are ESM-only.
|
|
23
|
+
|
|
24
|
+
- Convert all packages to ESM (type: module)
|
|
25
|
+
- Replace Jest with Vitest for all test targets
|
|
26
|
+
- Migrate ESLint to v9 flat config (eslint.config.js)
|
|
27
|
+
- Build output ESM-only (removed CJS dist/index.js require path)
|
|
28
|
+
- Upgrade @tanstack/react-query from v4 to v5
|
|
29
|
+
- Upgrade @availity/api-axios to v13
|
|
30
|
+
- Drop Node 20 support (engines: ^22.0.0 || ^24.0.0)
|
|
31
|
+
- Bump React to 19.2.7, MUI to 7.3.11, TypeScript to 5.9.3
|
|
32
|
+
- Simplify CI caching with built-in yarn cache action + Nx cache
|
|
33
|
+
- Modernize nx.json configuration
|
|
34
|
+
- Update husky hooks to use yarn directly
|
|
35
|
+
- Replace lint-staged nx affected with direct eslint
|
|
36
|
+
|
|
37
|
+
### Features
|
|
38
|
+
|
|
39
|
+
* migrate to ESM, Vitest, and ESLint 9 flat config ([cc22bb4](https://github.com/Availity/element/commit/cc22bb4a230bc1f3b190f187c4e61249d015b25b))
|
|
40
|
+
|
|
5
41
|
## [2.0.7](https://github.com/Availity/element/compare/@availity/mui-page-header@2.0.6...@availity/mui-page-header@2.0.7) (2026-06-03)
|
|
6
42
|
|
|
7
43
|
### Dependency Updates
|
package/dist/index.js
CHANGED
|
@@ -1,99 +1,34 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
-
var __objRest = (source, exclude) => {
|
|
26
|
-
var target = {};
|
|
27
|
-
for (var prop in source)
|
|
28
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
if (source != null && __getOwnPropSymbols)
|
|
31
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
}
|
|
35
|
-
return target;
|
|
36
|
-
};
|
|
37
|
-
var __export = (target, all) => {
|
|
38
|
-
for (var name in all)
|
|
39
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
-
};
|
|
41
|
-
var __copyProps = (to, from, except, desc) => {
|
|
42
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
-
for (let key of __getOwnPropNames(from))
|
|
44
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
-
}
|
|
47
|
-
return to;
|
|
48
|
-
};
|
|
49
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
-
mod
|
|
56
|
-
));
|
|
57
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
-
|
|
59
|
-
// src/index.ts
|
|
60
|
-
var index_exports = {};
|
|
61
|
-
__export(index_exports, {
|
|
62
|
-
PageHeader: () => PageHeader
|
|
63
|
-
});
|
|
64
|
-
module.exports = __toCommonJS(index_exports);
|
|
65
|
-
|
|
66
1
|
// src/lib/PageHeader.tsx
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
2
|
+
import { Divider } from "@availity/mui-divider";
|
|
3
|
+
import { Typography } from "@availity/mui-typography";
|
|
4
|
+
import { Breadcrumbs } from "@availity/mui-breadcrumbs";
|
|
5
|
+
import { Link } from "@availity/mui-link";
|
|
6
|
+
import { Button } from "@availity/mui-button";
|
|
7
|
+
import { Feedback } from "@availity/mui-feedback";
|
|
8
|
+
import { Box, Grid } from "@availity/mui-layout";
|
|
9
|
+
import { SpacesImage } from "@availity/mui-spaces";
|
|
10
|
+
import Skeleton from "@mui/material/Skeleton";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
77
12
|
var Logo = (props) => {
|
|
78
13
|
if (props.spaceId)
|
|
79
|
-
return /* @__PURE__ */
|
|
80
|
-
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
SpacesImage,
|
|
81
16
|
{
|
|
82
17
|
imageType: "images.logo",
|
|
83
18
|
spaceId: props.spaceId,
|
|
84
|
-
Loader: ({ id }) => /* @__PURE__ */
|
|
19
|
+
Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
|
|
85
20
|
}
|
|
86
21
|
);
|
|
87
|
-
|
|
88
|
-
return /* @__PURE__ */
|
|
89
|
-
|
|
22
|
+
if (props.payerId)
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
SpacesImage,
|
|
90
25
|
{
|
|
91
26
|
imageType: "images.logo",
|
|
92
27
|
payerId: props.payerId,
|
|
93
|
-
Loader: ({ id }) => /* @__PURE__ */
|
|
28
|
+
Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
|
|
94
29
|
}
|
|
95
30
|
);
|
|
96
|
-
|
|
31
|
+
return null;
|
|
97
32
|
};
|
|
98
33
|
var PageHeader = ({
|
|
99
34
|
breadcrumbs,
|
|
@@ -102,50 +37,44 @@ var PageHeader = ({
|
|
|
102
37
|
headerText,
|
|
103
38
|
logo,
|
|
104
39
|
help,
|
|
105
|
-
divider = /* @__PURE__ */
|
|
106
|
-
}) =>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
children: [
|
|
120
|
-
breadcrumbs
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
help
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
/* @__PURE__ */ (
|
|
134
|
-
|
|
135
|
-
/* @__PURE__ */ (
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
]
|
|
145
|
-
}
|
|
146
|
-
);
|
|
147
|
-
};
|
|
148
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
149
|
-
0 && (module.exports = {
|
|
40
|
+
divider = /* @__PURE__ */ jsx(Divider, {})
|
|
41
|
+
}) => /* @__PURE__ */ jsxs(
|
|
42
|
+
Grid,
|
|
43
|
+
{
|
|
44
|
+
component: Box,
|
|
45
|
+
container: true,
|
|
46
|
+
direction: "column",
|
|
47
|
+
sx: {
|
|
48
|
+
marginTop: "1rem",
|
|
49
|
+
marginBottom: "1.25rem",
|
|
50
|
+
paddingLeft: 3,
|
|
51
|
+
paddingRight: 3
|
|
52
|
+
},
|
|
53
|
+
children: [
|
|
54
|
+
breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, spacing: 2, children: [
|
|
55
|
+
breadcrumbs ? /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Breadcrumbs, { ...breadcrumbs }) }) : /* @__PURE__ */ jsx(Grid, { sx: { display: { xs: "none", sm: "block" } } }),
|
|
56
|
+
(logo || help) && /* @__PURE__ */ jsxs(Grid, { direction: "column", container: true, spacing: 2, children: [
|
|
57
|
+
help && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
|
|
58
|
+
"Need help?",
|
|
59
|
+
" ",
|
|
60
|
+
/* @__PURE__ */ jsx(Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
|
|
61
|
+
" ",
|
|
62
|
+
help.helpAppName ? ` for ${help.helpAppName}` : null
|
|
63
|
+
] }) }),
|
|
64
|
+
logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, { ...logo }) })
|
|
65
|
+
] })
|
|
66
|
+
] }) : null,
|
|
67
|
+
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, spacing: 2, children: [
|
|
68
|
+
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
|
|
69
|
+
/* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
|
|
70
|
+
buttons && buttons.length > 0 && buttons?.map(({ key, ...buttonProps }) => /* @__PURE__ */ jsx(Grid, { height: "100%", children: /* @__PURE__ */ jsx(Button, { ...buttonProps, size: "large", color: "secondary" }) }, key)),
|
|
71
|
+
feedback ? /* @__PURE__ */ jsx(Grid, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
|
|
72
|
+
] })
|
|
73
|
+
] }),
|
|
74
|
+
divider
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
export {
|
|
150
79
|
PageHeader
|
|
151
|
-
}
|
|
80
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-page-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Availity MUI PageHeader Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -21,56 +21,56 @@
|
|
|
21
21
|
"author": "Availity Developers <AVOSS@availity.com>",
|
|
22
22
|
"browser": "./dist/index.js",
|
|
23
23
|
"main": "./dist/index.js",
|
|
24
|
-
"module": "./dist/index.mjs",
|
|
25
24
|
"types": "./dist/index.d.ts",
|
|
26
25
|
"exports": {
|
|
27
|
-
"./package.json": "./package.json",
|
|
28
26
|
".": {
|
|
29
27
|
"types": "./dist/index.d.ts",
|
|
30
|
-
"import": "./dist/index.
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
"import": "./dist/index.js"
|
|
29
|
+
},
|
|
30
|
+
"./package.json": "./package.json"
|
|
33
31
|
},
|
|
34
32
|
"scripts": {
|
|
35
|
-
"build": "tsup src/index.ts --format esm
|
|
36
|
-
"dev": "tsup src/index.ts --format esm
|
|
33
|
+
"build": "tsup src/index.ts --format esm --dts",
|
|
34
|
+
"dev": "tsup src/index.ts --format esm --watch --dts",
|
|
37
35
|
"clean": "rm -rf dist",
|
|
38
36
|
"clean:nm": "rm -rf node_modules",
|
|
39
37
|
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
40
38
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
41
39
|
},
|
|
42
40
|
"devDependencies": {
|
|
43
|
-
"@availity/mui-breadcrumbs": "^
|
|
44
|
-
"@availity/mui-button": "^
|
|
45
|
-
"@availity/mui-divider": "^
|
|
46
|
-
"@availity/mui-layout": "^
|
|
47
|
-
"@availity/mui-link": "^
|
|
48
|
-
"@availity/mui-tabs": "^
|
|
49
|
-
"@availity/mui-typography": "^
|
|
50
|
-
"@mui/material": "^7.3.
|
|
51
|
-
"@tanstack/react-query": "^
|
|
52
|
-
"react": "19.2.
|
|
53
|
-
"react-dom": "19.2.
|
|
41
|
+
"@availity/mui-breadcrumbs": "^3.0.0",
|
|
42
|
+
"@availity/mui-button": "^3.0.0",
|
|
43
|
+
"@availity/mui-divider": "^3.0.0",
|
|
44
|
+
"@availity/mui-layout": "^3.0.0",
|
|
45
|
+
"@availity/mui-link": "^3.0.0",
|
|
46
|
+
"@availity/mui-tabs": "^3.0.0",
|
|
47
|
+
"@availity/mui-typography": "^3.0.0",
|
|
48
|
+
"@mui/material": "^7.3.11",
|
|
49
|
+
"@tanstack/react-query": "^5.101.0",
|
|
50
|
+
"react": "19.2.7",
|
|
51
|
+
"react-dom": "19.2.7",
|
|
54
52
|
"react-image": "^4.1.0",
|
|
55
|
-
"tsup": "^8.
|
|
56
|
-
"typescript": "^5.
|
|
53
|
+
"tsup": "^8.5.1",
|
|
54
|
+
"typescript": "^5.9.3"
|
|
57
55
|
},
|
|
58
56
|
"peerDependencies": {
|
|
59
|
-
"@availity/mui-breadcrumbs": "^
|
|
60
|
-
"@availity/mui-button": "^
|
|
61
|
-
"@availity/mui-divider": "^
|
|
62
|
-
"@availity/mui-layout": "^
|
|
63
|
-
"@availity/mui-link": "^
|
|
64
|
-
"@availity/mui-spaces": "^
|
|
65
|
-
"@availity/mui-typography": "^
|
|
57
|
+
"@availity/mui-breadcrumbs": "^3.0.0",
|
|
58
|
+
"@availity/mui-button": "^3.0.0",
|
|
59
|
+
"@availity/mui-divider": "^3.0.0",
|
|
60
|
+
"@availity/mui-layout": "^3.0.0",
|
|
61
|
+
"@availity/mui-link": "^3.0.0",
|
|
62
|
+
"@availity/mui-spaces": "^3.0.0",
|
|
63
|
+
"@availity/mui-typography": "^3.0.0",
|
|
66
64
|
"@mui/material": "^7.0.0",
|
|
65
|
+
"@tanstack/react-query": "^5.101.0",
|
|
67
66
|
"react": ">=17.0.0"
|
|
68
67
|
},
|
|
69
68
|
"publishConfig": {
|
|
70
69
|
"access": "public"
|
|
71
70
|
},
|
|
72
71
|
"dependencies": {
|
|
73
|
-
"@availity/mui-feedback": "^
|
|
72
|
+
"@availity/mui-feedback": "^3.0.0"
|
|
74
73
|
},
|
|
75
|
-
"sideEffects": false
|
|
74
|
+
"sideEffects": false,
|
|
75
|
+
"type": "module"
|
|
76
76
|
}
|
package/project.json
CHANGED
|
@@ -8,23 +8,20 @@
|
|
|
8
8
|
"lint": {
|
|
9
9
|
"executor": "@nx/eslint:lint",
|
|
10
10
|
"options": {
|
|
11
|
-
"eslintConfig": ".eslintrc.json",
|
|
12
11
|
"silent": false,
|
|
13
12
|
"fix": false,
|
|
14
13
|
"cache": true,
|
|
15
14
|
"cacheLocation": "./node_modules/.cache/page-header/.eslintcache",
|
|
16
15
|
"maxWarnings": -1,
|
|
17
16
|
"quiet": false,
|
|
18
|
-
"noEslintrc": false,
|
|
19
17
|
"hasTypeAwareRules": true,
|
|
20
18
|
"cacheStrategy": "metadata"
|
|
21
19
|
}
|
|
22
20
|
},
|
|
23
21
|
"test": {
|
|
24
|
-
"executor": "
|
|
25
|
-
"outputs": ["{workspaceRoot}/coverage/page-header"],
|
|
22
|
+
"executor": "nx:run-commands",
|
|
26
23
|
"options": {
|
|
27
|
-
"
|
|
24
|
+
"command": "vitest run packages/page-header"
|
|
28
25
|
}
|
|
29
26
|
},
|
|
30
27
|
"version": {
|
|
@@ -34,7 +31,9 @@
|
|
|
34
31
|
"commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
|
|
35
32
|
"tagPrefix": "@availity/{projectName}@",
|
|
36
33
|
"trackDeps": true,
|
|
37
|
-
"skipCommitTypes": [
|
|
34
|
+
"skipCommitTypes": [
|
|
35
|
+
"docs"
|
|
36
|
+
]
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
}
|
|
@@ -6,10 +6,10 @@ import { Tab, TabContext, TabList } from '@availity/mui-tabs';
|
|
|
6
6
|
import { server } from '@availity/mock/src/lib/server';
|
|
7
7
|
import { PageHeader } from './PageHeader';
|
|
8
8
|
|
|
9
|
-
const mockImage =
|
|
9
|
+
const mockImage = vi.fn();
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
...(
|
|
11
|
+
vi.mock('react-image', async (importOriginal) => ({
|
|
12
|
+
...(await importOriginal<typeof import('react-image')>()),
|
|
13
13
|
Img: (props: any) => mockImage(props),
|
|
14
14
|
}));
|
|
15
15
|
|
|
@@ -23,7 +23,7 @@ describe('PageHeader', () => {
|
|
|
23
23
|
// Remove any handlers you may have added
|
|
24
24
|
// in individual tests (runtime handlers).
|
|
25
25
|
server.resetHandlers();
|
|
26
|
-
|
|
26
|
+
vi.restoreAllMocks();
|
|
27
27
|
});
|
|
28
28
|
|
|
29
29
|
// terminate the server
|
package/src/lib/PageHeader.tsx
CHANGED
|
@@ -64,7 +64,7 @@ const Logo = (props: LogoSpaceId | LogoPayerId) => {
|
|
|
64
64
|
Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
|
|
65
65
|
/>
|
|
66
66
|
);
|
|
67
|
-
|
|
67
|
+
if (props.payerId)
|
|
68
68
|
return (
|
|
69
69
|
<SpacesImage
|
|
70
70
|
imageType="images.logo"
|
|
@@ -72,7 +72,7 @@ const Logo = (props: LogoSpaceId | LogoPayerId) => {
|
|
|
72
72
|
Loader={({ id }) => <Skeleton id={id} height="60px" width="234px" />}
|
|
73
73
|
/>
|
|
74
74
|
);
|
|
75
|
-
|
|
75
|
+
return null;
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
export const PageHeader = ({
|
|
@@ -83,8 +83,7 @@ export const PageHeader = ({
|
|
|
83
83
|
logo,
|
|
84
84
|
help,
|
|
85
85
|
divider = <Divider />
|
|
86
|
-
}: PageHeaderProps): React.JSX.Element =>
|
|
87
|
-
return (
|
|
86
|
+
}: PageHeaderProps): React.JSX.Element => (
|
|
88
87
|
<Grid
|
|
89
88
|
component={Box}
|
|
90
89
|
container
|
|
@@ -150,4 +149,3 @@ export const PageHeader = ({
|
|
|
150
149
|
{ divider }
|
|
151
150
|
</Grid>
|
|
152
151
|
);
|
|
153
|
-
};
|
package/dist/index.d.mts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { BreadcrumbsProps } from '@availity/mui-breadcrumbs';
|
|
2
|
-
import { ButtonProps } from '@availity/mui-button';
|
|
3
|
-
|
|
4
|
-
interface ButtonsProps extends Omit<ButtonProps, 'size' | 'height' | 'color'> {
|
|
5
|
-
key: string;
|
|
6
|
-
}
|
|
7
|
-
type Help = {
|
|
8
|
-
/** The URL to the Help Demo */
|
|
9
|
-
url: string;
|
|
10
|
-
/** The name that displays in the help text. Should be used when the help is a demo video.
|
|
11
|
-
* @example "This App"
|
|
12
|
-
* @returns Need Help? Watch a demo for This App
|
|
13
|
-
*/
|
|
14
|
-
helpAppName?: string;
|
|
15
|
-
};
|
|
16
|
-
type LogoSpaceId = {
|
|
17
|
-
/** The spaceId associated with the app. Required if payerId is not present. */
|
|
18
|
-
spaceId: string;
|
|
19
|
-
/** The payerId associated with the app. Required if spaceId is not present. */
|
|
20
|
-
payerId?: string;
|
|
21
|
-
};
|
|
22
|
-
type LogoPayerId = {
|
|
23
|
-
/** The spaceId associated with the app. Required if payerId is not present. */
|
|
24
|
-
spaceId?: string;
|
|
25
|
-
/** The payerId associated with the app. Required if spaceId is not present. */
|
|
26
|
-
payerId: string;
|
|
27
|
-
};
|
|
28
|
-
interface PageHeaderProps {
|
|
29
|
-
/** Render breadcrumbs above the header */
|
|
30
|
-
breadcrumbs?: BreadcrumbsProps;
|
|
31
|
-
/** Renders buttons in the right side of the header */
|
|
32
|
-
buttons?: ButtonsProps[];
|
|
33
|
-
/** If true, the Feedback button displays
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
feedback?: boolean;
|
|
37
|
-
/** The text that displays in the header */
|
|
38
|
-
headerText: string;
|
|
39
|
-
/** Help attributes */
|
|
40
|
-
help?: Help;
|
|
41
|
-
/** Logo attributes */
|
|
42
|
-
logo?: LogoSpaceId | LogoPayerId;
|
|
43
|
-
/** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
|
|
44
|
-
divider?: React.JSX.Element;
|
|
45
|
-
}
|
|
46
|
-
declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, divider }: PageHeaderProps) => React.JSX.Element;
|
|
47
|
-
|
|
48
|
-
export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };
|
package/dist/index.mjs
DELETED
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// src/lib/PageHeader.tsx
|
|
34
|
-
import { Divider } from "@availity/mui-divider";
|
|
35
|
-
import { Typography } from "@availity/mui-typography";
|
|
36
|
-
import { Breadcrumbs } from "@availity/mui-breadcrumbs";
|
|
37
|
-
import { Link } from "@availity/mui-link";
|
|
38
|
-
import { Button } from "@availity/mui-button";
|
|
39
|
-
import { Feedback } from "@availity/mui-feedback";
|
|
40
|
-
import { Box, Grid } from "@availity/mui-layout";
|
|
41
|
-
import { SpacesImage } from "@availity/mui-spaces";
|
|
42
|
-
import Skeleton from "@mui/material/Skeleton";
|
|
43
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
44
|
-
var Logo = (props) => {
|
|
45
|
-
if (props.spaceId)
|
|
46
|
-
return /* @__PURE__ */ jsx(
|
|
47
|
-
SpacesImage,
|
|
48
|
-
{
|
|
49
|
-
imageType: "images.logo",
|
|
50
|
-
spaceId: props.spaceId,
|
|
51
|
-
Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
|
|
52
|
-
}
|
|
53
|
-
);
|
|
54
|
-
else if (props.payerId)
|
|
55
|
-
return /* @__PURE__ */ jsx(
|
|
56
|
-
SpacesImage,
|
|
57
|
-
{
|
|
58
|
-
imageType: "images.logo",
|
|
59
|
-
payerId: props.payerId,
|
|
60
|
-
Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
else return null;
|
|
64
|
-
};
|
|
65
|
-
var PageHeader = ({
|
|
66
|
-
breadcrumbs,
|
|
67
|
-
buttons,
|
|
68
|
-
feedback = false,
|
|
69
|
-
headerText,
|
|
70
|
-
logo,
|
|
71
|
-
help,
|
|
72
|
-
divider = /* @__PURE__ */ jsx(Divider, {})
|
|
73
|
-
}) => {
|
|
74
|
-
return /* @__PURE__ */ jsxs(
|
|
75
|
-
Grid,
|
|
76
|
-
{
|
|
77
|
-
component: Box,
|
|
78
|
-
container: true,
|
|
79
|
-
direction: "column",
|
|
80
|
-
sx: {
|
|
81
|
-
marginTop: "1rem",
|
|
82
|
-
marginBottom: "1.25rem",
|
|
83
|
-
paddingLeft: 3,
|
|
84
|
-
paddingRight: 3
|
|
85
|
-
},
|
|
86
|
-
children: [
|
|
87
|
-
breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, spacing: 2, children: [
|
|
88
|
-
breadcrumbs ? /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Breadcrumbs, __spreadValues({}, breadcrumbs)) }) : /* @__PURE__ */ jsx(Grid, { sx: { display: { xs: "none", sm: "block" } } }),
|
|
89
|
-
(logo || help) && /* @__PURE__ */ jsxs(Grid, { direction: "column", container: true, spacing: 2, children: [
|
|
90
|
-
help && /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
|
|
91
|
-
"Need help?",
|
|
92
|
-
" ",
|
|
93
|
-
/* @__PURE__ */ jsx(Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
|
|
94
|
-
" ",
|
|
95
|
-
help.helpAppName ? ` for ${help.helpAppName}` : null
|
|
96
|
-
] }) }),
|
|
97
|
-
logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, __spreadValues({}, logo)) })
|
|
98
|
-
] })
|
|
99
|
-
] }) : null,
|
|
100
|
-
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, spacing: 2, children: [
|
|
101
|
-
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
|
|
102
|
-
/* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
|
|
103
|
-
buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
|
|
104
|
-
var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
|
|
105
|
-
return /* @__PURE__ */ jsx(Grid, { height: "100%", children: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
|
|
106
|
-
})),
|
|
107
|
-
feedback ? /* @__PURE__ */ jsx(Grid, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
|
|
108
|
-
] })
|
|
109
|
-
] }),
|
|
110
|
-
divider
|
|
111
|
-
]
|
|
112
|
-
}
|
|
113
|
-
);
|
|
114
|
-
};
|
|
115
|
-
export {
|
|
116
|
-
PageHeader
|
|
117
|
-
};
|
package/jest.config.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
const global = require('../../jest.config.global');
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
...global,
|
|
5
|
-
displayName: 'page-header',
|
|
6
|
-
coverageDirectory: '../../coverage/page-header',
|
|
7
|
-
/* TODO: Update to latest Jest snapshotFormat
|
|
8
|
-
* By default Nx has kept the older style of Jest Snapshot formats
|
|
9
|
-
* to prevent breaking of any existing tests with snapshots.
|
|
10
|
-
* It's recommend you update to the latest format.
|
|
11
|
-
* You can do this by removing snapshotFormat property
|
|
12
|
-
* and running tests with --update-snapshot flag.
|
|
13
|
-
* Example: From within the project directory, run "nx test --update-snapshot"
|
|
14
|
-
* More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
|
|
15
|
-
*/
|
|
16
|
-
snapshotFormat: { escapeString: true, printBasicPrototype: true },
|
|
17
|
-
transformIgnorePatterns: [
|
|
18
|
-
`/node_modules/(?!@availity/hooks)`
|
|
19
|
-
]
|
|
20
|
-
};
|
package/tsconfig.spec.json
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "./tsconfig.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"outDir": "../../dist/out-tsc",
|
|
5
|
-
"module": "commonjs",
|
|
6
|
-
"types": ["jest", "node", "@testing-library/jest-dom"],
|
|
7
|
-
"allowJs": true
|
|
8
|
-
},
|
|
9
|
-
"include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
|
|
10
|
-
}
|