@skyscanner/backpack-web 38.17.0 → 38.18.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/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +3 -3
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +53 -47
- package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts +1 -1
- package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +17 -9
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SyntheticEvent, ReactNode } from
|
|
1
|
+
import type { SyntheticEvent, ReactNode } from 'react';
|
|
2
2
|
interface CommonProps {
|
|
3
3
|
actionText?: string;
|
|
4
4
|
children: ReactNode;
|
|
@@ -19,5 +19,5 @@ export type Props = CommonProps & ({
|
|
|
19
19
|
} | {
|
|
20
20
|
ariaLabel: string;
|
|
21
21
|
});
|
|
22
|
-
declare const
|
|
23
|
-
export default
|
|
22
|
+
declare const BpkBottomSheetWithBreakpoint: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default BpkBottomSheetWithBreakpoint;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import { useState } from
|
|
19
|
+
import { useCallback, useState } from 'react';
|
|
20
20
|
import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
|
|
21
21
|
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
22
22
|
import BpkCloseButton from "../../bpk-component-close-button";
|
|
@@ -35,6 +35,7 @@ const BpkBottomSheet = ({
|
|
|
35
35
|
closeOnEscPressed = false,
|
|
36
36
|
closeOnScrimClick = false,
|
|
37
37
|
id,
|
|
38
|
+
isAboveMobile,
|
|
38
39
|
isOpen,
|
|
39
40
|
onAction = () => null,
|
|
40
41
|
onClose,
|
|
@@ -44,58 +45,63 @@ const BpkBottomSheet = ({
|
|
|
44
45
|
}) => {
|
|
45
46
|
const [exiting, setExiting] = useState(false);
|
|
46
47
|
const animationTimeout = 240;
|
|
47
|
-
const handleClose = (
|
|
48
|
+
const handleClose = useCallback((arg0, arg1) => {
|
|
49
|
+
const timeoutDuration = isAboveMobile ? 0 : animationTimeout;
|
|
48
50
|
setExiting(true);
|
|
49
51
|
setTimeout(() => {
|
|
50
52
|
onClose(arg0, arg1);
|
|
51
53
|
setExiting(false);
|
|
52
|
-
},
|
|
53
|
-
};
|
|
54
|
+
}, timeoutDuration);
|
|
55
|
+
}, [isAboveMobile, onClose]);
|
|
54
56
|
const headingId = `bpk-bottom-sheet-heading-${id}`;
|
|
55
57
|
const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
|
|
56
|
-
return /*#__PURE__*/_jsx(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
children:
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
children: children
|
|
96
|
-
})]
|
|
97
|
-
})
|
|
58
|
+
return /*#__PURE__*/_jsx(BpkDialogWrapper, {
|
|
59
|
+
...ariaProps,
|
|
60
|
+
dialogClassName: dialogClassName,
|
|
61
|
+
id: id,
|
|
62
|
+
isOpen: isOpen,
|
|
63
|
+
onClose: handleClose,
|
|
64
|
+
exiting: exiting,
|
|
65
|
+
transitionClassNames: {
|
|
66
|
+
appear: getClassName('bpk-bottom-sheet--appear'),
|
|
67
|
+
appearActive: getClassName('bpk-bottom-sheet--appear-active'),
|
|
68
|
+
exit: getClassName('bpk-bottom-sheet--exit')
|
|
69
|
+
},
|
|
70
|
+
closeOnEscPressed: closeOnEscPressed,
|
|
71
|
+
closeOnScrimClick: closeOnScrimClick,
|
|
72
|
+
timeout: {
|
|
73
|
+
appear: animationTimeout,
|
|
74
|
+
exit: isAboveMobile ? 0 : animationTimeout
|
|
75
|
+
},
|
|
76
|
+
children: /*#__PURE__*/_jsxs(_Fragment, {
|
|
77
|
+
children: [/*#__PURE__*/_jsx("header", {
|
|
78
|
+
className: getClassName('bpk-bottom-sheet--header'),
|
|
79
|
+
children: /*#__PURE__*/_jsx(BpkNavigationBar, {
|
|
80
|
+
id: headingId,
|
|
81
|
+
title: title,
|
|
82
|
+
titleTextStyle: TEXT_STYLES.label1,
|
|
83
|
+
titleTagName: title ? 'h2' : 'span',
|
|
84
|
+
leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
|
|
85
|
+
label: closeLabel,
|
|
86
|
+
onClick: handleClose
|
|
87
|
+
}),
|
|
88
|
+
trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
|
|
89
|
+
onClick: onAction,
|
|
90
|
+
children: actionText
|
|
91
|
+
}) : null
|
|
92
|
+
})
|
|
93
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
94
|
+
className: getClassName('bpk-bottom-sheet--content'),
|
|
95
|
+
children: children
|
|
96
|
+
})]
|
|
98
97
|
})
|
|
99
98
|
});
|
|
100
99
|
};
|
|
101
|
-
|
|
100
|
+
const BpkBottomSheetWithBreakpoint = props => /*#__PURE__*/_jsx(BpkBreakpoint, {
|
|
101
|
+
query: BREAKPOINTS.ABOVE_MOBILE,
|
|
102
|
+
children: isAboveMobile => /*#__PURE__*/_jsx(BpkBottomSheet, {
|
|
103
|
+
...props,
|
|
104
|
+
isAboveMobile: isAboveMobile
|
|
105
|
+
})
|
|
106
|
+
});
|
|
107
|
+
export default BpkBottomSheetWithBreakpoint;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import { useEffect, useRef, useState } from
|
|
19
|
+
import { useEffect, useRef, useState } from 'react';
|
|
20
20
|
import CSSTransition from 'react-transition-group/CSSTransition';
|
|
21
21
|
import cssModules from "../cssModules";
|
|
22
22
|
import STYLES from "./BpkDialogWrapper.module.css";
|
|
@@ -49,6 +49,8 @@ export const BpkDialogWrapper = ({
|
|
|
49
49
|
}) => {
|
|
50
50
|
const ref = useRef(null);
|
|
51
51
|
const [dialogTarget, setDialogTarget] = useState(null);
|
|
52
|
+
|
|
53
|
+
// Handle the opening and closing of the dialog
|
|
52
54
|
useEffect(() => {
|
|
53
55
|
const dialog = document.getElementById(`${id}`);
|
|
54
56
|
const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
|
|
@@ -60,7 +62,7 @@ export const BpkDialogWrapper = ({
|
|
|
60
62
|
} = event;
|
|
61
63
|
if (target === modal) {
|
|
62
64
|
onClose(event, {
|
|
63
|
-
source:
|
|
65
|
+
source: 'DOCUMENT_CLICK'
|
|
64
66
|
});
|
|
65
67
|
event.stopPropagation();
|
|
66
68
|
}
|
|
@@ -70,7 +72,7 @@ export const BpkDialogWrapper = ({
|
|
|
70
72
|
const handleKeyDown = event => {
|
|
71
73
|
if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
|
|
72
74
|
onClose(event, {
|
|
73
|
-
source:
|
|
75
|
+
source: 'ESCAPE'
|
|
74
76
|
});
|
|
75
77
|
}
|
|
76
78
|
event.stopPropagation();
|
|
@@ -91,6 +93,13 @@ export const BpkDialogWrapper = ({
|
|
|
91
93
|
} else {
|
|
92
94
|
ref.current?.close?.();
|
|
93
95
|
}
|
|
96
|
+
return () => {
|
|
97
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
98
|
+
};
|
|
99
|
+
}, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
|
|
100
|
+
|
|
101
|
+
// Lock the scroll of the page when the dialog is open
|
|
102
|
+
useEffect(() => {
|
|
94
103
|
setPageProperties({
|
|
95
104
|
isDialogOpen: isOpen
|
|
96
105
|
});
|
|
@@ -98,15 +107,14 @@ export const BpkDialogWrapper = ({
|
|
|
98
107
|
setPageProperties({
|
|
99
108
|
isDialogOpen: false
|
|
100
109
|
});
|
|
101
|
-
window.removeEventListener('keydown', handleKeyDown);
|
|
102
110
|
};
|
|
103
|
-
}, [
|
|
111
|
+
}, [isOpen]);
|
|
104
112
|
const aria = {
|
|
105
|
-
...(
|
|
106
|
-
|
|
113
|
+
...('ariaLabelledby' in ariaProps ? {
|
|
114
|
+
'aria-labelledby': ariaProps.ariaLabelledby
|
|
107
115
|
} : undefined),
|
|
108
|
-
...(
|
|
109
|
-
|
|
116
|
+
...('ariaLabel' in ariaProps ? {
|
|
117
|
+
'aria-label': ariaProps.ariaLabel
|
|
110
118
|
} : undefined)
|
|
111
119
|
};
|
|
112
120
|
return isOpen ? /*#__PURE__*/_jsxs("div", {
|