@skyscanner/backpack-web 35.7.0 → 36.1.0

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

package/bpk-component-card/src/BpkDividedCard.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-divided-card--content{display:flex;height:100%;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex;min-width:15rem;max-width:45rem}.bpk-divided-card--horizontal-container{display:flex;min-width:45.0625rem;min-height:18.25rem}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{width:13.5rem;border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}
+.bpk-divided-card--content{display:flex;align-items:stretch}.bpk-divided-card--vertical-content{flex-direction:column}.bpk-divided-card--vertical-container{display:flex}.bpk-divided-card--horizontal-container{display:flex}.bpk-divided-card__primary--horizontal{flex:1}.bpk-divided-card__secondary--vertical{border-top:solid .0625rem #c1c7cf}.bpk-divided-card__secondary--horizontal{border-left:solid .0625rem #c1c7cf}html[dir=rtl] .bpk-divided-card__secondary--horizontal{border-right:solid .0625rem #c1c7cf;border-left:unset}

package/bpk-component-drawer/index.d.ts

@@ -0,0 +1,6 @@
+import BpkDrawer from './src/BpkDrawer';
+import themeAttributes from './src/themeAttributes';
+import type { Props } from './src/BpkDrawer';
+export type BpkDrawerProps = Props;
+export default BpkDrawer;
+export { themeAttributes };

package/bpk-component-drawer/src/BpkDrawer.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    id: string;
+    children: ReactNode;
+    isOpen: boolean;
+    onClose?: (arg0?: TouchEvent | MouseEvent | KeyboardEvent, arg1?: {
+        source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    }) => void;
+    title: string;
+    getApplicationElement: () => HTMLElement | null;
+    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    dialogRef?: (ref: HTMLElement | null | undefined) => void;
+    className?: string;
+    contentClassName?: string;
+    closeLabel?: string | null;
+    closeText?: string;
+    hideTitle?: boolean;
+    isIphone?: boolean;
+    padded?: boolean;
+    mobileModalDisplay?: boolean;
+};
+declare const BpkDrawer: ({ children, className, closeLabel, closeText, contentClassName, dialogRef, getApplicationElement, hideTitle, id, isIphone, isOpen, mobileModalDisplay, onClose, padded, renderTarget, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawer.js

@@ -14,85 +14,70 @@
  * 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 PropTypes from 'prop-types';
-import { Component } from 'react';
-import { Portal } from "../../bpk-react-utils";
+ */import { useState, useEffect } from 'react';
+import { Portal, isDeviceIphone } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
-class BpkDrawer extends Component {
-  constructor() {
-    super();
-    this.state = {
-      isDrawerShown: true
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.isOpen && nextProps.isOpen) {
-      this.setState({
-        isDrawerShown: true
-      });
+const BpkDrawer = ({
+  children,
+  className = undefined,
+  closeLabel = null,
+  closeText = undefined,
+  contentClassName = undefined,
+  dialogRef,
+  getApplicationElement,
+  hideTitle = false,
+  id,
+  isIphone = isDeviceIphone(),
+  isOpen,
+  mobileModalDisplay = false,
+  onClose,
+  padded = true,
+  renderTarget = null,
+  title
+}) => {
+  const [isDrawerShown, setIsDrawerShown] = useState(true);
+  useEffect(() => {
+    if (isOpen) {
+      setIsDrawerShown(true);
+    }
+  }, [isOpen]);
+  const onCloseAnimationComplete = () => {
+    if (onClose) {
+      onClose();
     }
-  }
-  onCloseAnimationComplete = () => {
-    this.props.onClose();
   };
-  hide = () => {
-    this.setState({
-      isDrawerShown: false
-    });
+  const hide = () => {
+    setIsDrawerShown(false);
   };
-  render() {
-    const {
-      isOpen,
-      onClose,
-      renderTarget,
-      ...rest
-    } = this.props;
-    const {
-      isDrawerShown
-    } = this.state;
-    return /*#__PURE__*/_jsx(Portal, {
-      isOpen: isOpen,
-      onClose: this.hide,
-      renderTarget: renderTarget,
-      children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
-        isDrawerShown: isDrawerShown,
-        onClose: this.hide,
-        onCloseAnimationComplete: this.onCloseAnimationComplete,
-        ...rest
-      })
-    });
-  }
-}
-BpkDrawer.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  /**
-   * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
-   * the root element for your application is by returning it's DOM node via the function passed to the
-   * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-   */
-  getApplicationElement: PropTypes.func.isRequired,
-  renderTarget: PropTypes.func,
-  dialogRef: PropTypes.func,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  hideTitle: PropTypes.bool
-};
-BpkDrawer.defaultProps = {
-  renderTarget: null,
-  className: null,
-  contentClassName: null,
-  closeLabel: null,
-  closeText: null,
-  hideTitle: false,
-  padded: true
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: hide,
+    renderTarget: renderTarget,
+    children: /*#__PURE__*/_jsx(BpkScrimDrawerContent, {
+      id: id,
+      title: title,
+      dialogRef: dialogRef,
+      closeLabel: closeLabel || "",
+      closeText: closeText
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
+      className: className,
+      contentClassName: contentClassName,
+      getApplicationElement: getApplicationElement,
+      hideTitle: hideTitle,
+      isDrawerShown: isDrawerShown,
+      onClose: hide,
+      onCloseAnimationComplete: onCloseAnimationComplete,
+      closeOnScrimClick: true,
+      isIpad: true,
+      isIphone: isIphone,
+      padded: padded,
+      mobileModalDisplay: mobileModalDisplay,
+      children: children
+    })
+  });
 };
 export default BpkDrawer;

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -1,12 +1,12 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
     children: ReactNode;
-    dialogRef: () => React.RefObject<HTMLElement>;
+    dialogRef: () => RefObject<HTMLElement>;
     onCloseAnimationComplete: () => void;
     onClose: () => void;
     id: string;
     title: string;
-    className?: string;
+    className?: string | null;
     contentClassName?: string;
     closeLabel?: string;
     closeText?: string;
@@ -16,6 +16,7 @@ type Props = {
     isIphone?: boolean;
     isIpad?: boolean;
     padded?: boolean;
+    mobileModalDisplay?: boolean;
 };
-declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkDrawerContent: ({ children, className, closeLabel, closeOnScrimClick, closeText, contentClassName, dialogRef, hideTitle, id, isDrawerShown, isIpad, isIphone, mobileModalDisplay, onClose, onCloseAnimationComplete, padded, title, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkDrawerContent;

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Transition from 'react-transition-group/Transition';
+import { Transition } from 'react-transition-group';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -44,6 +43,7 @@ const BpkDrawerContent = ({
   // Unused from withScrim scrim HOC
   isIphone = false,
   // Unused from withScrim scrim HOC
+  mobileModalDisplay = false,
   onClose,
   onCloseAnimationComplete,
   padded,
@@ -81,7 +81,7 @@ const BpkDrawerContent = ({
       tabIndex: -1,
       role: "dialog",
       "aria-labelledby": headingId,
-      className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`)].join(' '),
+      className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`, mobileModalDisplay ? `bpk-drawer__modal-mobile-view--${status}` : undefined)].join(' '),
       ref: dialogRef,
       ...rest,
       children: [/*#__PURE__*/_jsxs("header", {

package/bpk-component-drawer/src/BpkDrawerContent.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}
+.bpk-drawer{position:fixed;right:0;display:flex;z-index:1100;width:90%;max-width:25rem;height:100%;flex-direction:column;transform:translate(100%);transition:transform 200ms ease;outline:0;background:#fff;overflow-y:scroll;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}html[dir=rtl] .bpk-drawer{right:auto;left:0;transform:translate(-100%)}@media(max-width: 32rem){.bpk-drawer{width:100%;max-width:100%}}.bpk-drawer--entering,.bpk-drawer--entered{transform:translate(0)}html[dir=rtl] .bpk-drawer--entering,html[dir=rtl] .bpk-drawer--entered{transform:translate(0)}.bpk-drawer--exiting{transition:transform 50ms ease}.bpk-drawer--exiting,.bpk-drawer--exited{transform:translate(100%)}html[dir=rtl] .bpk-drawer--exiting,html[dir=rtl] .bpk-drawer--exited{transform:translate(-100%)}.bpk-drawer__header{display:flex;min-height:3rem;padding:1rem;justify-content:space-between;align-items:center;flex:0 0}.bpk-drawer__heading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-drawer__heading--visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-drawer__close-button{float:right}html[dir=rtl] .bpk-drawer__close-button{float:left}.bpk-drawer__content{height:100%;flex:1 1 100%;overflow-y:auto}.bpk-drawer__content--padded{padding:1rem}@media(max-width: 32rem){.bpk-drawer__modal-mobile-view{transform:scale(0.9);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0}.bpk-drawer__modal-mobile-view--entering,.bpk-drawer__modal-mobile-view--entered{transform:scale(1);opacity:1}.bpk-drawer__modal-mobile-view--exited{transform:scale(0.9);opacity:0}.bpk-drawer__modal-mobile-view--exiting{transform:none}}

package/bpk-component-drawer/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

package/bpk-component-drawer/src/themeAttributes.js

@@ -14,5 +14,8 @@
  * 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 { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -17,8 +17,6 @@
  */
 
 import { useEffect, useState } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";

package/bpk-component-image/src/BpkImage.js

@@ -17,8 +17,6 @@
  */
 
 import { Component } from 'react';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { BpkSpinner } from "../../bpk-component-spinner";

package/bpk-component-info-banner/src/AnimateAndFade.js

@@ -17,7 +17,6 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -35,6 +35,7 @@ const BpkIconMarkerBackground = props => {
         width: "32",
         height: "40",
         viewBox: "0 0 32 40",
+        "aria-hidden": "true",
         className: classNames,
         ...rest,
         children: /*#__PURE__*/_jsx("path", {
@@ -51,6 +52,7 @@ const BpkIconMarkerBackground = props => {
       width: "26",
       height: "32",
       viewBox: "0 0 26 32",
+      "aria-hidden": "true",
       className: classNames,
       ...rest,
       children: /*#__PURE__*/_jsx("path", {

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

@@ -17,8 +17,6 @@
  */
 
 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";

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

@@ -18,7 +18,6 @@
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 // Object.assign() is used unpolyfilled in react-transition-group.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "35.7.0",
+  "version": "36.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",