@skyscanner/backpack-web 33.0.0 → 33.2.0

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

@@ -156,7 +156,6 @@ const BpkBannerAlertInner = ({
         }), dismissable && /*#__PURE__*/_jsx("span", {
           className: getClassName('bpk-banner-alert__toggle'),
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
-            className: getClassName('bpk-banner-alert__toggle-button'),
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
             label: dismissButtonLabel

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -78,6 +78,7 @@ class BpkHorizontalNav extends Component {
   };
   render() {
     const {
+      ariaLabel,
       autoScrollToSelected,
       children: rawChildren,
       className,
@@ -113,6 +114,7 @@ class BpkHorizontalNav extends Component {
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       _jsx(BpkMobileScrollContainer, {
+        ariaLabel: ariaLabel,
         innerContainerTagName: "nav",
         className: classNames,
         leadingIndicatorClassName: leadingScrollIndicatorClassName,
@@ -131,6 +133,7 @@ class BpkHorizontalNav extends Component {
   }
 }
 BpkHorizontalNav.propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   /**
    * Ensures that the selected item is within view when loaded on narrow-screened devices.
@@ -139,7 +142,7 @@ BpkHorizontalNav.propTypes = {
   className: PropTypes.string,
   leadingScrollIndicatorClassName: PropTypes.string,
   /**
-   * When set to "false", the bottom border on the component isn't included. This refers 
+   * When set to "false", the bottom border on the component isn't included. This refers
    * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
    */
   showUnderline: PropTypes.bool,
@@ -147,6 +150,7 @@ BpkHorizontalNav.propTypes = {
   type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
 };
 BpkHorizontalNav.defaultProps = {
+  ariaLabel: null,
   autoScrollToSelected: false,
   className: null,
   leadingScrollIndicatorClassName: null,

package/bpk-component-input/src/withOpenEvents.js

@@ -22,11 +22,11 @@ import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const KEYCODES = {
-  ENTER: 13,
-  SPACEBAR: 32
+  ENTER: 'Enter',
+  SPACEBAR: 'Space'
 };
-const handleKeyEvent = (keyCode, callback) => e => {
-  if (e instanceof KeyboardEvent && e.keyCode === keyCode) {
+const handleKeyEvent = callback => e => {
+  if (e.code === KEYCODES.ENTER || e.code === KEYCODES.SPACEBAR) {
     e.preventDefault();
     if (callback) {
       callback();
@@ -107,8 +107,9 @@ const withOpenEvents = InputComponent => {
       }
       const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
-        onKeyDown: withEventHandler(handleKeyEvent(KEYCODES.ENTER, onOpen), onKeyDown),
-        onKeyUp: withEventHandler(handleKeyEvent(KEYCODES.SPACEBAR, onOpen), onKeyUp)
+        // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as
+        // a valid type to UIEvent even though it is a valid subtype type of UIEvent
+        onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown)
       };
       if (hasTouchSupport) {
         // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -59,6 +59,7 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   return classNames;
 };
 const propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   scrollerRef: PropTypes.func,
   innerContainerTagName: PropTypes.string,
@@ -69,6 +70,7 @@ const propTypes = {
   showScrollbar: PropTypes.bool
 };
 const defaultProps = {
+  ariaLabel: null,
   scrollerRef: null,
   innerContainerTagName: 'div',
   className: null,
@@ -121,6 +123,7 @@ class BpkMobileScrollContainer extends Component {
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
     const {
+      ariaLabel,
       children,
       className,
       innerContainerTagName,
@@ -156,6 +159,7 @@ class BpkMobileScrollContainer extends Component {
         onScroll: this.setScrollIndicatorClassName,
         className: scrollerClassNames,
         children: /*#__PURE__*/_jsx(InnerContainer, {
+          "aria-label": ariaLabel,
           ref: el => {
             this.innerEl = el;
           },

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import { cloneElement } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import STYLES from "./BpkNavigationBar.module.css";
@@ -24,16 +23,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
 export const BAR_STYLES = {
-  'default': 'default',
+  default: 'default',
   onDark: 'on-dark'
 };
-const cloneWithClasses = (elem, ...newStyles) => {
-  const className = getClassNames(elem.props.className, ...newStyles);
-  return /*#__PURE__*/cloneElement(elem, {
-    ...elem.props,
-    className
-  });
-};
 const BpkNavigationBar = props => {
   const {
     barStyle = BAR_STYLES.default,
@@ -53,12 +45,18 @@ const BpkNavigationBar = props => {
     "aria-labelledby": titleId,
     className: getClassNames('bpk-navigation-bar', `bpk-navigation-bar--${barStyle}`, sticky && 'bpk-navigation-bar__sticky', className),
     ...rest,
-    children: [leadingButton && cloneWithClasses(leadingButton, 'bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
+    children: [leadingButton && /*#__PURE__*/_jsx("div", {
+      className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),
+      children: leadingButton
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
       id: titleId,
       textStyle: TEXT_STYLES.heading5,
       className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
       children: title
-    }) : title, trailingButton && cloneWithClasses(trailingButton, 'bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item--${barStyle}`)]
+    }) : title, trailingButton && /*#__PURE__*/_jsx("div", {
+      className: getClassNames('bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item-${barStyle}`),
+      children: trailingButton
+    })]
   });
 };
 export default BpkNavigationBar;

package/package.json

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