@availity/mui-page-header 1.1.5 → 2.0.0-alpha.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 +19 -0
- package/dist/index.js +14 -13
- package/dist/index.mjs +11 -10
- package/package.json +18 -18
- package/src/lib/PageHeader.tsx +10 -8
- /package/{introduction.stories.mdx → introduction.mdx} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [2.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.6...@availity/mui-page-header@2.0.0-alpha.0) (2025-02-24)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
* upgraded to @mui/material v6
|
|
11
|
+
* **element:** upgraded to @mui/material v6
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
|
|
16
|
+
* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
|
|
17
|
+
* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
|
|
18
|
+
|
|
19
|
+
## [1.1.6](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.5...@availity/mui-page-header@1.1.6) (2025-02-24)
|
|
20
|
+
|
|
21
|
+
### Dependency Updates
|
|
22
|
+
|
|
23
|
+
* `mui-spaces` updated to version `1.1.5`
|
|
5
24
|
## [1.1.5](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.4...@availity/mui-page-header@1.1.5) (2025-02-20)
|
|
6
25
|
|
|
7
26
|
### Dependency Updates
|
package/dist/index.js
CHANGED
|
@@ -57,11 +57,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
57
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
58
|
|
|
59
59
|
// src/index.ts
|
|
60
|
-
var
|
|
61
|
-
__export(
|
|
60
|
+
var index_exports = {};
|
|
61
|
+
__export(index_exports, {
|
|
62
62
|
PageHeader: () => PageHeader
|
|
63
63
|
});
|
|
64
|
-
module.exports = __toCommonJS(
|
|
64
|
+
module.exports = __toCommonJS(index_exports);
|
|
65
65
|
|
|
66
66
|
// src/lib/PageHeader.tsx
|
|
67
67
|
var import_mui_divider = require("@availity/mui-divider");
|
|
@@ -93,8 +93,7 @@ var Logo = (props) => {
|
|
|
93
93
|
Loader: ({ id }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Skeleton.default, { id, height: "60px", width: "234px" })
|
|
94
94
|
}
|
|
95
95
|
);
|
|
96
|
-
else
|
|
97
|
-
return null;
|
|
96
|
+
else return null;
|
|
98
97
|
};
|
|
99
98
|
var PageHeader = ({
|
|
100
99
|
breadcrumbs,
|
|
@@ -110,12 +109,14 @@ var PageHeader = ({
|
|
|
110
109
|
component: import_mui_layout.Box,
|
|
111
110
|
container: true,
|
|
112
111
|
direction: "column",
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
sx: {
|
|
113
|
+
marginTop: "1rem",
|
|
114
|
+
marginBottom: "1.25rem",
|
|
115
|
+
paddingLeft: 3,
|
|
116
|
+
paddingRight: 3
|
|
117
|
+
},
|
|
117
118
|
children: [
|
|
118
|
-
breadcrumbs || logo || help ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
|
|
119
|
+
breadcrumbs || logo || help ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, children: [
|
|
119
120
|
breadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { marginRight: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_breadcrumbs.Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
|
|
120
121
|
(logo || help) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { children: [
|
|
121
122
|
help && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { variant: "body1", children: [
|
|
@@ -128,14 +129,14 @@ var PageHeader = ({
|
|
|
128
129
|
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)) })
|
|
129
130
|
] })
|
|
130
131
|
] }) : null,
|
|
131
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, marginBottom: 2, alignItems: "center", justifyContent: "space-between", children: [
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
|
|
132
133
|
/* @__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 }) }),
|
|
133
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, width: "auto", children: [
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, sx: { width: "auto" }, children: [
|
|
134
135
|
buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
|
|
135
136
|
var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
|
|
136
137
|
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);
|
|
137
138
|
})),
|
|
138
|
-
feedback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { marginLeft: 2, height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_feedback.Feedback, { appName: headerText }) }) : null
|
|
139
|
+
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
|
|
139
140
|
] })
|
|
140
141
|
] }),
|
|
141
142
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_divider.Divider, {})
|
package/dist/index.mjs
CHANGED
|
@@ -60,8 +60,7 @@ var Logo = (props) => {
|
|
|
60
60
|
Loader: ({ id }) => /* @__PURE__ */ jsx(Skeleton, { id, height: "60px", width: "234px" })
|
|
61
61
|
}
|
|
62
62
|
);
|
|
63
|
-
else
|
|
64
|
-
return null;
|
|
63
|
+
else return null;
|
|
65
64
|
};
|
|
66
65
|
var PageHeader = ({
|
|
67
66
|
breadcrumbs,
|
|
@@ -77,12 +76,14 @@ var PageHeader = ({
|
|
|
77
76
|
component: Box,
|
|
78
77
|
container: true,
|
|
79
78
|
direction: "column",
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
sx: {
|
|
80
|
+
marginTop: "1rem",
|
|
81
|
+
marginBottom: "1.25rem",
|
|
82
|
+
paddingLeft: 3,
|
|
83
|
+
paddingRight: 3
|
|
84
|
+
},
|
|
84
85
|
children: [
|
|
85
|
-
breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, justifyContent: "space-between", marginBottom: 4, children: [
|
|
86
|
+
breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, children: [
|
|
86
87
|
breadcrumbs && /* @__PURE__ */ jsx(Grid, { marginRight: 2, children: /* @__PURE__ */ jsx(Breadcrumbs, __spreadValues({}, breadcrumbs)) }),
|
|
87
88
|
(logo || help) && /* @__PURE__ */ jsxs(Grid, { children: [
|
|
88
89
|
help && /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
|
|
@@ -95,14 +96,14 @@ var PageHeader = ({
|
|
|
95
96
|
logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, __spreadValues({}, logo)) })
|
|
96
97
|
] })
|
|
97
98
|
] }) : null,
|
|
98
|
-
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, marginBottom: 2, alignItems: "center", justifyContent: "space-between", children: [
|
|
99
|
+
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
|
|
99
100
|
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
|
|
100
|
-
/* @__PURE__ */ jsxs(Grid, { container: true, width: "auto", children: [
|
|
101
|
+
/* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, children: [
|
|
101
102
|
buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
|
|
102
103
|
var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
|
|
103
104
|
return /* @__PURE__ */ jsx(Grid, { marginLeft: 2, height: "100%", children: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
|
|
104
105
|
})),
|
|
105
|
-
feedback ? /* @__PURE__ */ jsx(Grid, { marginLeft: 2, height: "100%", children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
|
|
106
|
+
feedback ? /* @__PURE__ */ jsx(Grid, { sx: { marginLeft: 2, height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
|
|
106
107
|
] })
|
|
107
108
|
] }),
|
|
108
109
|
/* @__PURE__ */ jsx(Divider, {})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-page-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.0",
|
|
4
4
|
"description": "Availity MUI PageHeader Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -40,35 +40,35 @@
|
|
|
40
40
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@availity/mui-breadcrumbs": "^0.
|
|
44
|
-
"@availity/mui-button": "^0.
|
|
45
|
-
"@availity/mui-divider": "^0.
|
|
46
|
-
"@availity/mui-layout": "^0.
|
|
47
|
-
"@availity/mui-link": "^0.
|
|
48
|
-
"@availity/mui-typography": "^0.
|
|
49
|
-
"@mui/material": "^
|
|
43
|
+
"@availity/mui-breadcrumbs": "^1.0.0-alpha.0",
|
|
44
|
+
"@availity/mui-button": "^1.0.0-alpha.0",
|
|
45
|
+
"@availity/mui-divider": "^1.0.0-alpha.0",
|
|
46
|
+
"@availity/mui-layout": "^1.0.0-alpha.0",
|
|
47
|
+
"@availity/mui-link": "^1.0.0-alpha.0",
|
|
48
|
+
"@availity/mui-typography": "^1.0.0-alpha.0",
|
|
49
|
+
"@mui/material": "^6.4.5",
|
|
50
50
|
"@tanstack/react-query": "^4.36.1",
|
|
51
51
|
"react": "18.2.0",
|
|
52
52
|
"react-dom": "18.2.0",
|
|
53
53
|
"react-image": "^4.1.0",
|
|
54
|
-
"tsup": "^8.
|
|
54
|
+
"tsup": "^8.3.6",
|
|
55
55
|
"typescript": "^5.4.5"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@availity/mui-breadcrumbs": "^0.
|
|
59
|
-
"@availity/mui-button": "^0.
|
|
60
|
-
"@availity/mui-divider": "^0.
|
|
61
|
-
"@availity/mui-layout": "^0.
|
|
62
|
-
"@availity/mui-link": "^0.
|
|
63
|
-
"@availity/mui-spaces": "^0.
|
|
64
|
-
"@availity/mui-typography": "^0.
|
|
65
|
-
"@mui/material": "^
|
|
58
|
+
"@availity/mui-breadcrumbs": "^1.0.0-alpha.0",
|
|
59
|
+
"@availity/mui-button": "^1.0.0-alpha.0",
|
|
60
|
+
"@availity/mui-divider": "^1.0.0-alpha.0",
|
|
61
|
+
"@availity/mui-layout": "^1.0.0-alpha.0",
|
|
62
|
+
"@availity/mui-link": "^1.0.0-alpha.0",
|
|
63
|
+
"@availity/mui-spaces": "^1.0.0-alpha.0",
|
|
64
|
+
"@availity/mui-typography": "^1.0.0-alpha.0",
|
|
65
|
+
"@mui/material": "^6.4.5",
|
|
66
66
|
"react": ">=16.3.0"
|
|
67
67
|
},
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@availity/mui-feedback": "^0.
|
|
72
|
+
"@availity/mui-feedback": "^1.0.0-alpha.0"
|
|
73
73
|
}
|
|
74
74
|
}
|
package/src/lib/PageHeader.tsx
CHANGED
|
@@ -86,13 +86,15 @@ export const PageHeader = ({
|
|
|
86
86
|
component={Box}
|
|
87
87
|
container
|
|
88
88
|
direction="column"
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
sx={{
|
|
90
|
+
marginTop: '1rem',
|
|
91
|
+
marginBottom: '1.25rem',
|
|
92
|
+
paddingLeft: 3,
|
|
93
|
+
paddingRight: 3,
|
|
94
|
+
}}
|
|
93
95
|
>
|
|
94
96
|
{breadcrumbs || logo || help ? (
|
|
95
|
-
<Grid direction="row" container justifyContent
|
|
97
|
+
<Grid direction="row" container sx={{ justifyContent: 'space-between', marginBottom: 4 }}>
|
|
96
98
|
{breadcrumbs && (
|
|
97
99
|
<Grid marginRight={2}>
|
|
98
100
|
<Breadcrumbs {...breadcrumbs} />
|
|
@@ -119,11 +121,11 @@ export const PageHeader = ({
|
|
|
119
121
|
</Grid>
|
|
120
122
|
) : null}
|
|
121
123
|
|
|
122
|
-
<Grid direction="row" container
|
|
124
|
+
<Grid direction="row" container sx={{ marginBottom: 2, alignItems: 'center', justifyContent: 'space-between' }}>
|
|
123
125
|
<Grid>
|
|
124
126
|
<Typography variant="h1" children={headerText} />
|
|
125
127
|
</Grid>
|
|
126
|
-
<Grid container width
|
|
128
|
+
<Grid container sx={{ width: 'auto' }}>
|
|
127
129
|
{buttons &&
|
|
128
130
|
buttons.length > 0 &&
|
|
129
131
|
buttons?.map(({ key, ...buttonProps }) => (
|
|
@@ -132,7 +134,7 @@ export const PageHeader = ({
|
|
|
132
134
|
</Grid>
|
|
133
135
|
))}
|
|
134
136
|
{feedback ? (
|
|
135
|
-
<Grid
|
|
137
|
+
<Grid sx={{ marginLeft: 2, height: '100%' }}>
|
|
136
138
|
<Feedback appName={headerText} />
|
|
137
139
|
</Grid>
|
|
138
140
|
) : null}
|
|
File without changes
|