@availity/mui-page-header 2.0.0-alpha.0 → 2.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 +279 -0
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +12 -11
- package/dist/index.mjs +12 -11
- package/introduction.mdx +3 -0
- package/package.json +24 -22
- package/src/lib/PageHeader.stories.tsx +34 -0
- package/src/lib/PageHeader.test.tsx +20 -0
- package/src/lib/PageHeader.tsx +25 -18
- package/tsconfig.spec.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,285 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.6...@availity/mui-page-header@2.0.0) (2025-11-17)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-breadcrumbs` updated to version `1.2.6`
|
|
10
|
+
* `mui-button` updated to version `1.2.6`
|
|
11
|
+
* `mui-divider` updated to version `1.2.6`
|
|
12
|
+
* `mui-layout` updated to version `1.2.6`
|
|
13
|
+
* `mui-link` updated to version `1.2.6`
|
|
14
|
+
* `mui-spaces` updated to version `1.2.6`
|
|
15
|
+
* `mui-typography` updated to version `1.2.6`
|
|
16
|
+
* `mui-tabs` updated to version `1.2.6`
|
|
17
|
+
* `mui-feedback` updated to version `1.2.6`
|
|
18
|
+
|
|
19
|
+
### ⚠ BREAKING CHANGES
|
|
20
|
+
|
|
21
|
+
* @mui/material upgraded to v7
|
|
22
|
+
* @mui/x-* upgraded to v8
|
|
23
|
+
* react upgraded to v19
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* upgrade material and react dependencies ([51602a4](https://github.com/Availity/element/commit/51602a48c5304db6f61e2c7e772c9a3a4aa3f65c))
|
|
28
|
+
|
|
29
|
+
## [1.2.6](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.5...@availity/mui-page-header@1.2.6) (2025-10-30)
|
|
30
|
+
|
|
31
|
+
### Dependency Updates
|
|
32
|
+
|
|
33
|
+
* `mui-breadcrumbs` updated to version `1.2.5`
|
|
34
|
+
* `mui-button` updated to version `1.2.5`
|
|
35
|
+
* `mui-divider` updated to version `1.2.5`
|
|
36
|
+
* `mui-layout` updated to version `1.2.5`
|
|
37
|
+
* `mui-link` updated to version `1.2.5`
|
|
38
|
+
* `mui-spaces` updated to version `1.2.5`
|
|
39
|
+
* `mui-typography` updated to version `1.2.5`
|
|
40
|
+
* `mui-tabs` updated to version `1.2.5`
|
|
41
|
+
* `mui-feedback` updated to version `1.2.5`
|
|
42
|
+
## [1.2.5](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.4...@availity/mui-page-header@1.2.5) (2025-10-09)
|
|
43
|
+
|
|
44
|
+
### Dependency Updates
|
|
45
|
+
|
|
46
|
+
* `mui-spaces` updated to version `1.2.4`
|
|
47
|
+
* `@availity/mock` updated to version `1.2.4`
|
|
48
|
+
## [1.2.4](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.3...@availity/mui-page-header@1.2.4) (2025-09-25)
|
|
49
|
+
|
|
50
|
+
### Dependency Updates
|
|
51
|
+
|
|
52
|
+
* `mui-spaces` updated to version `1.2.3`
|
|
53
|
+
## [1.2.3](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.2...@availity/mui-page-header@1.2.3) (2025-09-22)
|
|
54
|
+
|
|
55
|
+
### Dependency Updates
|
|
56
|
+
|
|
57
|
+
* `mui-spaces` updated to version `1.2.2`
|
|
58
|
+
## [1.2.2](https://github.com/Availity/element/compare/@availity/mui-page-header@1.2.1...@availity/mui-page-header@1.2.2) (2025-08-21)
|
|
59
|
+
|
|
60
|
+
### Dependency Updates
|
|
61
|
+
|
|
62
|
+
* `mui-breadcrumbs` updated to version `1.2.1`
|
|
63
|
+
## [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)
|
|
64
|
+
|
|
65
|
+
### Dependency Updates
|
|
66
|
+
|
|
67
|
+
* `mui-spaces` updated to version `1.2.0`
|
|
68
|
+
## [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)
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
### Features
|
|
72
|
+
|
|
73
|
+
* **mui-page-header:** add tab variant ([fd6bc4e](https://github.com/Availity/element/commit/fd6bc4ec9b467ef6e885fe27fdee35ac30b87758))
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
### Bug Fixes
|
|
77
|
+
|
|
78
|
+
* **mui-page-header:** button spacings ([8c36a05](https://github.com/Availity/element/commit/8c36a05d5502f2a9f476d83d9cc994eb36a32b3a))
|
|
79
|
+
|
|
80
|
+
## [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)
|
|
81
|
+
|
|
82
|
+
### Dependency Updates
|
|
83
|
+
|
|
84
|
+
* `mui-spaces` updated to version `1.1.36`
|
|
85
|
+
## [1.1.36](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.35...@availity/mui-page-header@1.1.36) (2025-07-01)
|
|
86
|
+
|
|
87
|
+
### Dependency Updates
|
|
88
|
+
|
|
89
|
+
* `mui-spaces` updated to version `1.1.35`
|
|
90
|
+
## [1.1.35](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.34...@availity/mui-page-header@1.1.35) (2025-06-25)
|
|
91
|
+
|
|
92
|
+
### Dependency Updates
|
|
93
|
+
|
|
94
|
+
* `mui-spaces` updated to version `1.1.34`
|
|
95
|
+
## [1.1.34](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.33...@availity/mui-page-header@1.1.34) (2025-06-13)
|
|
96
|
+
|
|
97
|
+
### Dependency Updates
|
|
98
|
+
|
|
99
|
+
* `mui-spaces` updated to version `1.1.33`
|
|
100
|
+
## [1.1.33](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.32...@availity/mui-page-header@1.1.33) (2025-06-11)
|
|
101
|
+
|
|
102
|
+
### Dependency Updates
|
|
103
|
+
|
|
104
|
+
* `mui-spaces` updated to version `1.1.32`
|
|
105
|
+
## [1.1.32](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.31...@availity/mui-page-header@1.1.32) (2025-06-11)
|
|
106
|
+
|
|
107
|
+
### Dependency Updates
|
|
108
|
+
|
|
109
|
+
* `mui-spaces` updated to version `1.1.31`
|
|
110
|
+
## [1.1.31](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.30...@availity/mui-page-header@1.1.31) (2025-06-10)
|
|
111
|
+
|
|
112
|
+
### Dependency Updates
|
|
113
|
+
|
|
114
|
+
* `mui-spaces` updated to version `1.1.30`
|
|
115
|
+
## [1.1.30](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.29...@availity/mui-page-header@1.1.30) (2025-05-29)
|
|
116
|
+
|
|
117
|
+
### Dependency Updates
|
|
118
|
+
|
|
119
|
+
* `mui-spaces` updated to version `1.1.29`
|
|
120
|
+
* `mui-feedback` updated to version `1.1.29`
|
|
121
|
+
## [1.1.29](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.28...@availity/mui-page-header@1.1.29) (2025-05-28)
|
|
122
|
+
|
|
123
|
+
### Dependency Updates
|
|
124
|
+
|
|
125
|
+
* `mui-spaces` updated to version `1.1.28`
|
|
126
|
+
## [1.1.28](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.27...@availity/mui-page-header@1.1.28) (2025-05-20)
|
|
127
|
+
|
|
128
|
+
### Dependency Updates
|
|
129
|
+
|
|
130
|
+
* `mui-spaces` updated to version `1.1.27`
|
|
131
|
+
* `@availity/mock` updated to version `1.1.27`
|
|
132
|
+
## [1.1.27](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.26...@availity/mui-page-header@1.1.27) (2025-05-19)
|
|
133
|
+
|
|
134
|
+
### Dependency Updates
|
|
135
|
+
|
|
136
|
+
* `mui-spaces` updated to version `1.1.26`
|
|
137
|
+
## [1.1.26](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.25...@availity/mui-page-header@1.1.26) (2025-05-12)
|
|
138
|
+
|
|
139
|
+
### Dependency Updates
|
|
140
|
+
|
|
141
|
+
* `mui-spaces` updated to version `1.1.25`
|
|
142
|
+
* `mui-feedback` updated to version `1.1.25`
|
|
143
|
+
## [1.1.25](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.24...@availity/mui-page-header@1.1.25) (2025-04-30)
|
|
144
|
+
|
|
145
|
+
### Dependency Updates
|
|
146
|
+
|
|
147
|
+
* `mui-breadcrumbs` updated to version `1.1.24`
|
|
148
|
+
* `mui-button` updated to version `1.1.24`
|
|
149
|
+
* `mui-link` updated to version `1.1.24`
|
|
150
|
+
* `mui-spaces` updated to version `1.1.24`
|
|
151
|
+
* `mui-feedback` updated to version `1.1.24`
|
|
152
|
+
## [1.1.24](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.23...@availity/mui-page-header@1.1.24) (2025-04-29)
|
|
153
|
+
|
|
154
|
+
### Dependency Updates
|
|
155
|
+
|
|
156
|
+
* `mui-breadcrumbs` updated to version `1.1.23`
|
|
157
|
+
* `mui-link` updated to version `1.1.23`
|
|
158
|
+
* `mui-spaces` updated to version `1.1.23`
|
|
159
|
+
## [1.1.23](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.22...@availity/mui-page-header@1.1.23) (2025-04-28)
|
|
160
|
+
|
|
161
|
+
### Dependency Updates
|
|
162
|
+
|
|
163
|
+
* `mui-spaces` updated to version `1.1.22`
|
|
164
|
+
* `mui-feedback` updated to version `1.1.22`
|
|
165
|
+
## [1.1.22](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.21...@availity/mui-page-header@1.1.22) (2025-04-24)
|
|
166
|
+
|
|
167
|
+
### Dependency Updates
|
|
168
|
+
|
|
169
|
+
* `mui-breadcrumbs` updated to version `1.1.21`
|
|
170
|
+
* `mui-link` updated to version `1.1.21`
|
|
171
|
+
* `mui-spaces` updated to version `1.1.21`
|
|
172
|
+
* `mui-feedback` updated to version `1.1.21`
|
|
173
|
+
## [1.1.21](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.20...@availity/mui-page-header@1.1.21) (2025-04-21)
|
|
174
|
+
|
|
175
|
+
### Dependency Updates
|
|
176
|
+
|
|
177
|
+
* `mui-button` updated to version `1.1.20`
|
|
178
|
+
* `mui-spaces` updated to version `1.1.20`
|
|
179
|
+
* `mui-feedback` updated to version `1.1.20`
|
|
180
|
+
## [1.1.20](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.19...@availity/mui-page-header@1.1.20) (2025-04-14)
|
|
181
|
+
|
|
182
|
+
### Dependency Updates
|
|
183
|
+
|
|
184
|
+
* `mui-spaces` updated to version `1.1.19`
|
|
185
|
+
* `mui-feedback` updated to version `1.1.19`
|
|
186
|
+
## [1.1.19](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.18...@availity/mui-page-header@1.1.19) (2025-04-14)
|
|
187
|
+
|
|
188
|
+
### Dependency Updates
|
|
189
|
+
|
|
190
|
+
* `mui-button` updated to version `1.1.18`
|
|
191
|
+
* `mui-spaces` updated to version `1.1.18`
|
|
192
|
+
* `mui-feedback` updated to version `1.1.18`
|
|
193
|
+
## [1.1.18](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.17...@availity/mui-page-header@1.1.18) (2025-04-11)
|
|
194
|
+
|
|
195
|
+
### Dependency Updates
|
|
196
|
+
|
|
197
|
+
* `mui-breadcrumbs` updated to version `1.1.17`
|
|
198
|
+
* `mui-button` updated to version `1.1.17`
|
|
199
|
+
* `mui-divider` updated to version `1.1.17`
|
|
200
|
+
* `mui-layout` updated to version `1.1.17`
|
|
201
|
+
* `mui-link` updated to version `1.1.17`
|
|
202
|
+
* `mui-spaces` updated to version `1.1.17`
|
|
203
|
+
* `mui-typography` updated to version `1.1.17`
|
|
204
|
+
* `mui-feedback` updated to version `1.1.17`
|
|
205
|
+
## [1.1.17](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.16...@availity/mui-page-header@1.1.17) (2025-04-09)
|
|
206
|
+
|
|
207
|
+
### Dependency Updates
|
|
208
|
+
|
|
209
|
+
* `mui-spaces` updated to version `1.1.16`
|
|
210
|
+
* `mui-feedback` updated to version `1.1.16`
|
|
211
|
+
## [1.1.16](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.15...@availity/mui-page-header@1.1.16) (2025-04-08)
|
|
212
|
+
|
|
213
|
+
### Dependency Updates
|
|
214
|
+
|
|
215
|
+
* `mui-button` updated to version `1.1.15`
|
|
216
|
+
* `mui-spaces` updated to version `1.1.15`
|
|
217
|
+
* `mui-feedback` updated to version `1.1.15`
|
|
218
|
+
## [1.1.15](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.14...@availity/mui-page-header@1.1.15) (2025-04-04)
|
|
219
|
+
|
|
220
|
+
### Dependency Updates
|
|
221
|
+
|
|
222
|
+
* `mui-spaces` updated to version `1.1.14`
|
|
223
|
+
* `mui-feedback` updated to version `1.1.14`
|
|
224
|
+
## [1.1.14](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.13...@availity/mui-page-header@1.1.14) (2025-03-27)
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
### Bug Fixes
|
|
228
|
+
|
|
229
|
+
* **mui-page-header:** fix demo link and logo spacings ([57ecad5](https://github.com/Availity/element/commit/57ecad555e7c762a26c3c41fabce5215ae78defd))
|
|
230
|
+
|
|
231
|
+
## [1.1.13](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.12...@availity/mui-page-header@1.1.13) (2025-03-27)
|
|
232
|
+
|
|
233
|
+
### Dependency Updates
|
|
234
|
+
|
|
235
|
+
* `mui-spaces` updated to version `1.1.12`
|
|
236
|
+
* `mui-feedback` updated to version `1.1.12`
|
|
237
|
+
## [1.1.12](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.11...@availity/mui-page-header@1.1.12) (2025-03-21)
|
|
238
|
+
|
|
239
|
+
### Dependency Updates
|
|
240
|
+
|
|
241
|
+
* `mui-spaces` updated to version `1.1.11`
|
|
242
|
+
* `mui-feedback` updated to version `1.1.11`
|
|
243
|
+
## [1.1.11](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.10...@availity/mui-page-header@1.1.11) (2025-03-13)
|
|
244
|
+
|
|
245
|
+
### Dependency Updates
|
|
246
|
+
|
|
247
|
+
* `mui-spaces` updated to version `1.1.10`
|
|
248
|
+
* `@availity/mock` updated to version `1.1.10`
|
|
249
|
+
## [1.1.10](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.9...@availity/mui-page-header@1.1.10) (2025-03-12)
|
|
250
|
+
|
|
251
|
+
### Dependency Updates
|
|
252
|
+
|
|
253
|
+
* `mui-spaces` updated to version `1.1.9`
|
|
254
|
+
## [1.1.9](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.8...@availity/mui-page-header@1.1.9) (2025-03-07)
|
|
255
|
+
|
|
256
|
+
### Dependency Updates
|
|
257
|
+
|
|
258
|
+
* `mui-breadcrumbs` updated to version `1.1.8`
|
|
259
|
+
* `mui-button` updated to version `1.1.8`
|
|
260
|
+
* `mui-divider` updated to version `1.1.8`
|
|
261
|
+
* `mui-layout` updated to version `1.1.8`
|
|
262
|
+
* `mui-link` updated to version `1.1.8`
|
|
263
|
+
* `mui-spaces` updated to version `1.1.8`
|
|
264
|
+
* `mui-typography` updated to version `1.1.8`
|
|
265
|
+
* `mui-feedback` updated to version `1.1.8`
|
|
266
|
+
## [1.1.8](https://github.com/Availity/element/compare/@availity/mui-page-header@1.1.7...@availity/mui-page-header@1.1.8) (2025-03-06)
|
|
267
|
+
|
|
268
|
+
### Dependency Updates
|
|
269
|
+
|
|
270
|
+
* `mui-spaces` updated to version `1.1.7`
|
|
271
|
+
## [1.1.7](https://github.com/Availity/element/compare/@availity/mui-page-header@2.0.0-alpha.0...@availity/mui-page-header@1.1.7) (2025-02-25)
|
|
272
|
+
|
|
273
|
+
### Dependency Updates
|
|
274
|
+
|
|
275
|
+
* `mui-breadcrumbs` updated to version `1.1.6`
|
|
276
|
+
* `mui-button` updated to version `1.1.6`
|
|
277
|
+
* `mui-divider` updated to version `1.1.6`
|
|
278
|
+
* `mui-layout` updated to version `1.1.6`
|
|
279
|
+
* `mui-link` updated to version `1.1.6`
|
|
280
|
+
* `mui-spaces` updated to version `1.1.6`
|
|
281
|
+
* `mui-typography` updated to version `1.1.6`
|
|
282
|
+
* `mui-feedback` updated to version `1.1.6`
|
|
283
|
+
* `@availity/mock` updated to version `1.1.6`
|
|
5
284
|
## [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
285
|
|
|
7
286
|
|
package/dist/index.d.mts
CHANGED
|
@@ -40,7 +40,9 @@ interface PageHeaderProps {
|
|
|
40
40
|
help?: Help;
|
|
41
41
|
/** Logo attributes */
|
|
42
42
|
logo?: LogoSpaceId | LogoPayerId;
|
|
43
|
+
/** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
|
|
44
|
+
divider?: React.JSX.Element;
|
|
43
45
|
}
|
|
44
|
-
declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
|
|
46
|
+
declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, divider }: PageHeaderProps) => React.JSX.Element;
|
|
45
47
|
|
|
46
48
|
export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -40,7 +40,9 @@ interface PageHeaderProps {
|
|
|
40
40
|
help?: Help;
|
|
41
41
|
/** Logo attributes */
|
|
42
42
|
logo?: LogoSpaceId | LogoPayerId;
|
|
43
|
+
/** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
|
|
44
|
+
divider?: React.JSX.Element;
|
|
43
45
|
}
|
|
44
|
-
declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, }: PageHeaderProps) => JSX.Element;
|
|
46
|
+
declare const PageHeader: ({ breadcrumbs, buttons, feedback, headerText, logo, help, divider }: PageHeaderProps) => React.JSX.Element;
|
|
45
47
|
|
|
46
48
|
export { type ButtonsProps, type Help, PageHeader, type PageHeaderProps };
|
package/dist/index.js
CHANGED
|
@@ -101,7 +101,8 @@ var PageHeader = ({
|
|
|
101
101
|
feedback = false,
|
|
102
102
|
headerText,
|
|
103
103
|
logo,
|
|
104
|
-
help
|
|
104
|
+
help,
|
|
105
|
+
divider = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_divider.Divider, {})
|
|
105
106
|
}) => {
|
|
106
107
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
107
108
|
import_mui_layout.Grid,
|
|
@@ -116,30 +117,30 @@ var PageHeader = ({
|
|
|
116
117
|
paddingRight: 3
|
|
117
118
|
},
|
|
118
119
|
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: [
|
|
120
|
-
breadcrumbs
|
|
121
|
-
(logo || help) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { children: [
|
|
122
|
-
help && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { variant: "body1", children: [
|
|
120
|
+
breadcrumbs || logo || help ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, spacing: 2, children: [
|
|
121
|
+
breadcrumbs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_breadcrumbs.Breadcrumbs, __spreadValues({}, breadcrumbs)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { display: { xs: "none", sm: "block" } } }),
|
|
122
|
+
(logo || help) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "column", container: true, spacing: 2, children: [
|
|
123
|
+
help && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_typography.Typography, { variant: "body1", children: [
|
|
123
124
|
"Need help?",
|
|
124
125
|
" ",
|
|
125
126
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
|
|
126
127
|
" ",
|
|
127
128
|
help.helpAppName ? ` for ${help.helpAppName}` : null
|
|
128
|
-
] }),
|
|
129
|
+
] }) }),
|
|
129
130
|
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)) })
|
|
130
131
|
] })
|
|
131
132
|
] }) : null,
|
|
132
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
|
|
133
|
+
/* @__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: [
|
|
133
134
|
/* @__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 }) }),
|
|
134
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, sx: { width: "auto" }, children: [
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
|
|
135
136
|
buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
|
|
136
137
|
var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
|
|
137
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, {
|
|
138
|
+
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);
|
|
138
139
|
})),
|
|
139
|
-
feedback ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: {
|
|
140
|
+
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
|
|
140
141
|
] })
|
|
141
142
|
] }),
|
|
142
|
-
|
|
143
|
+
divider
|
|
143
144
|
]
|
|
144
145
|
}
|
|
145
146
|
);
|
package/dist/index.mjs
CHANGED
|
@@ -68,7 +68,8 @@ var PageHeader = ({
|
|
|
68
68
|
feedback = false,
|
|
69
69
|
headerText,
|
|
70
70
|
logo,
|
|
71
|
-
help
|
|
71
|
+
help,
|
|
72
|
+
divider = /* @__PURE__ */ jsx(Divider, {})
|
|
72
73
|
}) => {
|
|
73
74
|
return /* @__PURE__ */ jsxs(
|
|
74
75
|
Grid,
|
|
@@ -83,30 +84,30 @@ var PageHeader = ({
|
|
|
83
84
|
paddingRight: 3
|
|
84
85
|
},
|
|
85
86
|
children: [
|
|
86
|
-
breadcrumbs || logo || help ? /* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { justifyContent: "space-between", marginBottom: 4 }, children: [
|
|
87
|
-
breadcrumbs
|
|
88
|
-
(logo || help) && /* @__PURE__ */ jsxs(Grid, { children: [
|
|
89
|
-
help && /* @__PURE__ */ jsxs(Typography, { variant: "body1", 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: [
|
|
90
91
|
"Need help?",
|
|
91
92
|
" ",
|
|
92
93
|
/* @__PURE__ */ jsx(Link, { href: help.url, target: "_blank", loadApp: false, children: help.helpAppName ? "Watch a demo" : "Learn More" }),
|
|
93
94
|
" ",
|
|
94
95
|
help.helpAppName ? ` for ${help.helpAppName}` : null
|
|
95
|
-
] }),
|
|
96
|
+
] }) }),
|
|
96
97
|
logo && /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "end", children: /* @__PURE__ */ jsx(Logo, __spreadValues({}, logo)) })
|
|
97
98
|
] })
|
|
98
99
|
] }) : null,
|
|
99
|
-
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, children: [
|
|
100
|
+
/* @__PURE__ */ jsxs(Grid, { direction: "row", container: true, sx: { marginBottom: 2, alignItems: "center", justifyContent: "space-between" }, spacing: 2, children: [
|
|
100
101
|
/* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Typography, { variant: "h1", children: headerText }) }),
|
|
101
|
-
/* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, children: [
|
|
102
|
+
/* @__PURE__ */ jsxs(Grid, { container: true, sx: { width: "auto" }, spacing: 2, children: [
|
|
102
103
|
buttons && buttons.length > 0 && (buttons == null ? void 0 : buttons.map((_a) => {
|
|
103
104
|
var _b = _a, { key } = _b, buttonProps = __objRest(_b, ["key"]);
|
|
104
|
-
return /* @__PURE__ */ jsx(Grid, {
|
|
105
|
+
return /* @__PURE__ */ jsx(Grid, { height: "100%", children: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { size: "large", color: "secondary" })) }, key);
|
|
105
106
|
})),
|
|
106
|
-
feedback ? /* @__PURE__ */ jsx(Grid, { sx: {
|
|
107
|
+
feedback ? /* @__PURE__ */ jsx(Grid, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(Feedback, { appName: headerText }) }) : null
|
|
107
108
|
] })
|
|
108
109
|
] }),
|
|
109
|
-
|
|
110
|
+
divider
|
|
110
111
|
]
|
|
111
112
|
}
|
|
112
113
|
);
|
package/introduction.mdx
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Markdown } from '@storybook/blocks';
|
|
2
2
|
import { Meta } from '@storybook/addon-docs';
|
|
3
3
|
import ReadMe from './README.md?raw';
|
|
4
|
+
import CHANGELOG from './CHANGELOG.md?raw';
|
|
4
5
|
|
|
5
6
|
<Meta title="Components/PageHeader/Introduction" />
|
|
6
7
|
|
|
7
8
|
<Markdown>{ReadMe}</Markdown>
|
|
9
|
+
|
|
10
|
+
<Markdown>{CHANGELOG}</Markdown>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-page-header",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Availity MUI PageHeader Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -40,35 +40,37 @@
|
|
|
40
40
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@availity/mui-breadcrumbs": "^
|
|
44
|
-
"@availity/mui-button": "^
|
|
45
|
-
"@availity/mui-divider": "^
|
|
46
|
-
"@availity/mui-layout": "^
|
|
47
|
-
"@availity/mui-link": "^
|
|
48
|
-
"@availity/mui-
|
|
49
|
-
"@mui
|
|
43
|
+
"@availity/mui-breadcrumbs": "^2.0.0",
|
|
44
|
+
"@availity/mui-button": "^2.0.0",
|
|
45
|
+
"@availity/mui-divider": "^2.0.0",
|
|
46
|
+
"@availity/mui-layout": "^2.0.0",
|
|
47
|
+
"@availity/mui-link": "^2.0.0",
|
|
48
|
+
"@availity/mui-tabs": "^2.0.0",
|
|
49
|
+
"@availity/mui-typography": "^2.0.0",
|
|
50
|
+
"@mui/material": "^7.3.4",
|
|
50
51
|
"@tanstack/react-query": "^4.36.1",
|
|
51
|
-
"react": "
|
|
52
|
-
"react-dom": "
|
|
52
|
+
"react": "19.2.0",
|
|
53
|
+
"react-dom": "19.2.0",
|
|
53
54
|
"react-image": "^4.1.0",
|
|
54
|
-
"tsup": "^8.
|
|
55
|
+
"tsup": "^8.4.0",
|
|
55
56
|
"typescript": "^5.4.5"
|
|
56
57
|
},
|
|
57
58
|
"peerDependencies": {
|
|
58
|
-
"@availity/mui-breadcrumbs": "^
|
|
59
|
-
"@availity/mui-button": "^
|
|
60
|
-
"@availity/mui-divider": "^
|
|
61
|
-
"@availity/mui-layout": "^
|
|
62
|
-
"@availity/mui-link": "^
|
|
63
|
-
"@availity/mui-spaces": "^
|
|
64
|
-
"@availity/mui-typography": "^
|
|
65
|
-
"@mui/material": "^
|
|
66
|
-
"react": ">=
|
|
59
|
+
"@availity/mui-breadcrumbs": "^2.0.0",
|
|
60
|
+
"@availity/mui-button": "^2.0.0",
|
|
61
|
+
"@availity/mui-divider": "^2.0.0",
|
|
62
|
+
"@availity/mui-layout": "^2.0.0",
|
|
63
|
+
"@availity/mui-link": "^2.0.0",
|
|
64
|
+
"@availity/mui-spaces": "^2.0.0",
|
|
65
|
+
"@availity/mui-typography": "^2.0.0",
|
|
66
|
+
"@mui/material": "^7.0.0",
|
|
67
|
+
"react": ">=17.0.0"
|
|
67
68
|
},
|
|
68
69
|
"publishConfig": {
|
|
69
70
|
"access": "public"
|
|
70
71
|
},
|
|
71
72
|
"dependencies": {
|
|
72
|
-
"@availity/mui-feedback": "^
|
|
73
|
-
}
|
|
73
|
+
"@availity/mui-feedback": "^2.0.0"
|
|
74
|
+
},
|
|
75
|
+
"sideEffects": false
|
|
74
76
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
// Each exported component in the package should have its own stories file
|
|
2
2
|
|
|
3
|
+
import { useState } from 'react';
|
|
3
4
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
5
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
5
6
|
import { Spaces } from '@availity/mui-spaces';
|
|
7
|
+
import { Tab, TabContext, TabList, TabPanel } from '@availity/mui-tabs';
|
|
6
8
|
import { PageHeader, PageHeaderProps } from './PageHeader';
|
|
7
9
|
|
|
8
10
|
const meta: Meta<typeof PageHeader> = {
|
|
@@ -61,6 +63,38 @@ export const _PageHeaderDoubleButtons: StoryObj<typeof PageHeader> = {
|
|
|
61
63
|
},
|
|
62
64
|
};
|
|
63
65
|
|
|
66
|
+
/** Divider can be replaced with primary style `<TabList>` */
|
|
67
|
+
export const _PageHeaderTabs: StoryObj<typeof PageHeader> = {
|
|
68
|
+
render: (args: PageHeaderProps) => {
|
|
69
|
+
const [value, setValue] = useState('1');
|
|
70
|
+
|
|
71
|
+
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
|
|
72
|
+
setValue(newValue);
|
|
73
|
+
};
|
|
74
|
+
return (
|
|
75
|
+
<TabContext value={value}>
|
|
76
|
+
<PageHeader
|
|
77
|
+
divider={
|
|
78
|
+
<TabList {...args} onChange={handleChange} aria-label="pageheader tabs example">
|
|
79
|
+
<Tab label="Tab One" value="1" />
|
|
80
|
+
<Tab label="Tab Two" value="2" />
|
|
81
|
+
<Tab label="Tab Three" value="3" />
|
|
82
|
+
</TabList>
|
|
83
|
+
}
|
|
84
|
+
{...args}
|
|
85
|
+
/>
|
|
86
|
+
<TabPanel value="1" children={`Hello from Panel ${value}`} />
|
|
87
|
+
<TabPanel value="2" children={`Hello from Panel ${value}`} />
|
|
88
|
+
<TabPanel value="3" children={`Hello from Panel ${value}`} />
|
|
89
|
+
</TabContext>
|
|
90
|
+
);
|
|
91
|
+
},
|
|
92
|
+
args: {
|
|
93
|
+
headerText: 'This text is a child of PageHeader',
|
|
94
|
+
breadcrumbs: { active: 'This Page' },
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
|
|
64
98
|
const queryClient = new QueryClient();
|
|
65
99
|
|
|
66
100
|
export const _PageHeaderLogo: StoryObj<typeof PageHeader> = {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { render, waitForElementToBeRemoved } from '@testing-library/react';
|
|
2
2
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
3
3
|
import { Spaces } from '@availity/mui-spaces';
|
|
4
|
+
import { Tab, TabContext, TabList } from '@availity/mui-tabs';
|
|
4
5
|
// eslint-disable-next-line @nx/enforce-module-boundaries
|
|
5
6
|
import { server } from '@availity/mock/src/lib/server';
|
|
6
7
|
import { PageHeader } from './PageHeader';
|
|
@@ -24,6 +25,10 @@ describe('PageHeader', () => {
|
|
|
24
25
|
server.resetHandlers();
|
|
25
26
|
jest.restoreAllMocks();
|
|
26
27
|
});
|
|
28
|
+
|
|
29
|
+
// terminate the server
|
|
30
|
+
afterAll(() => server.close());
|
|
31
|
+
|
|
27
32
|
test('should render simple page header successfully', () => {
|
|
28
33
|
const { getByText } = render(<PageHeader breadcrumbs={{ active: 'This page' }} headerText="This is the header" />);
|
|
29
34
|
expect(getByText('This is the header')).toBeTruthy();
|
|
@@ -56,6 +61,21 @@ describe('PageHeader', () => {
|
|
|
56
61
|
expect(getByText('Button 1')).toBeTruthy();
|
|
57
62
|
});
|
|
58
63
|
|
|
64
|
+
test('should render page header with a replaced divider successfully', () => {
|
|
65
|
+
const { getByText } = render(
|
|
66
|
+
<TabContext value={1}>
|
|
67
|
+
<PageHeader
|
|
68
|
+
breadcrumbs={{ active: 'This page' }}
|
|
69
|
+
headerText="This is the header"
|
|
70
|
+
divider={<TabList><Tab value={1} label="Tab One"/></TabList>}
|
|
71
|
+
/>
|
|
72
|
+
</TabContext>
|
|
73
|
+
);
|
|
74
|
+
expect(getByText('This is the header')).toBeTruthy();
|
|
75
|
+
expect(getByText('This page')).toBeTruthy();
|
|
76
|
+
expect(getByText('Tab One')).toBeTruthy();
|
|
77
|
+
});
|
|
78
|
+
|
|
59
79
|
test('should render page header with a logo successfully', async () => {
|
|
60
80
|
const queryClient = new QueryClient();
|
|
61
81
|
const { getByText, container } = render(
|
package/src/lib/PageHeader.tsx
CHANGED
|
@@ -51,6 +51,8 @@ export interface PageHeaderProps {
|
|
|
51
51
|
help?: Help;
|
|
52
52
|
/** Logo attributes */
|
|
53
53
|
logo?: LogoSpaceId | LogoPayerId;
|
|
54
|
+
/** The divider below the header, defaults to `<Divider />`. Can be replaced with `<TabList>`. */
|
|
55
|
+
divider?: React.JSX.Element;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
const Logo = (props: LogoSpaceId | LogoPayerId) => {
|
|
@@ -80,7 +82,8 @@ export const PageHeader = ({
|
|
|
80
82
|
headerText,
|
|
81
83
|
logo,
|
|
82
84
|
help,
|
|
83
|
-
|
|
85
|
+
divider = <Divider />
|
|
86
|
+
}: PageHeaderProps): React.JSX.Element => {
|
|
84
87
|
return (
|
|
85
88
|
<Grid
|
|
86
89
|
component={Box}
|
|
@@ -94,22 +97,26 @@ export const PageHeader = ({
|
|
|
94
97
|
}}
|
|
95
98
|
>
|
|
96
99
|
{breadcrumbs || logo || help ? (
|
|
97
|
-
<Grid direction="row" container sx={{ justifyContent: 'space-between', marginBottom: 4 }}>
|
|
98
|
-
{breadcrumbs
|
|
99
|
-
<Grid
|
|
100
|
+
<Grid direction="row" container sx={{ justifyContent: 'space-between', marginBottom: 4 }} spacing={2}>
|
|
101
|
+
{breadcrumbs ?
|
|
102
|
+
<Grid>
|
|
100
103
|
<Breadcrumbs {...breadcrumbs} />
|
|
101
104
|
</Grid>
|
|
102
|
-
|
|
105
|
+
:
|
|
106
|
+
<Grid sx={{display: {xs: 'none', sm: 'block'}}}/>
|
|
107
|
+
}
|
|
103
108
|
{(logo || help) && (
|
|
104
|
-
<Grid>
|
|
109
|
+
<Grid direction="column" container spacing={2}>
|
|
105
110
|
{help && (
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
{help.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
111
|
+
<Grid>
|
|
112
|
+
<Typography variant="body1">
|
|
113
|
+
Need help?{' '}
|
|
114
|
+
<Link href={help.url} target="_blank" loadApp={false}>
|
|
115
|
+
{help.helpAppName ? 'Watch a demo' : 'Learn More'}
|
|
116
|
+
</Link>{' '}
|
|
117
|
+
{help.helpAppName ? ` for ${help.helpAppName}` : null}
|
|
118
|
+
</Typography>
|
|
119
|
+
</Grid>
|
|
113
120
|
)}
|
|
114
121
|
{logo && (
|
|
115
122
|
<Grid container justifyContent="end">
|
|
@@ -121,26 +128,26 @@ export const PageHeader = ({
|
|
|
121
128
|
</Grid>
|
|
122
129
|
) : null}
|
|
123
130
|
|
|
124
|
-
<Grid direction="row" container sx={{ marginBottom: 2, alignItems: 'center', justifyContent: 'space-between' }}>
|
|
131
|
+
<Grid direction="row" container sx={{ marginBottom: 2, alignItems: 'center', justifyContent: 'space-between' }} spacing={2}>
|
|
125
132
|
<Grid>
|
|
126
133
|
<Typography variant="h1" children={headerText} />
|
|
127
134
|
</Grid>
|
|
128
|
-
<Grid container sx={{ width: 'auto' }}>
|
|
135
|
+
<Grid container sx={{ width: 'auto' }} spacing={2}>
|
|
129
136
|
{buttons &&
|
|
130
137
|
buttons.length > 0 &&
|
|
131
138
|
buttons?.map(({ key, ...buttonProps }) => (
|
|
132
|
-
<Grid key={key}
|
|
139
|
+
<Grid key={key} height="100%">
|
|
133
140
|
<Button {...buttonProps} size="large" color="secondary" />
|
|
134
141
|
</Grid>
|
|
135
142
|
))}
|
|
136
143
|
{feedback ? (
|
|
137
|
-
<Grid sx={{
|
|
144
|
+
<Grid sx={{ height: '100%' }}>
|
|
138
145
|
<Feedback appName={headerText} />
|
|
139
146
|
</Grid>
|
|
140
147
|
) : null}
|
|
141
148
|
</Grid>
|
|
142
149
|
</Grid>
|
|
143
|
-
|
|
150
|
+
{ divider }
|
|
144
151
|
</Grid>
|
|
145
152
|
);
|
|
146
153
|
};
|
package/tsconfig.spec.json
CHANGED