@skyscanner/backpack-web 33.0.0-beta.1 → 33.1.0

package/bpk-react-utils/index.d.ts

@@ -25,7 +25,8 @@ import deprecated from './src/deprecated';
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection';
 import withDefaultProps from './src/withDefaultProps';
 import isRTL from './src/isRTL';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, };
+import{ BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper';
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -54,5 +55,39 @@ declare const _default: {
     isDeviceIpad: () => boolean;
     isDeviceIos: () => boolean;
     isRTL: () => boolean;
+    BpkDialogWrapper: ({
+      ariaLabelledby,
+      children,
+      closeOnEscPressed,
+      closeOnScrimClick,
+      dialogClassName,
+      exiting,
+      id,
+      isOpen,
+      onClose,
+      timeout,
+      transitionClassNames
+    }: {
+      ariaLabelledby: string;
+      children: import("react").ReactNode;
+      closeOnEscPressed?: boolean;
+      closeOnScrimClick?: boolean;
+      dialogClassName?: string;
+      id: string | undefined;
+      isOpen: boolean;
+      onClose: (
+        arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
+        arg1?: {
+          source: 'ESCAPE' | 'DOCUMENT_CLICK';
+        },
+    ) => void | null;
+      exiting?: boolean;
+      transitionClassNames?: {
+        appear?: string,
+        appearActive?: string,
+        exit?: string
+      };
+      timeout?: {appear?: number, exit?: number};
+    }) => JSX.Element;
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -25,7 +25,8 @@ import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
 import withDefaultProps from "./src/withDefaultProps";
 import isRTL from "./src/isRTL";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL };
+import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 export default {
   Portal,
   TransitionInitialMount,
@@ -36,5 +37,6 @@ export default {
   isDeviceIphone,
   isDeviceIpad,
   isDeviceIos,
-  isRTL
+  isRTL,
+  BpkDialogWrapper
 };

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -0,0 +1,144 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import CSSTransition from 'react-transition-group/CSSTransition';
+import cssModules from "../cssModules";
+import STYLES from "./BpkDialogWrapper.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+;
+// TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
+const dialogSupported = typeof HTMLDialogElement === 'function';
+const setPageProperties = ({
+  isDialogOpen
+}) => {
+  document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
+  if (!dialogSupported) {
+    document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
+    document.body.style.width = isDialogOpen ? '100%' : 'auto';
+  }
+};
+export const BpkDialogWrapper = props => {
+  const {
+    ariaLabelledby,
+    children,
+    closeOnEscPressed = false,
+    closeOnScrimClick = false,
+    dialogClassName = '',
+    exiting = false,
+    id,
+    isOpen,
+    onClose,
+    timeout = {
+      appear: 0,
+      exit: 0
+    },
+    transitionClassNames = {}
+  } = props;
+  const ref = useRef(null);
+  const [dialogTarget, setDialogTarget] = useState(null);
+  useEffect(() => {
+    const dialog = document.getElementById(`${id}`);
+    const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
+    const handleBackdropClick = modal => {
+      if (closeOnScrimClick && modal) {
+        modal.addEventListener('click', event => {
+          const {
+            target
+          } = event;
+          if (target === modal) {
+            onClose(event, {
+              source: "DOCUMENT_CLICK"
+            });
+            event.stopPropagation();
+          }
+        });
+      }
+    };
+    const handleKeyDown = event => {
+      if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
+        onClose(event, {
+          source: "ESCAPE"
+        });
+      }
+      event.stopPropagation();
+    };
+    if (isOpen) {
+      // There is a bug on older versions of browser using chromium (chrome, firefox, edge >114) where the dialog got an open attribute even before it is opened.
+      // Therefore, when trying to open it, it crashes and log an error mentioning the dialog has already an open attribute.
+      ref.current?.removeAttribute('open');
+      ref.current?.showModal?.();
+      if (dialogWithPolyfill) {
+        setDialogTarget(dialogWithPolyfill);
+        handleBackdropClick(dialogWithPolyfill);
+        window.addEventListener('keydown', handleKeyDown);
+      } else {
+        setDialogTarget(dialog);
+      }
+      handleBackdropClick(dialog);
+    } else {
+      ref.current?.close?.();
+    }
+    setPageProperties({
+      isDialogOpen: isOpen
+    });
+    return () => {
+      setPageProperties({
+        isDialogOpen: false
+      });
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
+  return isOpen ? /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-dialog-wrapper', !dialogSupported && 'bpk-dialog-wrapper--polyfill'),
+    children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
+      id: `${id}-polyfill`,
+      className: getClassName('bpk-dialog-wrapper--backdrop'),
+      "data-open": isOpen
+    }), /*#__PURE__*/_jsx(CSSTransition, {
+      classNames: transitionClassNames,
+      in: !exiting,
+      appear: !exiting,
+      exit: exiting,
+      timeout: timeout,
+      children: /*#__PURE__*/_jsx("dialog", {
+        id: id,
+        className: getClassName('bpk-dialog-wrapper--container', dialogClassName),
+        onCancel: e => {
+          e.preventDefault();
+          if (closeOnEscPressed && (!dialogTarget || e.target === dialogTarget)) {
+            onClose(e, {
+              source: 'ESCAPE'
+            });
+          }
+        },
+        "aria-labelledby": ariaLabelledby,
+        "data-open": isOpen,
+        ref: ref,
+        children: /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-dialog-wrapper--contents'),
+          id: `${id}-contents`,
+          children: children
+        })
+      })
+    })]
+  }) : null;
+};

