@skyscanner/backpack-web 24.0.0 → 25.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.
Files changed (14) hide show
  1. package/bpk-component-modal/src/BpkModal.d.ts +7 -4
  2. package/bpk-component-modal/src/BpkModal.js +13 -2
  3. package/bpk-component-modal/src/BpkModalInner.d.ts +1 -1
  4. package/bpk-component-modal/src/BpkModalInner.js +23 -24
  5. package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css +1 -1
  6. package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts +1 -0
  7. package/bpk-component-modal/src/BpkModalV2/BpkModal.js +35 -17
  8. package/bpk-component-overlay/index.d.ts +27 -0
  9. package/bpk-component-overlay/index.js +0 -6
  10. package/bpk-component-overlay/src/BpkOverlay.d.ts +47 -0
  11. package/bpk-component-overlay/src/BpkOverlay.js +49 -45
  12. package/bpk-scrim-utils/index.d.ts +87 -113
  13. package/bpk-scrim-utils/src/withScrim.d.ts +29 -31
  14. package/package.json +1 -1
package/bpk-component-modal/src/BpkModal.d.ts CHANGED
@@ -16,17 +16,20 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- /// <reference types="react" />
19
+ import type { ReactNode } from 'react';
20
20
  import type { Props as ModalDialogProps } from './BpkModalInner';
21
- export type Props = ModalDialogProps & {
21
+ export type Props = Partial<ModalDialogProps> & {
22
+ id: string;
23
+ children: ReactNode;
24
+ dialogRef?: (ref: HTMLElement | null | undefined) => void;
22
25
  isOpen: boolean;
23
26
  closeOnScrimClick?: boolean;
24
27
  closeOnEscPressed?: boolean;
25
28
  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
26
- onClose: (arg0: TouchEvent | MouseEvent | KeyboardEvent, arg1: {
29
+ onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
27
30
  source: 'ESCAPE' | 'DOCUMENT_CLICK';
28
31
  }) => void;
29
32
  getApplicationElement: () => HTMLElement | null;
30
33
  };
31
- declare const BpkModal: ({ title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, renderTarget, isIphone, closeOnScrimClick, closeOnEscPressed, isOpen, ...rest }: Props) => JSX.Element;
34
+ declare const BpkModal: ({ title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, renderTarget, isIphone, closeOnScrimClick, closeOnEscPressed, dialogRef, isOpen, ...rest }: Props) => JSX.Element;
32
35
  export default BpkModal;
package/bpk-component-modal/src/BpkModal.js CHANGED
@@ -9,7 +9,7 @@ var _bpkReactUtils = require("../../bpk-react-utils");
9
9
  var _BpkModalModule = _interopRequireDefault(require("./BpkModal.module.css"));
10
10
  var _BpkModalInner = _interopRequireDefault(require("./BpkModalInner"));
11
11
  var _jsxRuntime = require("react/jsx-runtime");
12
- const _excluded = ["title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView", "renderTarget", "isIphone", "closeOnScrimClick", "closeOnEscPressed", "isOpen"];
12
+ const _excluded = ["title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView", "renderTarget", "isIphone", "closeOnScrimClick", "closeOnEscPressed", "dialogRef", "isOpen"];
13
13
  /*
14
14
  * Backpack - Skyscanner's Design System
15
15
  *
@@ -55,6 +55,7 @@ const BpkModal = _ref => {
55
55
  isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
56
56
  closeOnScrimClick = true,
57
57
  closeOnEscPressed = true,
58
+ dialogRef = () => null,
58
59
  isOpen
59
60
  } = _ref,
60
61
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -75,7 +76,17 @@ const BpkModal = _ref => {
75
76
  fullScreen: fullScreen,
76
77
  closeOnScrimClick: closeOnScrimClick,
77
78
  containerClassName: containerClass.join(' '),
78
- isIphone: isIphone
79
+ isIphone: isIphone,
80
+ title: title,
81
+ className: className,
82
+ contentClassName: contentClassName,
83
+ closeLabel: closeLabel,
84
+ closeText: closeText,
85
+ wide: wide,
86
+ showHeader: showHeader,
87
+ padded: padded,
88
+ accessoryView: accessoryView,
89
+ dialogRef: dialogRef
79
90
  }, rest))
80
91
  });
81
92
  };
package/bpk-component-modal/src/BpkModalInner.d.ts CHANGED
@@ -35,5 +35,5 @@ export type Props = {
35
35
  closeText?: string | null;
36
36
  accessoryView?: ReactNode;
37
37
  };
38
- declare const BpkModalInner: ({ isIphone, id, dialogRef, children, title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, ...rest }: Props) => JSX.Element;
38
+ declare const BpkModalInner: ({ isIphone, id, dialogRef, children, title, onClose, className, contentClassName, closeLabel, closeText, wide, showHeader, fullScreenOnMobile, fullScreen, padded, accessoryView, }: Props) => JSX.Element;
39
39
  export default BpkModalInner;
package/bpk-component-modal/src/BpkModalInner.js CHANGED
@@ -10,7 +10,7 @@ var _bpkComponentNavigationBar = _interopRequireDefault(require("../../bpk-compo
10
10
  var _bpkReactUtils = require("../../bpk-react-utils");
11
11
  var _BpkModalInnerModule = _interopRequireDefault(require("./BpkModalInner.module.css"));
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
- const _excluded = ["isIphone", "id", "dialogRef", "children", "title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView"];
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  /*
15
15
  * Backpack - Skyscanner's Design System
16
16
  *
@@ -28,33 +28,32 @@ const _excluded = ["isIphone", "id", "dialogRef", "children", "title", "onClose"
28
28
  * See the License for the specific language governing permissions and
29
29
  * limitations under the License.
30
30
  */
31
+
31
32
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
33
+
32
34
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
35
+
33
36
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
34
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
35
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
36
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
37
+
37
38
  const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalInnerModule.default);
