@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-modal/src/BpkModal.js

@@ -0,0 +1,79 @@
+/*
+ * 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 { withScrim } from "../../bpk-scrim-utils";
+import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
+import STYLES from "./BpkModal.module.css";
+import BpkModalInner from "./BpkModalInner";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const ScrimBpkModalInner = withScrim(BpkModalInner);
+const BpkModal = ({
+  accessoryView = null,
+  className = null,
+  closeLabel = '',
+  closeOnEscPressed = true,
+  closeOnScrimClick = true,
+  closeText = null,
+  contentClassName = null,
+  dialogRef = () => null,
+  fullScreen = false,
+  fullScreenOnMobile = true,
+  isIphone = isDeviceIphone(),
+  isOpen,
+  onClose = () => null,
+  padded = true,
+  renderTarget = null,
+  showHeader = true,
+  title = null,
+  wide = false,
+  ...rest
+}) => {
+  const containerClass = [getClassName('bpk-modal__container')];
+  if (fullScreen || isIphone) {
+    containerClass.push(getClassName('bpk-modal__container--full-screen'));
+  } else if (fullScreenOnMobile) {
+    containerClass.push(getClassName('bpk-modal__container--full-screen-mobile'));
+  }
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    renderTarget: renderTarget,
+    closeOnEscPressed: closeOnEscPressed,
+    children: /*#__PURE__*/_jsx(ScrimBpkModalInner, {
+      onClose: onClose,
+      fullScreenOnMobile: fullScreenOnMobile,
+      fullScreen: fullScreen,
+      closeOnScrimClick: closeOnScrimClick,
+      containerClassName: containerClass.join(' '),
+      isIphone: isIphone,
+      title: title,
+      className: className,
+      contentClassName: contentClassName,
+      closeLabel: closeLabel,
+      closeText: closeText,
+      wide: wide,
+      showHeader: showHeader,
+      padded: padded,
+      accessoryView: accessoryView,
+      dialogRef: dialogRef,
+      ...rest
+    })
+  });
+};
+export default BpkModal;

package/bpk-component-modal/src/BpkModalInner.js

@@ -0,0 +1,112 @@
+/*
+ * 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 { BpkButtonLink } from "../../bpk-component-link";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkNavigationBar from "../../bpk-component-navigation-bar";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkModalInner.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalInner = ({
+  accessoryView = null,
+  children,
+  className = null,
+  closeLabel = '',
+  closeText = null,
+  contentClassName = null,
+  dialogRef,
+  fullScreen = false,
+  fullScreenOnMobile = true,
+  id,
+  isIphone,
+  onClose = () => null,
+  padded = true,
+  showHeader = true,
+  title = null,
+  wide = false
+}) => {
+  const classNames = [getClassName('bpk-modal')];
+  const contentClassNames = [getClassName('bpk-modal__content')];
+  const navigationStyles = [getClassName('bpk-modal__navigation')];
+  if (wide) {
+    classNames.push(getClassName('bpk-modal--wide'));
+  }
+  if (className) {
+    classNames.push(className);
+  }
+  if (fullScreen || isIphone) {
+    classNames.push(getClassName('bpk-modal--full-screen'));
+  } else if (fullScreenOnMobile) {
+    classNames.push(getClassName('bpk-modal--full-screen-mobile'));
+  }
+  if (padded) {
+    contentClassNames.push(getClassName('bpk-modal__content--padded'));
+  }
+  if (contentClassName) {
+    contentClassNames.push(contentClassName);
+  }
+  const headingId = `bpk-modal-heading-${id}`;
+  const accessoryViewFinal = accessoryView ? /*#__PURE__*/_jsx("span", {
+    className: getClassName('bpk-modal__accessory-view'),
+    children: accessoryView
+  }) : null;
+  return /*#__PURE__*/_jsx(TransitionInitialMount, {
+    appearClassName: getClassName('bpk-modal--appear'),
+    appearActiveClassName: getClassName('bpk-modal--appear-active'),
+    transitionTimeout: 300,
+    children: /*#__PURE__*/_jsxs("section", {
+      id: id,
+      tabIndex: -1,
+      role: "dialog",
+      "aria-labelledby": showHeader ? headingId : undefined,
+      className: classNames.join(' '),
+      ref: dialogRef,
+      children: [showHeader && /*#__PURE__*/_jsx("header", {
+        className: getClassName('bpk-modal__header'),
+        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
+          id: headingId,
+          className: navigationStyles.join(' '),
+          title: /*#__PURE__*/_jsx("h2", {
+            id: headingId,
+            className: getClassName('bpk-modal__heading'),
+            children: title
+          }),
+          leadingButton: accessoryViewFinal,
+          trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
+            className: getClassName('bpk-modal__close-button'),
+            onClick: onClose,
+            children: closeText
+          }) : /*#__PURE__*/_jsx(BpkCloseButton, {
+            className: getClassName('bpk-modal__close-button'),
+            label: closeLabel,
+            onClick: onClose
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: contentClassNames.join(' '),
+        children: children
+      })]
+    })
+  });
+};
+export default BpkModalInner;