package/bpk-react-utils/src/BpkDialogWrapper.d.ts

@@ -0,0 +1,45 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ReactNode } from 'react';
+import type {Props as DialogWrapperProps} from './BpkDialogWrapper';
+export type Props = Partial<DialogWrapperProps> & {
+  ariaLabelledby: string;
+  children: ReactNode;
+  closeOnEscPressed?: boolean;
+  closeOnScrimClick?: boolean;
+  dialogClassName?: string;
+  id: string | undefined;
+  isOpen: boolean;
+  onClose: (
+    arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
+    arg1?: {
+      source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    },
+  ) => void | null;
+  exiting?: boolean;
+  transitionClassNames?: {
+    appear?: string,
+    appearActive?: string,
+    exit?: string
+  };
+  timeout?: {appear?: number, exit?: number};
+}
+
+declare const BpkDialogWrapper: ({ariaLabelledby, children, closeOnEscPressed, closeOnScrimClick, dialogClassName, id, isOpen, onClose, exiting, transitionClassNames, timeout}: Props) => JSX.Element;
+export default BpkDialogWrapper;

package/bpk-react-utils/src/BpkDialogWrapper.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@keyframes bpk-dialog-wrapper-scrim{0%{opacity:0}100%{opacity:1}}.bpk-dialog-wrapper--container{padding:0;border:none}.bpk-dialog-wrapper--container::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 400ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-dialog-wrapper-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--contents{min-height:100%;padding:0}

package/bpk-react-utils/src/Portal.js

@@ -18,7 +18,6 @@
 
 import { Component } from 'react';
 import { createPortal } from 'react-dom';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-scrim-utils/src/withScrim.js

@@ -16,12 +16,11 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusScope from 'a11y-focus-scope';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusStore from 'a11y-focus-store';
+import { Component } from 'react';
 import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../../bpk-react-utils";
 import BpkScrim from "./BpkScrim";
 import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";

package/bpk-stylesheets/base.css

@@ -16,4 +16,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body &.scaffold-font-size{font-size:13px}body &.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}

package/bpk-stylesheets/index.js

@@ -27,7 +27,7 @@ import './index.scss';
 
   // touch support
   classNames.push(
-    'ontouchstart' in window ||  
+    'ontouchstart' in window ||
       (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
       ? 'touch-support'
       : 'no-touch-support',
@@ -35,7 +35,7 @@ import './index.scss';
 
   // add more feature tests here...
 
-   
+
   document.documentElement.className += ` ${classNames
     .map((className) => `bpk-${className}`)
     .join(' ')}`;

package/bpk-stylesheets/index.scss

@@ -15,17 +15,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* stylelint-disable at-rule-disallowed-list, scss/at-import-partial-extension */
-
-@use '../bpk-mixins/tokens';
-@use '../bpk-mixins/utils';
-
+/* stylelint-disable at-rule-disallowed-list */
+// stylelint-disable-next-line scss/at-import-partial-extension
 @import './normalize';
+@import '../bpk-mixins/tokens.scss';
+@import '../bpk-mixins/utils.scss';
 
 // stylelint-disable-next-line selector-max-type
 html {
-  font-size: tokens.$bpk-font-size-root;
+  font-size: $bpk-font-size-root;
   box-sizing: border-box;
 }
 
@@ -40,45 +38,45 @@ html {
 
 /* stylelint-disable selector-class-pattern */
 body {
-  color: tokens.$bpk-font-color-base;
-  font-family: tokens.$bpk-font-family-base;
-  font-size: tokens.$bpk-font-size-base;
+  color: $bpk-font-color-base;
+  font-family: $bpk-font-family-base;
+  font-size: $bpk-font-size-base;
   line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+}
 
-  :global(&.scaffold-font-size) {
-    font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
-  }
+:global(body.scaffold-font-size) {
+  font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
+}
 
-  :global(&.enable-font-smoothing) {
-    -webkit-font-smoothing: antialiased;
-  }
+:global(body.enable-font-smoothing) {
+  -webkit-font-smoothing: antialiased;
 }
 
 :focus-visible {
-  @include utils.bpk-focus-indicator;
+  @include bpk-focus-indicator;
 }
 
 :global(.hidden),
 :global(.hide) {
-  @include utils.bpk-hidden;
+  @include bpk-hidden;
 }
 
 :global(.visuallyhidden),
 :global(.visually-hidden) {
-  @include utils.bpk-visually-hidden;
+  @include bpk-visually-hidden;
 }
 
 :global(.visuallyhidden.focusable),
 :global(.visually-hidden.focusable) {
-  @include utils.bpk-visually-hidden--focusable;
+  @include bpk-visually-hidden--focusable;
 }
 
 :global(.invisible) {
-  @include utils.bpk-invisible;
+  @include bpk-invisible;
 }
 
 :global(.clearfix) {
-  @include utils.bpk-clearfix;
+  @include bpk-clearfix;
 }
 /* stylelint-enable selector-class-pattern */
 /* stylelint-enable at-rule-disallowed-list */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.0.0-beta.1",
+  "version": "33.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
-    "date-fns": "^2.21.1",
+    "date-fns": "^3.3.1",
     "intersection-observer": "^0.7.0",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",
@@ -42,7 +42,7 @@
     "react-responsive": "^9.0.2",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
-    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "^1.8.7"
   },
   "peerDependencies": {

package/unstable__bpk-mixins/_buttons.scss

@@ -566,3 +566,18 @@
     color: tokens.$bpk-text-disabled-day;
   }
 }
+
+/// Full width button. Modifies the bpk-button to horizontally fill its container
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--full-width();
+///   }
+
+@mixin bpk-button--full-width {
+  display: block;
+  width: 100%;
+}

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js

@@ -1,96 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import CSSTransition from 'react-transition-group/CSSTransition';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from "../../bpk-component-link";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkCloseButton from "../../bpk-component-close-button";
-import BpkNavigationBar from "../../bpk-component-navigation-bar";
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkBottomSheetInner.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkBottomSheetInner = ({
-  actionText = '',
-  children,
-  closeLabel = '',
-  dialogRef,
-  exiting,
-  id,
-  onAction = () => null,
-  onClose,
-  title = '',
-  wide = false
-}) => {
-  const classNames = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
-  const headingId = `bpk-bottom-sheet-heading-${id}`;
-  return /*#__PURE__*/_jsx(CSSTransition, {
-    classNames: {
-      appear: getClassName('bpk-bottom-sheet--appear'),
-      appearActive: getClassName('bpk-bottom-sheet--appear-active'),
-      exit: getClassName('bpk-bottom-sheet--exit')
-    },
-    in: !exiting,
-    appear: !exiting,
-    exit: exiting,
-    timeout: {
-      appear: 240,
-      exit: 240
-    },
-    children: /*#__PURE__*/_jsxs("section", {
-      id: id,
-      tabIndex: -1,
-      role: "dialog",
-      "aria-labelledby": headingId,
-      className: classNames,
-      ref: dialogRef,
-      children: [/*#__PURE__*/_jsx("header", {
-        className: getClassName('bpk-bottom-sheet--header'),
-        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
-          id: headingId,
-          className: getClassName('bpk-bottom-sheet--navigation'),
-          title: title && /*#__PURE__*/_jsx("h2", {
-            id: headingId,
-            className: getClassName('bpk-bottom-sheet--heading'),
-            children: title
-          }),
-          leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
-            className: getClassName('bpk-bottom-sheet--close-button'),
-            label: closeLabel,
-            onClick: onClose
-          }),
-          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
-            className: getClassName('bpk-bottom-sheet--action-button'),
-            onClick: onAction,
-            children: actionText
-          }) : /*#__PURE__*/_jsx("div", {
-            className: getClassName('bpk-bottom-sheet--action-button')
-          })
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: getClassName('bpk-bottom-sheet--content'),
-        children: children
-      })]
-    })
-  });
-};
-export default BpkBottomSheetInner;

package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css

@@ -1,18 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- * 
- * Copyright 2016 Skyscanner Ltd
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc(100% - ((3rem)*2 + 0.125rem));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir=rtl] .bpk-bottom-sheet--close-button{right:auto;margin-right:.125rem;margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:.125rem;margin-left:.25rem;word-break:break-all}html[dir=rtl] .bpk-bottom-sheet--action-button{left:auto;margin-right:.25rem;margin-left:.125rem}

package/bpk-component-flare/src/corner-radius.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;