@@ -5,33 +5,42 @@ import { PageHeading, type PageHeadingProps } from '#ui/atoms/PageHeading'
5
5
import { ScrollToTop } from '#ui/atoms/ScrollToTop'
6
6
import { withSkeletonTemplate } from '#ui/atoms/SkeletonTemplate'
7
7
import { Spacer } from '#ui/atoms/Spacer'
8
- import { Overlay } from '#ui/internals/Overlay'
8
+ import { Overlay , type OverlayProps } from '#ui/internals/Overlay'
9
9
import { type ReactNode } from 'react'
10
10
11
- export interface PageLayoutProps
12
- extends Pick <
13
- PageHeadingProps ,
14
- 'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'
15
- > ,
16
- Pick < ContainerProps , 'minHeight' > {
17
- /**
18
- * Page content
19
- */
20
- children : ReactNode
21
- /**
22
- * When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
23
- * Only if app is standalone mode.
24
- */
25
- mode ?: 'test' | 'live'
26
- /**
27
- * Renders as overlay
28
- */
29
- overlay ?: boolean
30
- /**
31
- * Optional prop to enable scroll to top behavior on location change
32
- */
33
- scrollToTop ?: boolean
34
- }
11
+ export type PageLayoutProps = Pick <
12
+ PageHeadingProps ,
13
+ 'title' | 'description' | 'navigationButton' | 'toolbar' | 'gap'
14
+ > &
15
+ Pick < ContainerProps , 'minHeight' > & {
16
+ /**
17
+ * Page content
18
+ */
19
+ children : ReactNode
20
+ /**
21
+ * When mode is `test`, it will render a `TEST DATA` Badge to inform user api is working in test mode.
22
+ * Only if app is standalone mode.
23
+ */
24
+ mode ?: 'test' | 'live'
25
+ /**
26
+ * Optional prop to enable scroll to top behavior on location change
27
+ */
28
+ scrollToTop ?: boolean
29
+ } & (
30
+ | {
31
+ overlay ?: false
32
+ }
33
+ | {
34
+ /**
35
+ * Renders as overlay
36
+ */
37
+ overlay : true
38
+ /**
39
+ * Footer element to be rendered at the bottom of the overlay.
40
+ **/
41
+ overlayFooter ?: OverlayProps [ 'footer' ]
42
+ }
43
+ )
35
44
36
45
export const PageLayout = withSkeletonTemplate < PageLayoutProps > (
37
46
( {
@@ -47,12 +56,15 @@ export const PageLayout = withSkeletonTemplate<PageLayoutProps>(
47
56
overlay = false ,
48
57
isLoading,
49
58
delayMs,
50
- ...rest
59
+ ...props
51
60
} ) => {
52
61
const {
53
62
settings : { isInDashboard }
54
63
} = useTokenProvider ( )
55
64
65
+ const { overlayFooter, ...rest } =
66
+ 'overlayFooter' in props ? props : { ...props , overlayFooter : undefined }
67
+
56
68
const component = (
57
69
< >
58
70
< PageHeading
@@ -78,7 +90,11 @@ export const PageLayout = withSkeletonTemplate<PageLayoutProps>(
78
90
)
79
91
80
92
if ( overlay ) {
81
- return < Overlay backgroundColor = 'light' > { component } </ Overlay >
93
+ return (
94
+ < Overlay backgroundColor = 'light' footer = { overlayFooter } >
95
+ { component }
96
+ </ Overlay >
97
+ )
82
98
}
83
99
84
100
return (
0 commit comments