package/bpk-component-modal/src/BpkModalV2/BpKModal.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-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-modal-scrim{0%{opacity:0}100%{opacity:1}}@keyframes bpk-modal-scale{0%{transform:scale(0.9)}100%{transform:scale(1)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;margin:0 auto;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;top:50%;left:50%;display:block;z-index:1;transform:translate(-50%, -50%) scale(1);transition:transform 200ms ease-in-out 200ms}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{padding:0;border:none;border-radius:.75rem;background:#fff;overflow-y:scroll;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal[open]{animation:bpk-modal-scale 200ms ease-in-out}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);animation:bpk-modal-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -0,0 +1,145 @@
+/*
+ * 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 } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../../bpk-component-close-button";
+import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules, withDefaultProps } from "../../../bpk-react-utils";
+import STYLES from "./BpKModal.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const Header = ({
+  closeLabel,
+  id,
+  onClose,
+  title
+}) => {
+  if (title) {
+    return /*#__PURE__*/_jsxs("div", {
+      id: id,
+      className: getClassName('bpk-modal__header-title'),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-modal__header-title-container'),
+        children: /*#__PURE__*/_jsx(Heading, {
+          children: title
+        })
+      }), /*#__PURE__*/_jsx(BpkCloseButton, {
+        label: closeLabel,
+        onClick: onClose
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-modal__button-container'),
+    children: /*#__PURE__*/_jsx(BpkCloseButton, {
+      label: closeLabel,
+      onClick: onClose
+    })
+  });
+};
+const Heading = withDefaultProps(BpkText, {
+  textStyle: TEXT_STYLES.label1,
+  tagName: 'h2',
+  className: getClassName('bpk-modal__title')
+});
+// 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 BpkModalV2 = props => {
+  const {
+    ariaLabelledby,
+    children,
+    closeLabel,
+    fullScreenOnDesktop,
+    id,
+    isOpen,
+    noFullScreenOnMobile,
+    onClose,
+    padded,
+    showHeader = true,
+    title,
+    wide
+  } = props;
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      ref.current?.showModal?.();
+      const dialog = document.getElementById(`${id}`);
+      const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
+      const handleBackdropClick = modal => {
+        if (modal) {
+          modal.addEventListener('click', event => {
+            const {
+              target
+            } = event;
+            if (target === modal) {
+              modal === dialog ? ref.current?.close?.() : onClose();
+            }
+          });
+        }
+      };
+      handleBackdropClick(dialog);
+      handleBackdropClick(dialogWithPolyfill);
+    } else {
+      ref.current?.close?.();
+    }
+    setPageProperties({
+      isDialogOpen: isOpen
+    });
+    return () => setPageProperties({
+      isDialogOpen: false
+    });
+  }, [id, isOpen, onClose]);
+  const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
+  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
+  return isOpen ? /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
+    children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
+      id: `${id}-polyfill`,
+      className: getClassName('bpk-modal-backdrop'),
+      "data-open": isOpen
+    }), /*#__PURE__*/_jsxs("dialog", {
+      id: id,
+      className: classNames,
+      onClose: onClose,
+      "aria-labelledby": ariaLabelledby,
+      "data-open": isOpen,
+      ref: ref,
+      children: [showHeader && /*#__PURE__*/_jsx(Header, {
+        id: `${id}-title`,
+        title: title,
+        closeLabel: closeLabel,
+        onClose: onClose
+      }), /*#__PURE__*/_jsx("div", {
+        className: contentClassNames,
+        children: children
+      })]
+    })]
+  }) : null;
+};