38
- const BpkModalInner = _ref => {
39
- let {
40
- isIphone,
41
- id,
42
- dialogRef,
43
- children,
44
- title = null,
45
- onClose = () => null,
46
- className = null,
47
- contentClassName = null,
48
- closeLabel = '',
49
- closeText = null,
50
- wide = false,
51
- showHeader = true,
52
- fullScreenOnMobile = true,
53
- fullScreen = false,
54
- padded = true,
55
- accessoryView = null
56
- } = _ref,
57
- rest = _objectWithoutProperties(_ref, _excluded);
39
+ const BpkModalInner = ({
40
+ isIphone,
41
+ id,
42
+ dialogRef,
43
+ children,
44
+ title = null,
45
+ onClose = () => null,
46
+ className = null,
47
+ contentClassName = null,
48
+ closeLabel = '',
49
+ closeText = null,
50
+ wide = false,
51
+ showHeader = true,
52
+ fullScreenOnMobile = true,
53
+ fullScreen = false,
54
+ padded = true,
55
+ accessoryView = null
56
+ }) => {
58
57
  const classNames = [getClassName('bpk-modal')];
59
58
  const contentClassNames = [getClassName('bpk-modal__content')];
60
59
  const navigationStyles = [getClassName('bpk-modal__navigation')];
package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#eff1f2;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#fff;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}
package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts CHANGED
@@ -29,6 +29,7 @@ export type Props = {
29
29
  noFullScreenOnMobile?: boolean;
30
30
  onClose: () => void | null;
31
31
  padded?: boolean;
32
+ showHeader?: boolean;
32
33
  title?: string | null;
33
34
  wide?: boolean;
34
35
  };
package/bpk-component-modal/src/BpkModalV2/BpkModal.js CHANGED
@@ -34,6 +34,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
34
34
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
35
35
 
36
36
  const getClassName = (0, _bpkReactUtils.cssModules)(_BpKModalModule.default);
37
+ const Header = ({
38
+ closeLabel,
39
+ id,
40
+ onClose,
41
+ title
42
+ }) => {
43
+ if (title) {
44
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
45
+ id: id,
46
+ className: getClassName('bpk-modal__header-title'),
47
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
48
+ className: getClassName('bpk-modal__header-title-container'),
49
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
50
+ children: title
51
+ })
52
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
53
+ label: closeLabel,
54
+ onClick: onClose
55
+ })]
56
+ });
57
+ }
58
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
59
+ className: getClassName('bpk-modal__button-container'),
60
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
61
+ label: closeLabel,
62
+ onClick: onClose
63
+ })
64
+ });
65
+ };
37
66
  const Heading = (0, _bpkReactUtils.withDefaultProps)(_bpkComponentText.default, {
38
67
  textStyle: _bpkComponentText.TEXT_STYLES.label1,
39
68
  tagName: 'h2',
@@ -61,6 +90,7 @@ const BpkModalV2 = props => {
61
90
  noFullScreenOnMobile,
62
91
  onClose,
63
92
  padded,
93
+ showHeader = true,
64
94
  title,
65
95
  wide
66
96
  } = props;
@@ -91,12 +121,6 @@ const BpkModalV2 = props => {
91
121
  }, [id, isOpen]);
92
122
  const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
93
123
  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
94
- const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
95
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
96
- label: closeLabel,
97
- onClick: onClose
98
- })
99
- });
100
124
  return isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
101
125
  className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
102
126
  children: [!dialogSupported && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -110,17 +134,11 @@ const BpkModalV2 = props => {
110
134
  "aria-labelledby": ariaLabelledby,
111
135
  "data-open": isOpen,
112
136
  ref: ref,
113
- children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
114
- className: getClassName('bpk-modal__header-title'),
115
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
116
- className: getClassName('bpk-modal__header-title-container'),
117
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
118
- children: title
119
- })
120
- }), closeButton]
121
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
122
- className: getClassName('bpk-modal__button-container'),
123
- children: closeButton
137
+ children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
138
+ id: `${id}-title`,
139
+ title: title,
140
+ closeLabel: closeLabel,
141
+ onClose: onClose
124
142
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
125
143
  className: contentClassNames,
