@skyscanner/backpack-web 33.0.0 → 33.1.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-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-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.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",