@skyscanner/backpack-web 42.27.3 → 43.0.0

package/bpk-component-split-input/src/BpkSplitInput.d.ts

@@ -17,12 +17,6 @@ interface State {
     inputValue: string[] | number[];
 }
 declare class BpkSplitInput extends Component<Props, State> {
-    static defaultProps: {
-        type: "number";
-        inputLength: number;
-        large: boolean;
-        placeholder: string;
-    };
     constructor(props: Props);
     onInputChange: (input: string[] | number[]) => void;
     updateInputValue: (value: string | number) => void;

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -24,12 +24,6 @@ import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 class BpkSplitInput extends Component {
-  static defaultProps = {
-    type: INPUT_TYPES.number,
-    inputLength: 4,
-    large: true,
-    placeholder: ''
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -77,14 +71,14 @@ class BpkSplitInput extends Component {
     }
     return true;
   };
-  isNumeric = () => this.props.type === INPUT_TYPES.number;
+  isNumeric = () => (this.props.type ?? INPUT_TYPES.number) === INPUT_TYPES.number;
   isInputValid = value => {
     const isTypeValid = this.isNumeric() ? /^\d$/.test(`${value}`) : typeof value === 'string';
     return isTypeValid && `${value}`.trim().length === 1;
   };
   focusInput = inputIndex => {
     const {
-      inputLength
+      inputLength = 4
     } = this.props;
     const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
     this.setState({
@@ -106,7 +100,7 @@ class BpkSplitInput extends Component {
   handleOnPaste = e => {
     e.preventDefault();
     const {
-      inputLength
+      inputLength = 4
     } = this.props;
     const {
       focusedInput,
@@ -170,12 +164,12 @@ class BpkSplitInput extends Component {
     } = this.state;
     const {
       id,
-      inputLength,
+      inputLength = 4,
       label,
-      large,
+      large = true,
       name,
-      placeholder,
-      type,
+      placeholder = '',
+      type = INPUT_TYPES.number,
       ...rest
     } = this.props;
     const inputs = [];

package/bpk-component-star-rating/src/withInteractiveStarRatingState.d.ts

@@ -34,9 +34,6 @@ declare const withInteractiveStarRatingState: <P extends object>(InteractiveStar
         UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        onRatingSelect: () => null;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withInteractiveStarRatingState;

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js

@@ -21,9 +21,6 @@ import { wrapDisplayName } from "../../bpk-react-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const withInteractiveStarRatingState = InteractiveStarRating => {
   class EnhancedComponent extends Component {
-    static defaultProps = {
-      onRatingSelect: () => null
-    };
     constructor(props) {
       super(props);
       this.state = {

package/bpk-component-ticket/src/BpkTicket.js

@@ -28,13 +28,13 @@ const getClassName = cssModules(STYLES);
 const BpkTicket = props => {
   const {
     children,
-    className,
-    href,
-    padded,
+    className = null,
+    href = null,
+    padded = true,
     stub,
-    stubClassName,
-    stubProps,
-    vertical,
+    stubClassName = null,
+    stubProps = {},
+    vertical = false,
     ...rest
   } = props;
   const classNames = getClassName('bpk-ticket', className, vertical && 'bpk-ticket--vertical');
@@ -94,12 +94,4 @@ BpkTicket.propTypes = {
   stubClassName: PropTypes.string,
   stubProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkTicket.defaultProps = {
-  className: null,
-  href: null,
-  padded: true,
-  vertical: false,
-  stubClassName: null,
-  stubProps: {}
-};
 export default BpkTicket;

package/bpk-mixins/_badges.scss

@@ -45,11 +45,11 @@
     tokens.$bpk-border-radius-xs
   );
   @include typography.bpk-text;
-  @include typography.bpk-footnote;
+  @include typography.bpk-caption;
   @include utils.bpk-themeable-property(
     font-size,
     --bpk-badge-font-size,
-    tokens.$bpk-font-size-sm
+    tokens.$bpk-font-size-xs
   );
   @include utils.bpk-themeable-property(
     font-weight,
@@ -59,7 +59,7 @@
   @include utils.bpk-themeable-property(
     line-height,
     --bpk-badge-line-height,
-    tokens.$bpk-line-height-sm
+    tokens.$bpk-line-height-xs
   );
 }
 

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

@@ -19,7 +19,9 @@ declare const _default: {
         appearClassName: string;
         appearActiveClassName: string;
         transitionTimeout: number;
-        children: string | import("react").ReactNode;
+        children: import("react").ReactElement<{
+            ref?: import("react").RefObject<HTMLElement | null>;
+        }>;
     }) => import("react/jsx-runtime").JSX.Element;
     cssModules: (styles?: {
         [key: string]: any;

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

@@ -109,6 +109,7 @@ export const BpkDialogWrapper = ({
       className: getClassName('bpk-dialog-wrapper--backdrop'),
       "data-open": isOpen
     }), /*#__PURE__*/_jsx(CSSTransition, {
+      nodeRef: ref,
       classNames: transitionClassNames,
       in: !exiting,
       appear: !exiting,

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

@@ -4,18 +4,18 @@ type InteractionEvents = TouchEvent | MouseEvent | KeyboardEvent;
 type Props = {
     children: string | ReactNode;
     isOpen: boolean;
-    beforeClose: ((arg0: () => void) => void) | null | undefined;
-    className: string | null | undefined;
-    onClose: (arg0: InteractionEvents, arg1: {
+    beforeClose?: ((arg0: () => void) => void) | null | undefined;
+    className?: string | null | undefined;
+    onClose?: (arg0: InteractionEvents, arg1: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';
     }) => void;
-    onOpen: (arg0: HTMLElement, arg1?: HTMLElement | null | undefined) => void;
-    onRender: (arg0: HTMLElement | null | undefined, arg1: HTMLElement | null | undefined) => void;
-    style: {} | null | undefined;
-    renderTarget: null | HTMLElement | (() => null | HTMLElement);
-    target: null | HTMLElement | JSX.Element | (() => HTMLElement);
-    targetRef: ((arg0: null | Element | undefined) => void) | null | undefined;
-    closeOnEscPressed: boolean;
+    onOpen?: (arg0: HTMLElement, arg1?: HTMLElement | null | undefined) => void;
+    onRender?: (arg0: HTMLElement | null | undefined, arg1: HTMLElement | null | undefined) => void;
+    style?: {} | null | undefined;
+    renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+    target?: null | HTMLElement | JSX.Element | (() => HTMLElement);
+    targetRef?: ((arg0: null | Element | undefined) => void) | null | undefined;
+    closeOnEscPressed?: boolean;
 };
 type State = {
     isVisible: boolean;
@@ -23,18 +23,6 @@ type State = {
 declare class Portal extends Component<Props, State> {
     portalElement: null | HTMLDivElement;
     shouldClose: boolean;
-    static defaultProps: {
-        beforeClose: null;
-        className: null;
-        onClose: () => null;
-        onOpen: () => null;
-        onRender: () => null;
-        style: null;
-        renderTarget: null;
-        target: null;
-        targetRef: null;
-        closeOnEscPressed: boolean;
-    };
     constructor(props: Props);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;

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

@@ -25,19 +25,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const KEYCODES = {
   ESCAPE: 'Escape'
 };
+const noop = () => null;
 class Portal extends Component {
-  static defaultProps = {
-    beforeClose: null,
-    className: null,
-    onClose: () => null,
-    onOpen: () => null,
-    onRender: () => null,
-    style: null,
-    renderTarget: null,
-    target: null,
-    targetRef: null,
-    closeOnEscPressed: true
-  };
   constructor(props) {
     super(props);
     this.portalElement = null;
@@ -69,15 +58,19 @@ class Portal extends Component {
   // call their beforeClose function so that they can trigger the close.
   // If they don't provide `beforeClose` we just call `close` directly.
   componentDidUpdate(prevProps) {
+    const {
+      beforeClose,
+      onRender = noop
+    } = this.props;
     if (this.props.isOpen) {
       if (!prevProps.isOpen) {
         this.open();
       } else {
-        this.props.onRender(this.portalElement, this.getTargetElement());
+        onRender(this.portalElement, this.getTargetElement());
       }
     } else if (prevProps.isOpen) {
-      if (this.props.beforeClose) {
-        this.props.beforeClose(this.close);
+      if (beforeClose) {
+        beforeClose(this.close);
       } else {
         this.close();
       }
@@ -95,6 +88,9 @@ class Portal extends Component {
     this.shouldClose = true;
   }
   onDocumentMouseUp(event) {
+    const {
+      onClose = noop
+    } = this.props;
     const clickEventProperties = this.getClickEventProperties(event);
     if (clickEventProperties.isNotLeftClick || clickEventProperties.isTargetClick || clickEventProperties.isPortalClick) {
       this.shouldClose = false;
@@ -103,16 +99,20 @@ class Portal extends Component {
     if (this.shouldClose) {
       // `onClose` tells the consumer that they should change `isOpen` to false.
       // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
-      this.props.onClose(event, {
+      onClose(event, {
         source: 'DOCUMENT_CLICK'
       });
     }
   }
   onDocumentKeyDown(event) {
-    if (event.key === KEYCODES.ESCAPE && this.props.isOpen && this.props.closeOnEscPressed) {
+    const {
+      closeOnEscPressed = true,
+      onClose = noop
+    } = this.props;
+    if (event.key === KEYCODES.ESCAPE && this.props.isOpen && closeOnEscPressed) {
       // `onClose` tells the consumer that they should change `isOpen` to false.
       // Once the consumer has responded to `onClose`, `beforeClose` and `close` will be called.
-      this.props.onClose(event, {
+      onClose(event, {
         source: 'ESCAPE'
       });
     }
@@ -166,10 +166,13 @@ class Portal extends Component {
     if (this.props.className) {
       portalElement.className = this.props.className;
     }
+    const {
+      onOpen = noop
+    } = this.props;
     this.portalElement = portalElement;
     this.setState({
       isVisible: true
-    }, () => this.props.onOpen(portalElement, this.getTargetElement()));
+    }, () => onOpen(portalElement, this.getTargetElement()));
   }
   close() {
     if (!this.portalElement) {

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

@@ -1,9 +1,11 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, RefObject } from 'react';
 type Props = {
     appearClassName: string;
     appearActiveClassName: string;
     transitionTimeout: number;
-    children: string | ReactNode;
+    children: ReactElement<{
+        ref?: RefObject<HTMLElement | null>;
+    }>;
 };
 declare const TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TransitionInitialMount;

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

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { cloneElement, useRef } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
 import CSSTransition from 'react-transition-group/CSSTransition';
@@ -24,23 +25,31 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 // It will use the native implementation if it's present and isn't buggy.
 import { jsx as _jsx } from "react/jsx-runtime";
 Object.assign = assign;
+// TODO: revisit the cloneElement pattern when react-transition-group v5 ships;
+// it is expected to remove the nodeRef requirement.
 const TransitionInitialMount = ({
   appearActiveClassName,
   appearClassName,
   children,
   transitionTimeout
-}) => /*#__PURE__*/_jsx(CSSTransition, {
-  classNames: {
-    appear: appearClassName,
-    appearActive: appearActiveClassName
-  },
-  in: true,
-  appear: true,
-  timeout: {
-    exit: 0,
-    enter: 0,
-    appear: transitionTimeout
-  },
-  children: children
-});
+}) => {
+  const nodeRef = useRef(null);
+  return /*#__PURE__*/_jsx(CSSTransition, {
+    nodeRef: nodeRef,
+    classNames: {
+      appear: appearClassName,
+      appearActive: appearActiveClassName
+    },
+    in: true,
+    appear: true,
+    timeout: {
+      exit: 0,
+      enter: 0,
+      appear: transitionTimeout
+    },
+    children: /*#__PURE__*/cloneElement(children, {
+      ref: nodeRef
+    })
+  });
+};
 export default TransitionInitialMount;

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

@@ -54,13 +54,6 @@ declare const _default: {
             UNSAFE_componentWillUpdate?(nextProps: Readonly<import("./src/withScrim").Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
         };
         displayName: string;
-        defaultProps: {
-            onClose: null;
-            isIphone: boolean;
-            isIpad: boolean;
-            containerClassName: null;
-            closeOnScrimClick: boolean;
-        };
         contextType?: import("react").Context<any> | undefined;
     };
 };

package/bpk-scrim-utils/src/withScrim.d.ts

@@ -72,13 +72,6 @@ declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> |
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Props & Omit<P, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        onClose: null;
-        isIphone: boolean;
-        isIpad: boolean;
-        containerClassName: null;
-        closeOnScrimClick: boolean;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withScrim;

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

@@ -25,20 +25,15 @@ import { fixBody, lockScroll, lockTouchAction, restoreScroll, storeScroll, unfix
 import STYLES from "./bpk-scrim-content.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const DEFAULT_IS_IPHONE = isDeviceIphone();
+const DEFAULT_IS_IPAD = isDeviceIpad();
 const withScrim = WrappedComponent => {
   class WithScrim extends Component {
-    static defaultProps = {
-      onClose: null,
-      isIphone: isDeviceIphone(),
-      isIpad: isDeviceIpad(),
-      containerClassName: null,
-      closeOnScrimClick: true
-    };
     componentDidMount() {
       const {
         getApplicationElement,
-        isIpad,
-        isIphone
+        isIpad = DEFAULT_IS_IPAD,
+        isIphone = DEFAULT_IS_IPHONE
       } = this.props;
       const applicationElement = getApplicationElement();
 
@@ -73,8 +68,8 @@ const withScrim = WrappedComponent => {
     componentWillUnmount() {
       const {
         getApplicationElement,
-        isIpad,
-        isIphone
+        isIpad = DEFAULT_IS_IPAD,
+        isIphone = DEFAULT_IS_IPHONE
       } = this.props;
       const applicationElement = getApplicationElement();
       if (isIphone || isIpad) {
@@ -96,11 +91,11 @@ const withScrim = WrappedComponent => {
     };
     render() {
       const {
-        closeOnScrimClick,
-        containerClassName,
+        closeOnScrimClick = true,
+        containerClassName = null,
         getApplicationElement,
-        isIpad,
-        isIphone,
+        isIpad = DEFAULT_IS_IPAD,
+        isIphone = DEFAULT_IS_IPHONE,
         onClose,
         ...rest
       } = this.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.27.3",
+  "version": "43.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -50,8 +50,8 @@
   },
   "peerDependencies": {
     "date-fns": "3.3.1 - 4",
-    "react": "17.0.2 - 18.3.1",
-    "react-dom": "17.0.2 - 18.3.1",
+    "react": "18.3.1 - 19.2.5",
+    "react-dom": "18.3.1 - 19.2.5",
     "react-transition-group": "^4.4.5",
     "sass": "^1",
     "sass-embedded": "^1"

package/bpk-component-modal/src/legacy-prop-types.js

@@ -1,74 +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.
- */
-
-import PropTypes from 'prop-types';
-import { isDeviceIphone } from "../../bpk-react-utils";
-import { titlePropType, onClosePropType } from "./customPropTypes";
-const modalDialogPropTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isIphone: PropTypes.bool.isRequired,
-  dialogRef: PropTypes.func.isRequired,
-  title: titlePropType,
-  onClose: onClosePropType,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  closeLabel: PropTypes.string,
-  closeText: PropTypes.string,
-  wide: PropTypes.bool,
-  showHeader: PropTypes.bool,
-  fullScreenOnMobile: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-  padded: PropTypes.bool,
-  accesoryView: PropTypes.func
-};
-const modalDialogDefaultProps = {
-  title: null,
-  onClose: () => null,
-  className: null,
-  contentClassName: null,
-  closeLabel: '',
-  closeText: null,
-  wide: false,
-  showHeader: true,
-  fullScreenOnMobile: true,
-  fullScreen: false,
-  padded: true,
-  accessoryView: null
-};
-const {
-  dialogRef,
-  ...newModalDialogPropTypes
-} = modalDialogPropTypes;
-export const propTypes = {
-  ...newModalDialogPropTypes,
-  onClose: PropTypes.func,
-  isIphone: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  renderTarget: PropTypes.func,
-  closeOnScrimClick: PropTypes.bool,
-  closeOnEscPressed: PropTypes.bool
-};
-export const defaultProps = {
-  ...modalDialogDefaultProps,
-  onClose: () => null,
-  renderTarget: null,
-  isIphone: isDeviceIphone(),
-  closeOnScrimClick: true,
-  closeOnEscPressed: true
-};