126
144
  children: children
package/bpk-component-overlay/index.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ /* @flow strict */
19
+
20
+ import BpkOverlay, {
21
+ OVERLAY_TYPES,
22
+ type Props as BpkOverlayProps,
23
+ } from './src/BpkOverlay';
24
+
25
+ export type { BpkOverlayProps };
26
+ export default BpkOverlay;
27
+ export { OVERLAY_TYPES };
package/bpk-component-overlay/index.js CHANGED
@@ -3,12 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "OVERLAY_LEVELS", {
7
- enumerable: true,
8
- get: function () {
9
- return _BpkOverlay.OVERLAY_LEVELS;
10
- }
11
- });
12
6
  Object.defineProperty(exports, "OVERLAY_TYPES", {
13
7
  enumerable: true,
14
8
  get: function () {
package/bpk-component-overlay/src/BpkOverlay.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import type { ComponentProps, ReactNode } from 'react';
20
+ export declare const OVERLAY_TYPES: {
21
+ readonly solidLow: "solidLow";
22
+ readonly solidMedium: "solidMedium";
23
+ readonly solidHigh: "solidHigh";
24
+ readonly topLow: "topLow";
25
+ readonly topMedium: "topMedium";
26
+ readonly topHigh: "topHigh";
27
+ readonly bottomLow: "bottomLow";
28
+ readonly bottomMedium: "bottomMedium";
29
+ readonly bottomHigh: "bottomHigh";
30
+ readonly leftLow: "leftLow";
31
+ readonly leftMedium: "leftMedium";
32
+ readonly leftHigh: "leftHigh";
33
+ readonly rightLow: "rightLow";
34
+ readonly rightMedium: "rightMedium";
35
+ readonly rightHigh: "rightHigh";
36
+ readonly vignette: "vignette";
37
+ readonly off: "off";
38
+ };
39
+ export type OverlayType = typeof OVERLAY_TYPES[keyof typeof OVERLAY_TYPES];
40
+ export type Props = ComponentProps<'div'> & {
41
+ children: ReactNode;
42
+ overlayType?: OverlayType;
43
+ className?: string;
44
+ foregroundContent?: ReactNode;
45
+ };
46
+ declare const BpkOverlay: (props: Props) => JSX.Element;
47
+ export default BpkOverlay;
package/bpk-component-overlay/src/BpkOverlay.js CHANGED
@@ -3,12 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.OVERLAY_TYPES = exports.OVERLAY_LEVELS = void 0;
7
- var _propTypes = _interopRequireDefault(require("prop-types"));
6
+ exports.default = exports.OVERLAY_TYPES = void 0;
8
7
  var _bpkReactUtils = require("../../bpk-react-utils");
9
8
  var _BpkOverlayModule = _interopRequireDefault(require("./BpkOverlay.module.css"));
10
9
  var _jsxRuntime = require("react/jsx-runtime");
11
- const _excluded = ["children", "className", "foregroundContent", "overlayLevel", "overlayType"];
10
+ const _excluded = ["children", "className", "foregroundContent", "overlayType"];
12
11
  /*
13
12
  * Backpack - Skyscanner's Design System
14
13
  *
@@ -36,57 +35,62 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
36
35
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
37
36
  const getClassName = (0, _bpkReactUtils.cssModules)(_BpkOverlayModule.default);
38
37
  const OVERLAY_TYPES = {
39
- solid: 'solid',
40
- top: 'top',
41
- bottom: 'bottom',
42
- left: 'left',
43
- right: 'right',
44
- vignette: 'vignette'
38
+ solidLow: 'solidLow',
39
+ solidMedium: 'solidMedium',
40
+ solidHigh: 'solidHigh',
41
+ topLow: 'topLow',
42
+ topMedium: 'topMedium',
43
+ topHigh: 'topHigh',
44
+ bottomLow: 'bottomLow',
45
+ bottomMedium: 'bottomMedium',
46
+ bottomHigh: 'bottomHigh',
47
+ leftLow: 'leftLow',
48
+ leftMedium: 'leftMedium',
49
+ leftHigh: 'leftHigh',
50
+ rightLow: 'rightLow',
51
+ rightMedium: 'rightMedium',
52
+ rightHigh: 'rightHigh',
53
+ vignette: 'vignette',
54
+ off: 'off'
45
55
  };
46
56
  exports.OVERLAY_TYPES = OVERLAY_TYPES;
47
- const OVERLAY_LEVELS = {
48
- low: 'low',
49
- medium: 'medium',
50
- high: 'high',
51
- off: 'off'
57
+ const overlayTypeClassSuffixes = {
58
+ [OVERLAY_TYPES.solidLow]: 'solid-low',
59
+ [OVERLAY_TYPES.solidMedium]: 'solid-medium',
60
+ [OVERLAY_TYPES.solidHigh]: 'solid-high',
61
+ [OVERLAY_TYPES.topLow]: 'top-low',
62
+ [OVERLAY_TYPES.topMedium]: 'top-medium',
63
+ [OVERLAY_TYPES.topHigh]: 'top-high',
64
+ [OVERLAY_TYPES.bottomLow]: 'bottom-low',
65
+ [OVERLAY_TYPES.bottomMedium]: 'bottom-medium',
66
+ [OVERLAY_TYPES.bottomHigh]: 'bottom-high',
67
+ [OVERLAY_TYPES.leftLow]: 'left-low',
68
+ [OVERLAY_TYPES.leftMedium]: 'left-medium',
69
+ [OVERLAY_TYPES.leftHigh]: 'left-high',
70
+ [OVERLAY_TYPES.rightLow]: 'right-low',
71
+ [OVERLAY_TYPES.rightMedium]: 'right-medium',
72
+ [OVERLAY_TYPES.rightHigh]: 'right-high',
73
+ [OVERLAY_TYPES.vignette]: 'vignette',
74
+ [OVERLAY_TYPES.off]: 'off'
52
75
  };
53
- exports.OVERLAY_LEVELS = OVERLAY_LEVELS;
54
76
  const BpkOverlay = props => {
55
77
  const {
56
78
  children,
57
- className,
58
- foregroundContent,
59
- overlayLevel,
60
- overlayType
79
+ className = null,
80
+ foregroundContent = null,
81
+ overlayType = OVERLAY_TYPES.solidLow
61
82
  } = props,
62
83
  rest = _objectWithoutProperties(props, _excluded);
63
84
  const wrapperClassNames = getClassName('bpk-overlay__wrapper', className);
64
- const overlayClassNames = getClassName('bpk-overlay__overlay', overlayType !== null && (overlayType !== OVERLAY_TYPES.vignette ? `bpk-overlay__overlay--${overlayType}-${overlayLevel}` : `bpk-overlay__overlay--${overlayType}`));
65
- return (
66
- /*#__PURE__*/
67
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
68
- (0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
69
- className: wrapperClassNames
70
- }, rest), {}, {
71
- children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
72
- className: overlayClassNames,
73
- children: foregroundContent
74
- })]
75
- }))
76
- );
77
- };
78
- BpkOverlay.propTypes = {
79
- children: _propTypes.default.node.isRequired,
80
- className: _propTypes.default.string,
81
- foregroundContent: _propTypes.default.node,
82
- overlayType: _propTypes.default.oneOf(Object.keys(OVERLAY_TYPES)),
83
- overlayLevel: _propTypes.default.oneOf(Object.keys(OVERLAY_LEVELS))
84
- };
85
- BpkOverlay.defaultProps = {
86
- className: null,
87
- foregroundContent: null,
88
- overlayType: OVERLAY_TYPES.solid,
89
- overlayLevel: OVERLAY_LEVELS.low
85
+ const overlayClassNames = getClassName('bpk-overlay__overlay', overlayType !== undefined && overlayType !== null && overlayType !== OVERLAY_TYPES.off && `bpk-overlay__overlay--${overlayTypeClassSuffixes[overlayType]}`);
86
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
87
+ className: wrapperClassNames
88
+ }, rest), {}, {
89
+ children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
90
+ className: overlayClassNames,
91
+ children: foregroundContent
92
+ })]
93
+ }));
90
94
  };
