@skyscanner/backpack-web 25.8.0 → 25.8.2

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -1,15 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TEXT_ALIGN = void 0;
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentText = _interopRequireDefault(require("../../bpk-component-text"));
-var _bpkComponentButton = _interopRequireDefault(require("../../bpk-component-button"));
-var _BpkGraphicPromoModule = _interopRequireDefault(require("./BpkGraphicPromo.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,21 +16,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
+import { cssModules } from "../../bpk-react-utils";
+import BpkText from "../../bpk-component-text";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkGraphicPromoModule.default);
+import BpkButton from "../../bpk-component-button";
+import STYLES from "./BpkGraphicPromo.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 const ACCESSIBILITY_KEYS = {
   Enter: 13 /* Enter */,
   Space: 32 /* Space */
 };
 
 const isAccessibilityClick = event => Object.keys(ACCESSIBILITY_KEYS).includes(event.key) || Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
-const TEXT_ALIGN = {
+export const TEXT_ALIGN = {
   start: 'start',
   center: 'center',
   end: 'end'
 };
-exports.TEXT_ALIGN = TEXT_ALIGN;
 const constructAriaLabel = ({
   buttonText,
   headline,
@@ -90,7 +83,7 @@ const BpkGraphicPromo = ({
     // The card appears as a single component for the screen reader; its children are hidden. The card handles mouse
     // clicks and key presses (Enter/Space) for the whole component, as described here:
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
-    (0, _jsxRuntime.jsx)("div", {
+    _jsx("div", {
       id: contentId || '',
       className: cardClasses,
       style: style,
@@ -105,38 +98,38 @@ const BpkGraphicPromo = ({
       tabIndex: 0,
       onClick: onClickWrapper,
       onKeyDown: onKeyWrapper,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: /*#__PURE__*/_jsxs("div", {
         id: contentId && `${contentId}__content` || '',
         className: containerClasses,
         "aria-hidden": true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/_jsx("div", {
           className: getTextClasses('bpk-graphic-promo__sponsor-content'),
-          children: sponsor && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+          children: sponsor && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(BpkText, {
               tagName: "span",
               className: getClassName('bpk-graphic-promo__sponsor-label'),
               children: sponsor.label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            }), /*#__PURE__*/_jsx("img", {
               className: getClassName('bpk-graphic-promo__sponsor-logo'),
               alt: sponsor.altText,
               src: sponsor.logo
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), /*#__PURE__*/_jsxs("div", {
           className: getTextClasses('bpk-graphic-promo__promo-content'),
-          children: [!sponsor && tagline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+          children: [!sponsor && tagline && /*#__PURE__*/_jsx(BpkText, {
             tagName: "span",
             className: getClassName('bpk-graphic-promo__tagline'),
             children: tagline
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+          }), /*#__PURE__*/_jsx(BpkText, {
             tagName: "h2",
             className: getClassName('bpk-graphic-promo__headline'),
             children: headline
-          }), subheading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentText.default, {
+          }), subheading && /*#__PURE__*/_jsx(BpkText, {
             tagName: "p",
             className: getClassName('bpk-graphic-promo__subheading'),
             children: subheading
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentButton.default, {
+          }), /*#__PURE__*/_jsx(BpkButton, {
             primaryOnDark: true,
             className: getClassName('bpk-graphic-promo__cta'),
             onClick: onClickWrapper,
@@ -148,5 +141,4 @@ const BpkGraphicPromo = ({
     })
   );
 };
-var _default = BpkGraphicPromo;
-exports.default = _default;
+export default BpkGraphicPromo;

package/bpk-component-grid-toggle/index.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _BpkGridToggle = _interopRequireDefault(require("./src/BpkGridToggle"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkGridToggle.default;
-exports.default = _default;
+
+import component from "./src/BpkGridToggle";
+export default component;

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -1,52 +1,32 @@
-"use strict";
+/*
+ * 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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentLink = require("../../bpk-component-link");
-var _BpkGridToggleModule = _interopRequireDefault(require("./BpkGridToggle.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
-                                                                                                                                                                                                                                                                                                                                                                                           * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkGridToggleModule.default);
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import { BpkButtonLink } from "../../bpk-component-link";
+import STYLES from "./BpkGridToggle.module.css";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
-class BpkGridToggle extends _react.Component {
+class BpkGridToggle extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "handleKeyDown", e => {
-      if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
-        this.toggleGrid(e);
-      }
-    });
-    _defineProperty(this, "toggleGrid", e => {
-      e.preventDefault();
-      document.querySelector(this.props.targetContainer).classList.toggle(GRID_CLASS_NAME);
-      this.setState(state => ({
-        gridEnabled: !state.gridEnabled
-      }));
-    });
     this.state = {
       gridEnabled: false
     };
@@ -58,6 +38,18 @@ class BpkGridToggle extends _react.Component {
     document.querySelector(this.props.targetContainer).classList.remove(GRID_CLASS_NAME);
     document.removeEventListener('keydown', this.handleKeyDown);
   }
+  handleKeyDown = e => {
+    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'g') {
+      this.toggleGrid(e);
+    }
+  };
+  toggleGrid = e => {
+    e.preventDefault();
+    document.querySelector(this.props.targetContainer).classList.toggle(GRID_CLASS_NAME);
+    this.setState(state => ({
+      gridEnabled: !state.gridEnabled
+    }));
+  };
   render() {
     const {
       className
@@ -66,7 +58,7 @@ class BpkGridToggle extends _react.Component {
       gridEnabled
     } = this.state;
     const onOrOff = gridEnabled ? 'off' : 'on';
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bpkComponentLink.BpkButtonLink, {
+    return /*#__PURE__*/_jsxs(BpkButtonLink, {
       title: "Keyboard Shortcut: ctrl + cmd + g",
       onClick: this.toggleGrid,
       className: className,
@@ -75,12 +67,11 @@ class BpkGridToggle extends _react.Component {
   }
 }
 BpkGridToggle.propTypes = {
-  targetContainer: _propTypes.default.string,
-  className: _propTypes.default.string
+  targetContainer: PropTypes.string,
+  className: PropTypes.string
 };
 BpkGridToggle.defaultProps = {
   targetContainer: 'body',
   className: null
 };
-var _default = BpkGridToggle;
-exports.default = _default;
+export default BpkGridToggle;

package/bpk-component-horizontal-nav/index.js

@@ -1,31 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkHorizontalNavItem", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNavItem.default;
-  }
-});
-Object.defineProperty(exports, "HORIZONTAL_NAV_TYPES", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNav.HORIZONTAL_NAV_TYPES;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _BpkHorizontalNavItem.themeAttributes;
-  }
-});
-var _BpkHorizontalNav = _interopRequireWildcard(require("./src/BpkHorizontalNav"));
-var _BpkHorizontalNavItem = _interopRequireWildcard(require("./src/BpkHorizontalNavItem"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -42,6 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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.
- */
-var _default = _BpkHorizontalNav.default;
-exports.default = _default;
+ */import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
+import BpkHorizontalNavItem, { themeAttributes } from "./src/BpkHorizontalNavItem";
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;

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

@@ -1,46 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HORIZONTAL_NAV_TYPES = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentMobileScrollContainer = _interopRequireDefault(require("../../bpk-component-mobile-scroll-container"));
-var _BpkHorizontalNavModule = _interopRequireDefault(require("./BpkHorizontalNav.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoScrollToSelected", "children", "className", "leadingScrollIndicatorClassName", "showUnderline", "trailingScrollIndicatorClassName", "type"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
-                                                                                                                                                                                                                                                                                                                                                                                           * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkHorizontalNavModule.default);
+/*
+ * 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 { Component, Children, cloneElement } from 'react';
+import { cssModules } from "../../bpk-react-utils";
+import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
+import STYLES from "./BpkHorizontalNav.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 const HORIZONTAL_NAV_TYPES = {
   default: 'default',
   light: 'light'
 };
-exports.HORIZONTAL_NAV_TYPES = HORIZONTAL_NAV_TYPES;
 const getPos = ref => {
   if (!ref) {
     return null;
@@ -48,68 +32,82 @@ const getPos = ref => {
   const pos = ref.getBoundingClientRect();
   return pos;
 };
-class BpkHorizontalNav extends _react.Component {
+class BpkHorizontalNav extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    autoScrollToSelected: PropTypes.bool,
+    className: PropTypes.string,
+    leadingScrollIndicatorClassName: PropTypes.string,
+    showUnderline: PropTypes.bool,
+    trailingScrollIndicatorClassName: PropTypes.string,
+    type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
+  };
+  static defaultProps = {
+    autoScrollToSelected: false,
+    className: null,
+    leadingScrollIndicatorClassName: null,
+    showUnderline: true,
+    trailingScrollIndicatorClassName: null,
+    type: HORIZONTAL_NAV_TYPES.default
+  };
   constructor(props) {
     super(props);
-    _defineProperty(this, "selectedItemRef", void 0);
-    _defineProperty(this, "scrollRef", void 0);
-    _defineProperty(this, "componentDidMount", () => {
-      this.scrollSelectedIntoView(false);
-    });
-    _defineProperty(this, "scrollSelectedIntoView", useSmoothScroll => {
-      if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
-        return;
-      }
-      if (!this.scrollRef) {
-        return;
-      }
-      const selectedItemPos = getPos(this.selectedItemRef);
-      if (!selectedItemPos) {
-        return;
-      }
-      const scrollPos = getPos(this.scrollRef);
-      if (!scrollPos) {
-        return;
-      }
-
-      // We only need to carry out a scroll if the element is not already fully within the scroll view
-      const needsScroll = selectedItemPos.left < scrollPos.left || selectedItemPos.right > scrollPos.right;
-      if (!needsScroll) {
-        return;
-      }
-      const scrollAdjustment = selectedItemPos.left - scrollPos.left;
-      // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
-      if (this.scrollRef && this.scrollRef.scroll && typeof this.scrollRef.scroll === 'function' && useSmoothScroll) {
-        this.scrollRef.scroll({
-          left: scrollAdjustment,
-          behavior: 'smooth'
-        });
-      } else if (this.scrollRef) {
-        this.scrollRef.scrollLeft = scrollAdjustment;
-      }
-    });
     this.scrollRef = null;
     this.selectedItemRef = null;
   }
+  componentDidMount = () => {
+    this.scrollSelectedIntoView(false);
+  };
   componentDidUpdate() {
     this.scrollSelectedIntoView(true);
   }
+  scrollSelectedIntoView = useSmoothScroll => {
+    if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
+      return;
+    }
+    if (!this.scrollRef) {
+      return;
+    }
+    const selectedItemPos = getPos(this.selectedItemRef);
+    if (!selectedItemPos) {
+      return;
+    }
+    const scrollPos = getPos(this.scrollRef);
+    if (!scrollPos) {
+      return;
+    }
+
+    // We only need to carry out a scroll if the element is not already fully within the scroll view
+    const needsScroll = selectedItemPos.left < scrollPos.left || selectedItemPos.right > scrollPos.right;
+    if (!needsScroll) {
+      return;
+    }
+    const scrollAdjustment = selectedItemPos.left - scrollPos.left;
+    // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
+    if (this.scrollRef && this.scrollRef.scroll && typeof this.scrollRef.scroll === 'function' && useSmoothScroll) {
+      this.scrollRef.scroll({
+        left: scrollAdjustment,
+        behavior: 'smooth'
+      });
+    } else if (this.scrollRef) {
+      this.scrollRef.scrollLeft = scrollAdjustment;
+    }
+  };
   render() {
-    const _this$props = this.props,
-      {
-        autoScrollToSelected,
-        children: rawChildren,
-        className,
-        leadingScrollIndicatorClassName,
-        showUnderline,
-        trailingScrollIndicatorClassName,
-        type
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      autoScrollToSelected,
+      children: rawChildren,
+      className,
+      leadingScrollIndicatorClassName,
+      showUnderline,
+      trailingScrollIndicatorClassName,
+      type,
+      ...rest
+    } = this.props;
     const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
     let children = rawChildren;
     if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
-      children = _react.Children.map(rawChildren, child => {
+      children = Children.map(rawChildren, child => {
         const childProps = {};
         let childRef;
         if (autoScrollToSelected) {
@@ -122,49 +120,32 @@ class BpkHorizontalNav extends _react.Component {
         if (type === HORIZONTAL_NAV_TYPES.light) {
           childProps.type = HORIZONTAL_NAV_TYPES.light;
         }
-        return child ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        return child ? /*#__PURE__*/_jsx("div", {
           ref: childRef,
-          children: /*#__PURE__*/(0, _react.cloneElement)(child, childProps)
+          children: /*#__PURE__*/cloneElement(child, childProps)
         }) : null;
       });
     }
     return (
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      (0, _jsxRuntime.jsx)(_bpkComponentMobileScrollContainer.default, _objectSpread(_objectSpread({
+      _jsx(BpkMobileScrollContainer, {
         innerContainerTagName: "nav",
         className: classNames,
         leadingIndicatorClassName: leadingScrollIndicatorClassName,
         trailingIndicatorClassName: trailingScrollIndicatorClassName,
         scrollerRef: ref => {
           this.scrollRef = ref;
-        }
-      }, rest), {}, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        },
+        ...rest,
+        children: /*#__PURE__*/_jsx("div", {
           className: getClassName('bpk-horizontal-nav__list'),
           role: "tablist",
           children: children
         })
-      }))
+      })
     );
   }
 }
-_defineProperty(BpkHorizontalNav, "propTypes", {
-  children: _propTypes.default.node.isRequired,
-  autoScrollToSelected: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  leadingScrollIndicatorClassName: _propTypes.default.string,
-  showUnderline: _propTypes.default.bool,
-  trailingScrollIndicatorClassName: _propTypes.default.string,
-  type: _propTypes.default.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-});
-_defineProperty(BpkHorizontalNav, "defaultProps", {
-  autoScrollToSelected: false,
-  className: null,
-  leadingScrollIndicatorClassName: null,
-  showUnderline: true,
-  trailingScrollIndicatorClassName: null,
-  type: HORIZONTAL_NAV_TYPES.default
-});
-var _default = BpkHorizontalNav;
-exports.default = _default;
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };