@skyscanner/backpack-web 38.17.0 → 38.19.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.
Files changed (5) hide show
  1. package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +3 -3
  2. package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +53 -47
  3. package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts +1 -1
  4. package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +21 -11
  5. package/package.json +1 -1
package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { SyntheticEvent, ReactNode } from "react";
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 BpkBottomSheet: ({ actionText, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide, ...ariaProps }: Props) => import("react/jsx-runtime").JSX.Element;
23
- export default BpkBottomSheet;
22
+ declare const BpkBottomSheetWithBreakpoint: (props: Props) => import("react/jsx-runtime").JSX.Element;
23
+ export default BpkBottomSheetWithBreakpoint;
package/bpk-component-bottom-sheet/src/BpkBottomSheet.js CHANGED
@@ -16,7 +16,7 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { useState } from "react";
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 = (timeout, arg0, arg1) => {
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
- }, timeout);
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(BpkBreakpoint, {
57
- query: BREAKPOINTS.ABOVE_MOBILE,
58
- children: isAboveMobile => /*#__PURE__*/_jsx(BpkDialogWrapper, {
59
- ...ariaProps,
60
- dialogClassName: dialogClassName,
61
- id: id,
62
- isOpen: isOpen,
63
- onClose: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1),
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: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)
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
- })]
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
- export default BpkBottomSheet;
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;
package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { SyntheticEvent, ReactNode } from "react";
1
+ import type { SyntheticEvent, ReactNode } from 'react';
2
2
  interface CommonProps {
3
3
  children: ReactNode;
4
4
  closeOnEscPressed?: boolean;
package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js CHANGED
@@ -16,7 +16,7 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { useEffect, useRef, useState } from "react";
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";
@@ -28,8 +28,10 @@ const setPageProperties = ({
28
28
  isDialogOpen
29
29
  }) => {
30
30
  document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
31
- document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
32
- document.body.style.width = isDialogOpen ? '100%' : 'auto';
31
+ if (!dialogSupported) {
32
+ document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
33
+ document.body.style.width = isDialogOpen ? '100%' : 'auto';
34
+ }
33
35
  };
34
36
  export const BpkDialogWrapper = ({
35
37
  children,
@@ -49,6 +51,8 @@ export const BpkDialogWrapper = ({
49
51
  }) => {
50
52
  const ref = useRef(null);
51
53
  const [dialogTarget, setDialogTarget] = useState(null);
54
+
55
+ // Handle the opening and closing of the dialog
52
56
  useEffect(() => {
53
57
  const dialog = document.getElementById(`${id}`);
54
58
  const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
@@ -60,7 +64,7 @@ export const BpkDialogWrapper = ({
60
64
  } = event;
61
65
  if (target === modal) {
62
66
  onClose(event, {
63
- source: "DOCUMENT_CLICK"
67
+ source: 'DOCUMENT_CLICK'
64
68
  });
65
69
  event.stopPropagation();
66
70
  }
@@ -70,7 +74,7 @@ export const BpkDialogWrapper = ({
70
74
  const handleKeyDown = event => {
71
75
  if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
72
76
  onClose(event, {
73
- source: "ESCAPE"
77
+ source: 'ESCAPE'
74
78
  });
75
79
  }
76
80
  event.stopPropagation();
@@ -91,6 +95,13 @@ export const BpkDialogWrapper = ({
91
95
  } else {
92
96
  ref.current?.close?.();
93
97
  }
98
+ return () => {
99
+ window.removeEventListener('keydown', handleKeyDown);
100
+ };
101
+ }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
102
+
103
+ // Lock the scroll of the page when the dialog is open
104
+ useEffect(() => {
94
105
  setPageProperties({
95
106
  isDialogOpen: isOpen
96
107
  });
@@ -98,15 +109,14 @@ export const BpkDialogWrapper = ({
98
109
  setPageProperties({
99
110
  isDialogOpen: false
100
111
  });
101
- window.removeEventListener('keydown', handleKeyDown);
102
112
  };
103
- }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
113
+ }, [isOpen]);
104
114
  const aria = {
105
- ...("ariaLabelledby" in ariaProps ? {
106
- "aria-labelledby": ariaProps.ariaLabelledby
115
+ ...('ariaLabelledby' in ariaProps ? {
116
+ 'aria-labelledby': ariaProps.ariaLabelledby
107
117
  } : undefined),
108
- ...("ariaLabel" in ariaProps ? {
109
- "aria-label": ariaProps.ariaLabel
118
+ ...('ariaLabel' in ariaProps ? {
119
+ 'aria-label': ariaProps.ariaLabel
110
120
  } : undefined)
111
121
  };
112
122
  return isOpen ? /*#__PURE__*/_jsxs("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "38.17.0",
3
+ "version": "38.19.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",