91
95
  var _default = BpkOverlay;
92
96
  exports.default = _default;
package/bpk-scrim-utils/index.d.ts CHANGED
@@ -20,254 +20,228 @@
20
20
  import withScrim from './src/withScrim';
21
21
  export { withScrim };
22
22
  declare const _default: {
23
- withScrim: <P extends {
24
- [rest: string]: any;
25
- onClose?: (() => void | null) | undefined;
26
- isIphone?: boolean | undefined;
27
- isIpad?: boolean | undefined;
28
- }>(WrappedComponent: string | import("react").ComponentType<P>) => {
29
- new (props: (P & {
30
- getApplicationElement: () => HTMLElement | null;
31
- containerClassName?: string | undefined;
32
- closeOnScrimClick?: boolean | undefined;
33
- } & {
23
+ withScrim: <P extends object>(WrappedComponent: string | import("react").ComponentType<P>) => {
24
+ new (props: ({
34
25
  [rest: string]: any;
26
+ getApplicationElement: () => HTMLElement | null;
35
27
  onClose?: (() => void | null) | undefined;
36
28
  isIphone?: boolean | undefined;
37
29
  isIpad?: boolean | undefined;
38
- }) | Readonly<P & {
39
- getApplicationElement: () => HTMLElement | null;
40
30
  containerClassName?: string | undefined;
41
31
  closeOnScrimClick?: boolean | undefined;
42
- } & {
32
+ } & Omit<P, "dialogRef">) | Readonly<{
43
33
  [rest: string]: any;
34
+ getApplicationElement: () => HTMLElement | null;
44
35
  onClose?: (() => void | null) | undefined;
45
36
  isIphone?: boolean | undefined;
46
37
  isIpad?: boolean | undefined;
47
- }>): {
48
- dialogElement?: import("react").RefObject<HTMLElement> | undefined;
38
+ containerClassName?: string | undefined;
39
+ closeOnScrimClick?: boolean | undefined;
40
+ } & Omit<P, "dialogRef">>): {
41
+ dialogElement?: HTMLElement | null | undefined;
49
42
  componentDidMount(): void;
50
43
  componentWillUnmount(): void;
51
- dialogRef: (ref: import("react").RefObject<HTMLElement>) => void;
44
+ dialogRef: (ref: HTMLElement | null | undefined) => void;
52
45
  render(): JSX.Element;
53
46
  context: any;
54
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & {
55
- getApplicationElement: () => HTMLElement | null;
56
- containerClassName?: string | undefined;
57
- closeOnScrimClick?: boolean | undefined;
58
- } & {
47
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
59
48
  [rest: string]: any;
49
+ getApplicationElement: () => HTMLElement | null;
60
50
  onClose?: (() => void | null) | undefined;
61
51
  isIphone?: boolean | undefined;
62
52
  isIpad?: boolean | undefined;
63
- }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
64
- forceUpdate(callback?: (() => void) | undefined): void;
65
- readonly props: Readonly<P & {
66
- getApplicationElement: () => HTMLElement | null;
67
53
  containerClassName?: string | undefined;
68
54
  closeOnScrimClick?: boolean | undefined;
69
- } & {
55
+ } & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
56
+ forceUpdate(callback?: (() => void) | undefined): void;
57
+ readonly props: Readonly<{
70
58
  [rest: string]: any;
59
+ getApplicationElement: () => HTMLElement | null;
71
60
  onClose?: (() => void | null) | undefined;
72
61
  isIphone?: boolean | undefined;
73
62
  isIpad?: boolean | undefined;
74
- }> & Readonly<{
63
+ containerClassName?: string | undefined;
64
+ closeOnScrimClick?: boolean | undefined;
65
+ } & Omit<P, "dialogRef">> & Readonly<{
75
66
  children?: import("react").ReactNode;
76
67
  }>;
77
68
  state: Readonly<{}>;
78
69
  refs: {
79
70
  [key: string]: import("react").ReactInstance;
80
71
  };
81
- shouldComponentUpdate?(nextProps: Readonly<P & {
82
- getApplicationElement: () => HTMLElement | null;
83
- containerClassName?: string | undefined;
84
- closeOnScrimClick?: boolean | undefined;
85
- } & {
72
+ shouldComponentUpdate?(nextProps: Readonly<{
86
73
  [rest: string]: any;
74
+ getApplicationElement: () => HTMLElement | null;
87
75
  onClose?: (() => void | null) | undefined;
88
76
  isIphone?: boolean | undefined;
89
77
  isIpad?: boolean | undefined;
90
- }>, nextState: Readonly<{}>, nextContext: any): boolean;
91
- componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
92
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & {
93
- getApplicationElement: () => HTMLElement | null;
94
78
  containerClassName?: string | undefined;
95
79
  closeOnScrimClick?: boolean | undefined;
96
- } & {
80
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
81
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
82
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{
97
83
  [rest: string]: any;
84
+ getApplicationElement: () => HTMLElement | null;
98
85
  onClose?: (() => void | null) | undefined;
99
86
  isIphone?: boolean | undefined;
100
87
  isIpad?: boolean | undefined;
101
- }>, prevState: Readonly<{}>): any;
102
- componentDidUpdate?(prevProps: Readonly<P & {
103
- getApplicationElement: () => HTMLElement | null;
104
88
  containerClassName?: string | undefined;
105
89
  closeOnScrimClick?: boolean | undefined;
106
- } & {
90
+ } & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
91
+ componentDidUpdate?(prevProps: Readonly<{
107
92
  [rest: string]: any;
93
+ getApplicationElement: () => HTMLElement | null;
108
94
  onClose?: (() => void | null) | undefined;
109
95
  isIphone?: boolean | undefined;
110
96
  isIpad?: boolean | undefined;
111
- }>, prevState: Readonly<{}>, snapshot?: any): void;
112
- componentWillMount?(): void;
113
- UNSAFE_componentWillMount?(): void;
114
- componentWillReceiveProps?(nextProps: Readonly<P & {
115
- getApplicationElement: () => HTMLElement | null;
116
97
  containerClassName?: string | undefined;
117
98
  closeOnScrimClick?: boolean | undefined;
118
- } & {
99
+ } & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
100
+ componentWillMount?(): void;
101
+ UNSAFE_componentWillMount?(): void;
102
+ componentWillReceiveProps?(nextProps: Readonly<{
119
103
  [rest: string]: any;
104
+ getApplicationElement: () => HTMLElement | null;
120
105
  onClose?: (() => void | null) | undefined;
121
106
  isIphone?: boolean | undefined;
122
107
  isIpad?: boolean | undefined;
123
- }>, nextContext: any): void;
124
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & {
125
- getApplicationElement: () => HTMLElement | null;
126
108
  containerClassName?: string | undefined;
127
109
  closeOnScrimClick?: boolean | undefined;
128
- } & {
110
+ } & Omit<P, "dialogRef">>, nextContext: any): void;
111
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
129
112
  [rest: string]: any;
113
+ getApplicationElement: () => HTMLElement | null;
130
114
  onClose?: (() => void | null) | undefined;
131
115
  isIphone?: boolean | undefined;
132
116
  isIpad?: boolean | undefined;
133
- }>, nextContext: any): void;
134
- componentWillUpdate?(nextProps: Readonly<P & {
135
- getApplicationElement: () => HTMLElement | null;
136
117
  containerClassName?: string | undefined;
137
118
  closeOnScrimClick?: boolean | undefined;
138
- } & {
119
+ } & Omit<P, "dialogRef">>, nextContext: any): void;
120
+ componentWillUpdate?(nextProps: Readonly<{
139
121
  [rest: string]: any;
122
+ getApplicationElement: () => HTMLElement | null;
140
123
  onClose?: (() => void | null) | undefined;
141
124
  isIphone?: boolean | undefined;
142
125
  isIpad?: boolean | undefined;
143
- }>, nextState: Readonly<{}>, nextContext: any): void;
144
- UNSAFE_componentWillUpdate?(nextProps: Readonly<P & {
145
- getApplicationElement: () => HTMLElement | null;
146
126
  containerClassName?: string | undefined;
147
127
  closeOnScrimClick?: boolean | undefined;
148
- } & {
128
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
129
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<{
149
130
  [rest: string]: any;
131
+ getApplicationElement: () => HTMLElement | null;
150
132
  onClose?: (() => void | null) | undefined;
151
133
  isIphone?: boolean | undefined;
152
134
  isIpad?: boolean | undefined;
153
- }>, nextState: Readonly<{}>, nextContext: any): void;
135
+ containerClassName?: string | undefined;
136
+ closeOnScrimClick?: boolean | undefined;
137
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
154
138
  };
155
- new (props: P & {
156
- getApplicationElement: () => HTMLElement | null;
157
- containerClassName?: string | undefined;
158
- closeOnScrimClick?: boolean | undefined;
159
- } & {
139
+ new (props: {
160
140
  [rest: string]: any;
141
+ getApplicationElement: () => HTMLElement | null;
161
142
  onClose?: (() => void | null) | undefined;
162
143
  isIphone?: boolean | undefined;
163
144
  isIpad?: boolean | undefined;
164
- }, context: any): {
165
- dialogElement?: import("react").RefObject<HTMLElement> | undefined;
145
+ containerClassName?: string | undefined;
146
+ closeOnScrimClick?: boolean | undefined;
147
+ } & Omit<P, "dialogRef">, context: any): {
148
+ dialogElement?: HTMLElement | null | undefined;
166
149
  componentDidMount(): void;
167
150
  componentWillUnmount(): void;
168
- dialogRef: (ref: import("react").RefObject<HTMLElement>) => void;
151
+ dialogRef: (ref: HTMLElement | null | undefined) => void;
169
152
  render(): JSX.Element;
170
153
  context: any;
171
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & {
172
- getApplicationElement: () => HTMLElement | null;
173
- containerClassName?: string | undefined;
174
- closeOnScrimClick?: boolean | undefined;
175
- } & {
154
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
176
155
  [rest: string]: any;
156
+ getApplicationElement: () => HTMLElement | null;
177
157
  onClose?: (() => void | null) | undefined;
178
158
  isIphone?: boolean | undefined;
179
159
  isIpad?: boolean | undefined;
180
- }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
181
- forceUpdate(callback?: (() => void) | undefined): void;
182
- readonly props: Readonly<P & {
183
- getApplicationElement: () => HTMLElement | null;
184
160
  containerClassName?: string | undefined;
185
161
  closeOnScrimClick?: boolean | undefined;
186
- } & {
162
+ } & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
163
+ forceUpdate(callback?: (() => void) | undefined): void;
164
+ readonly props: Readonly<{
187
165
  [rest: string]: any;
166
+ getApplicationElement: () => HTMLElement | null;
188
167
  onClose?: (() => void | null) | undefined;
189
168
  isIphone?: boolean | undefined;
190
169
  isIpad?: boolean | undefined;
191
- }> & Readonly<{
170
+ containerClassName?: string | undefined;
171
+ closeOnScrimClick?: boolean | undefined;
172
+ } & Omit<P, "dialogRef">> & Readonly<{
192
173
  children?: import("react").ReactNode;
193
174
  }>;
194
175
  state: Readonly<{}>;
195
176
  refs: {
196
177
  [key: string]: import("react").ReactInstance;
197
178
  };
198
- shouldComponentUpdate?(nextProps: Readonly<P & {
199
- getApplicationElement: () => HTMLElement | null;
200
- containerClassName?: string | undefined;
201
- closeOnScrimClick?: boolean | undefined;
202
- } & {
179
+ shouldComponentUpdate?(nextProps: Readonly<{
203
180
  [rest: string]: any;
181
+ getApplicationElement: () => HTMLElement | null;
204
182
  onClose?: (() => void | null) | undefined;
205
183
  isIphone?: boolean | undefined;
206
184
  isIpad?: boolean | undefined;
207
- }>, nextState: Readonly<{}>, nextContext: any): boolean;
208
- componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
209
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & {
210
- getApplicationElement: () => HTMLElement | null;
211
185
  containerClassName?: string | undefined;
212
186
  closeOnScrimClick?: boolean | undefined;
213
- } & {
187
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
188
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
189
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{
214
190
  [rest: string]: any;
191
+ getApplicationElement: () => HTMLElement | null;
215
192
  onClose?: (() => void | null) | undefined;
216
193
  isIphone?: boolean | undefined;
217
194
  isIpad?: boolean | undefined;
218
- }>, prevState: Readonly<{}>): any;
219
- componentDidUpdate?(prevProps: Readonly<P & {
220
- getApplicationElement: () => HTMLElement | null;
221
195
  containerClassName?: string | undefined;
222
196
  closeOnScrimClick?: boolean | undefined;
223
- } & {
197
+ } & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
198
+ componentDidUpdate?(prevProps: Readonly<{
224
199
  [rest: string]: any;
200
+ getApplicationElement: () => HTMLElement | null;
225
201
  onClose?: (() => void | null) | undefined;
226
202
  isIphone?: boolean | undefined;
227
203
  isIpad?: boolean | undefined;
228
- }>, prevState: Readonly<{}>, snapshot?: any): void;
229
- componentWillMount?(): void;
230
- UNSAFE_componentWillMount?(): void;
231
- componentWillReceiveProps?(nextProps: Readonly<P & {
232
- getApplicationElement: () => HTMLElement | null;
233
204
  containerClassName?: string | undefined;
234
205
  closeOnScrimClick?: boolean | undefined;
235
- } & {
206
+ } & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
207
+ componentWillMount?(): void;
208
+ UNSAFE_componentWillMount?(): void;
209
+ componentWillReceiveProps?(nextProps: Readonly<{
236
210
  [rest: string]: any;
211
+ getApplicationElement: () => HTMLElement | null;
237
212
  onClose?: (() => void | null) | undefined;
238
213
  isIphone?: boolean | undefined;
239
214
  isIpad?: boolean | undefined;
240
- }>, nextContext: any): void;
241
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & {
242
- getApplicationElement: () => HTMLElement | null;
243
215
  containerClassName?: string | undefined;
244
216
  closeOnScrimClick?: boolean | undefined;
245
- } & {
217
+ } & Omit<P, "dialogRef">>, nextContext: any): void;
218
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
246
219
  [rest: string]: any;
220
+ getApplicationElement: () => HTMLElement | null;
247
221
  onClose?: (() => void | null) | undefined;
248
222
  isIphone?: boolean | undefined;
249
223
  isIpad?: boolean | undefined;
250
- }>, nextContext: any): void;
251
- componentWillUpdate?(nextProps: Readonly<P & {
252
- getApplicationElement: () => HTMLElement | null;
253
224
  containerClassName?: string | undefined;
254
225
  closeOnScrimClick?: boolean | undefined;
255
- } & {
226
+ } & Omit<P, "dialogRef">>, nextContext: any): void;
227
+ componentWillUpdate?(nextProps: Readonly<{
256
228
  [rest: string]: any;
229
+ getApplicationElement: () => HTMLElement | null;
257
230
  onClose?: (() => void | null) | undefined;
258
231
  isIphone?: boolean | undefined;
259
232
  isIpad?: boolean | undefined;
260
- }>, nextState: Readonly<{}>, nextContext: any): void;
261
- UNSAFE_componentWillUpdate?(nextProps: Readonly<P & {
262
- getApplicationElement: () => HTMLElement | null;
263
233
  containerClassName?: string | undefined;
264
234
  closeOnScrimClick?: boolean | undefined;
265
- } & {
235
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
236
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<{
266
237
  [rest: string]: any;
238
+ getApplicationElement: () => HTMLElement | null;
267
239
  onClose?: (() => void | null) | undefined;
268
240
  isIphone?: boolean | undefined;
269
241
  isIpad?: boolean | undefined;
270
- }>, nextState: Readonly<{}>, nextContext: any): void;
242
+ containerClassName?: string | undefined;
243
+ closeOnScrimClick?: boolean | undefined;
244
+ } & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
271
245
  };
272
246
  displayName: string;
273
247
  defaultProps: {
package/bpk-scrim-utils/src/withScrim.d.ts CHANGED
@@ -16,72 +16,70 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import type { ComponentType, RefObject } from 'react';
20
- type BaseProps = {
19
+ import type { ComponentType } from 'react';
20
+ type Props = {
21
+ getApplicationElement: () => HTMLElement | null;
21
22
  onClose?: () => void | null;
22
23
  isIphone?: boolean;
23
24
  isIpad?: boolean;
24
- [rest: string]: any;
25
- };
26
- type HOCProps = {
27
- getApplicationElement: () => HTMLElement | null;
28
25
  containerClassName?: string;
29
26
  closeOnScrimClick?: boolean;
27
+ [rest: string]: any;
30
28
  };
31
- declare const withScrim: <P extends BaseProps>(WrappedComponent: string | ComponentType<P>) => {
32
- new (props: (P & HOCProps & BaseProps) | Readonly<P & HOCProps & BaseProps>): {
33
- dialogElement?: RefObject<HTMLElement> | undefined;
29
+ declare const withScrim: <P extends object>(WrappedComponent: string | ComponentType<P>) => {
30
+ new (props: (Props & Omit<P, "dialogRef">) | Readonly<Props & Omit<P, "dialogRef">>): {
31
+ dialogElement?: HTMLElement | null | undefined;
34
32
  componentDidMount(): void;
35
33
  componentWillUnmount(): void;
36
- dialogRef: (ref: RefObject<HTMLElement>) => void;
34
+ dialogRef: (ref: HTMLElement | null | undefined) => void;
37
35
  render(): JSX.Element;
38
36
  context: any;
39
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & HOCProps & BaseProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
37
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
40
38
  forceUpdate(callback?: (() => void) | undefined): void;
41
- readonly props: Readonly<P & HOCProps & BaseProps> & Readonly<{
39
+ readonly props: Readonly<Props & Omit<P, "dialogRef">> & Readonly<{
42
40
  children?: import("react").ReactNode;
43
41
  }>;
44
42
  state: Readonly<{}>;
45
43
  refs: {
46
44
  [key: string]: import("react").ReactInstance;
47
45
  };
48
- shouldComponentUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): boolean;
46
+ shouldComponentUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
49
47
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
50
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & HOCProps & BaseProps>, prevState: Readonly<{}>): any;
51
- componentDidUpdate?(prevProps: Readonly<P & HOCProps & BaseProps>, prevState: Readonly<{}>, snapshot?: any): void;
48
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
49
+ componentDidUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
52
50
  componentWillMount?(): void;
53
51
  UNSAFE_componentWillMount?(): void;
54
- componentWillReceiveProps?(nextProps: Readonly<P & HOCProps & BaseProps>, nextContext: any): void;
55
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & HOCProps & BaseProps>, nextContext: any): void;
56
- componentWillUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): void;
57
- UNSAFE_componentWillUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): void;
52
+ componentWillReceiveProps?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextContext: any): void;
53
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextContext: any): void;
54
+ componentWillUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
55
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
58
56
  };
59
- new (props: P & HOCProps & BaseProps, context: any): {
60
- dialogElement?: RefObject<HTMLElement> | undefined;
57
+ new (props: Props & Omit<P, "dialogRef">, context: any): {
58
+ dialogElement?: HTMLElement | null | undefined;
61
59
  componentDidMount(): void;
62
60
  componentWillUnmount(): void;
63
- dialogRef: (ref: RefObject<HTMLElement>) => void;
61
+ dialogRef: (ref: HTMLElement | null | undefined) => void;
64
62
  render(): JSX.Element;
65
63
  context: any;
66
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & HOCProps & BaseProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
64
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Props & Omit<P, "dialogRef">>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
67
65
  forceUpdate(callback?: (() => void) | undefined): void;
68
- readonly props: Readonly<P & HOCProps & BaseProps> & Readonly<{
66
+ readonly props: Readonly<Props & Omit<P, "dialogRef">> & Readonly<{
69
67
  children?: import("react").ReactNode;
70
68
  }>;
71
69
  state: Readonly<{}>;
72
70
  refs: {
73
71
  [key: string]: import("react").ReactInstance;
74
72
  };
75
- shouldComponentUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): boolean;
73
+ shouldComponentUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): boolean;
76
74
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
77
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & HOCProps & BaseProps>, prevState: Readonly<{}>): any;
78
- componentDidUpdate?(prevProps: Readonly<P & HOCProps & BaseProps>, prevState: Readonly<{}>, snapshot?: any): void;
75
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>): any;
76
+ componentDidUpdate?(prevProps: Readonly<Props & Omit<P, "dialogRef">>, prevState: Readonly<{}>, snapshot?: any): void;
79
77
  componentWillMount?(): void;
80
78
  UNSAFE_componentWillMount?(): void;
81
- componentWillReceiveProps?(nextProps: Readonly<P & HOCProps & BaseProps>, nextContext: any): void;
82
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & HOCProps & BaseProps>, nextContext: any): void;
83
- componentWillUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): void;
84
- UNSAFE_componentWillUpdate?(nextProps: Readonly<P & HOCProps & BaseProps>, nextState: Readonly<{}>, nextContext: any): void;
79
+ componentWillReceiveProps?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextContext: any): void;
80
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextContext: any): void;
81
+ componentWillUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
82
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
85
83
  };
86
84
  displayName: string;
87
85
  defaultProps: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "24.0.0",
3
+ "version": "25.0.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",