package/bpk-component-modal/src/customPropTypes.js

@@ -14,41 +14,17 @@
  * 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.
- */
-
-/* @flow strict */
-
-export const titlePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+ */export const titlePropType = (props, propName, componentName) => {
   const titleValue = props[propName];
-
   if (props.showHeader && (!titleValue || typeof titleValue !== 'string')) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`,
-    );
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must be a title if showHeader is true.`);
   }
-
   return null;
 };
-
-export const onClosePropType = (
-  props: Object,
-  propName: string,
-  componentName: string,
-): ?Error => {
+export const onClosePropType = (props, propName, componentName) => {
   const onCloseValue = props[propName];
-
-  if (
-    props.showHeader &&
-    (!onCloseValue || typeof onCloseValue !== 'function')
-  ) {
-    return new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`,
-    );
+  if (props.showHeader && (!onCloseValue || typeof onCloseValue !== 'function')) {
+    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if showHeader is true.`);
   }
-
   return null;
-};
+};

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

@@ -17,11 +17,8 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { isDeviceIphone } from '../../bpk-react-utils';
-
-import { titlePropType, onClosePropType } from './customPropTypes';
-
+import { isDeviceIphone } from "../../bpk-react-utils";
+import { titlePropType, onClosePropType } from "./customPropTypes";
 const modalDialogPropTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
@@ -38,9 +35,8 @@ const modalDialogPropTypes = {
   fullScreenOnMobile: PropTypes.bool,
   fullScreen: PropTypes.bool,
   padded: PropTypes.bool,
-  accesoryView: PropTypes.func,
+  accesoryView: PropTypes.func
 };
-
 const modalDialogDefaultProps = {
   title: null,
   onClose: () => null,
@@ -53,11 +49,12 @@ const modalDialogDefaultProps = {
   fullScreenOnMobile: true,
   fullScreen: false,
   padded: true,
-  accessoryView: null,
+  accessoryView: null
 };
-
-const { dialogRef, ...newModalDialogPropTypes } = modalDialogPropTypes;
-
+const {
+  dialogRef,
+  ...newModalDialogPropTypes
+} = modalDialogPropTypes;
 export const propTypes = {
   ...newModalDialogPropTypes,
   onClose: PropTypes.func,
@@ -65,14 +62,13 @@ export const propTypes = {
   isOpen: PropTypes.bool.isRequired,
   renderTarget: PropTypes.func,
   closeOnScrimClick: PropTypes.bool,
-  closeOnEscPressed: PropTypes.bool,
+  closeOnEscPressed: PropTypes.bool
 };
-
 export const defaultProps = {
   ...modalDialogDefaultProps,
   onClose: () => null,
   renderTarget: null,
   isIphone: isDeviceIphone(),
   closeOnScrimClick: true,
-  closeOnEscPressed: true,
-};
+  closeOnEscPressed: true
+};

package/bpk-component-modal/src/{themeAttributes.ts → themeAttributes.js}

@@ -17,6 +17,5 @@
  */
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
-
-export default [...linkAttributes];
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
+export default [...linkAttributes];

package/bpk-component-navigation-bar/index.js

@@ -14,29 +14,9 @@
  * 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.
- */
-
-/* @flow strict */
-
-import BpkNavigationBar, {
-  type Props as BpkNavigationBarProps,
-} from './src/BpkNavigationBar';
-import BpkNavigationBarIconButton, {
-  type Props as BpkNavigationBarIconButtonProps,
-} from './src/BpkNavigationBarIconButton';
-import BpkNavigationBarButtonLink, {
-  type Props as BpkNavigationBarButtonLinkProps,
-} from './src/BpkNavigationBarButtonLink';
-import themeAttributes from './src/themeAttributes';
-
-export type {
-  BpkNavigationBarProps,
-  BpkNavigationBarIconButtonProps,
-  BpkNavigationBarButtonLinkProps,
-};
-export {
-  BpkNavigationBarIconButton,
-  BpkNavigationBarButtonLink,
-  themeAttributes,
-};
-export default BpkNavigationBar;
+ */import BpkNavigationBar from "./src/BpkNavigationBar";
+import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
+import BpkNavigationBarButtonLink from "./src/BpkNavigationBarButtonLink";
+import themeAttributes from "./src/themeAttributes";
+export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes };
+export default BpkNavigationBar;

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

@@ -14,36 +14,22 @@
  * 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.
- */
-
-/* @flow strict */
-
-import type { Node, Element } from 'react';
-import { cloneElement } from 'react';
+ */import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkNavigationBar.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import STYLES from "./BpkNavigationBar.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  title: Node,
-  className: ?string,
-  leadingButton: ?Element<any>,
-  trailingButton: ?Element<any>,
-  sticky: ?boolean,
-};
-
-const cloneWithClass = (elem: Element<any>, newStyle: string) => {
+const cloneWithClass = (elem, newStyle) => {
   const className = getClassNames(elem.props.className, newStyle);
-  return cloneElement(elem, { ...elem.props, className });
+  return /*#__PURE__*/cloneElement(elem, {
+    ...elem.props,
+    className
+  });
 };
-
-const BpkNavigationBar = (props: Props) => {
+const BpkNavigationBar = props => {
   const {
     className,
     id,
@@ -56,52 +42,34 @@ const BpkNavigationBar = (props: Props) => {
 
   // If the title is a component that sets its own id we want the aria-labelledby on the nav to match this so it can find the element
   // Otherwise if its just a string we set the id on the title component.
-  const titleId =
-    typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
-
+  const titleId = typeof title === 'string' ? `${id}-bpk-navigation-bar-title` : id;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <nav
-      aria-labelledby={titleId}
-      className={getClassNames(
-        'bpk-navigation-bar',
-        sticky && 'bpk-navigation-bar__sticky',
-        className,
-      )}
-      {...rest}
-    >
-      {leadingButton &&
-        cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item')}
-      {typeof title === 'string' ? (
-        <BpkText
-          id={titleId}
-          textStyle={TEXT_STYLES.heading5}
-          className={getClassNames('bpk-navigation-bar__title')}
-        >
-          {title}
-        </BpkText>
-      ) : (
-        title
-      )}
-      {trailingButton &&
-        cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')}
-    </nav>
+    _jsxs("nav", {
+      "aria-labelledby": titleId,
+      className: getClassNames('bpk-navigation-bar', sticky && 'bpk-navigation-bar__sticky', className),
+      ...rest,
+      children: [leadingButton && cloneWithClass(leadingButton, 'bpk-navigation-bar__leading-item'), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
+        id: titleId,
+        textStyle: TEXT_STYLES.heading5,
+        className: getClassNames('bpk-navigation-bar__title'),
+        children: title
+      }) : title, trailingButton && cloneWithClass(trailingButton, 'bpk-navigation-bar__trailing-item')]
+    })
   );
 };
-
 BpkNavigationBar.propTypes = {
   title: PropTypes.node.isRequired,
   className: PropTypes.string,
   leadingButton: PropTypes.element,
   trailingButton: PropTypes.element,
-  sticky: PropTypes.bool,
+  sticky: PropTypes.bool
 };
-
 BpkNavigationBar.defaultProps = {
   className: null,
   leadingButton: null,
   trailingButton: null,
-  sticky: false,
+  sticky: false
 };
-
-export default BpkNavigationBar;
+export default BpkNavigationBar;