@skyscanner/backpack-web 42.15.0 → 42.17.0

package/bpk-component-collapsible/src/useBpkCollapsible.js

@@ -0,0 +1,21 @@
+/*
+ * 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 { useCollapsible } from '@ark-ui/react';
+const useBpkCollapsible = props => useCollapsible(props);
+export default useBpkCollapsible;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
+.bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;box-shadow:none;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-cell{padding:0}.bpk-comparison-table__remove-cell-inner{padding:0 1rem calc(1rem*var(--bpk-image-opacity, 1));opacity:var(--bpk-image-opacity, 1);overflow:clip;max-block-size:calc(3.5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts

@@ -1,8 +1,6 @@
 import type { BpkCompareColumn } from './common-types';
-type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
-    removeLabel: string;
+type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'bestTag'> & {
     bestTagLabel: string;
-    onRemove: (itemId: string) => void;
 };
-declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js

@@ -17,7 +17,6 @@
  */
 
 import BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
-import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
 import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkComparisonTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,11 +26,7 @@ const BpkComparisonTableColumnHeader = ({
   bestTagLabel,
   headerContent,
   imageAlt = '',
-  imageSrc,
-  itemId,
-  onRemove,
-  removeA11yLabel,
-  removeLabel
+  imageSrc
 }) => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-comparison-table__header-content'),
   children: [/*#__PURE__*/_jsxs("div", {
@@ -52,15 +47,6 @@ const BpkComparisonTableColumnHeader = ({
   }), /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-comparison-table__header-id-section'),
     children: headerContent
-  }), /*#__PURE__*/_jsx("div", {
-    className: getClassName('bpk-comparison-table__remove-button'),
-    children: /*#__PURE__*/_jsx(BpkButton, {
-      type: BUTTON_TYPES.link,
-      size: SIZE_TYPES.small,
-      onClick: () => onRemove(itemId),
-      "aria-label": removeA11yLabel,
-      children: removeLabel
-    })
   })]
 });
 export default BpkComparisonTableColumnHeader;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js

@@ -17,6 +17,7 @@
  */
 
 import { useEffect, useRef } from 'react';
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
 import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
 import { cssModules } from "../../../bpk-react-utils";
 import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
@@ -74,19 +75,34 @@ const BpkComparisonTableContent = ({
     children: /*#__PURE__*/_jsxs(BpkTable, {
       children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
         displayColumns: displayColumns,
-        onRemove: onRemove,
         onAddMoreClick: onAddMoreClick,
         strings: strings
-      }), /*#__PURE__*/_jsx(BpkTableBody, {
+      }), /*#__PURE__*/_jsxs(BpkTableBody, {
         type: TABLE_BODY_TYPES.striped,
-        children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
+        children: [columns.length > 0 && /*#__PURE__*/_jsx(BpkTableRow, {
+          children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
+            // Zero padding needed for row collapse animation — no BpkTableCell prop.
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            className: getClassName('bpk-comparison-table__remove-cell'),
+            children: column && /*#__PURE__*/_jsx("div", {
+              className: getClassName('bpk-comparison-table__remove-cell-inner'),
+              children: /*#__PURE__*/_jsx(BpkButton, {
+                type: BUTTON_TYPES.link,
+                size: SIZE_TYPES.small,
+                onClick: () => onRemove(column.itemId),
+                "aria-label": column.removeA11yLabel,
+                children: strings.removeLabel
+              })
+            })
+          }, column ? `remove-${column.itemId}` : `remove-placeholder-${index}`))
+        }), rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
           children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
             // Placeholder need a distinct background colour not available via BpkTableCell props
             // eslint-disable-next-line @skyscanner/rules/forbid-component-props
             className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
             children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
           }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
-        }, rowId))
+        }, rowId))]
       })]
     })
   });

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts

@@ -1,9 +1,8 @@
 import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
 type BpkComparisonTableHeaderRowProps = {
     displayColumns: Array<BpkCompareColumn | null>;
-    onRemove: (itemId: string) => void;
     onAddMoreClick: () => void;
     strings: BpkComparisonTableStrings;
 };
-declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableHeaderRow;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js

@@ -23,22 +23,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const BpkComparisonTableHeaderRow = ({
   displayColumns,
   onAddMoreClick,
-  onRemove,
   strings
 }) => {
   const {
     addMoreDescription,
     addMoreLinkText,
-    bestTagLabel,
-    removeLabel
+    bestTagLabel
   } = strings;
   return /*#__PURE__*/_jsx(BpkTableHead, {
     children: /*#__PURE__*/_jsx(BpkTableRow, {
       children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
         children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
           ...column,
-          removeLabel: removeLabel,
-          onRemove: onRemove,
           bestTagLabel: bestTagLabel
         }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
           addMoreDescription: addMoreDescription,

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts

@@ -1,3 +1,3 @@
 import type { BpkComparisonTableRootProps } from './common-types';
-declare const BpkComparisonTableRoot: ({ children, isOpen, onClose }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkComparisonTableRoot: ({ children, isOpen, onClose, onOpen }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js

@@ -16,23 +16,35 @@
  * limitations under the License.
  */
 
+import { useEffect, useRef } from 'react';
 import { BpkModalV3 } from "../../../bpk-component-modal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BpkComparisonTableRoot = ({
   children,
   isOpen,
-  onClose
-}) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
-  open: isOpen,
-  onOpenChange: details => {
-    if (!details.open) {
-      onClose();
+  onClose,
+  onOpen
+}) => {
+  // Hold onOpen in a ref so inline callbacks (new identity each render) don't re-trigger the effect and double-fire while the modal stays open.
+  const onOpenRef = useRef(onOpen);
+  onOpenRef.current = onOpen;
+  useEffect(() => {
+    if (isOpen) {
+      onOpenRef.current?.();
     }
-  },
-  children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
-    children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
-      children: children
-    })]
-  })
-});
+  }, [isOpen]);
+  return /*#__PURE__*/_jsx(BpkModalV3.Root, {
+    open: isOpen,
+    onOpenChange: details => {
+      if (!details.open) {
+        onClose();
+      }
+    },
+    children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
+      children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
+        children: children
+      })]
+    })
+  });
+};
 export default BpkComparisonTableRoot;

package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts

@@ -44,6 +44,8 @@ export type BpkComparisonTableRootProps = {
     isOpen: boolean;
     /** Called when the modal close trigger is activated or Escape is pressed. */
     onClose: () => void;
+    /** Optional — called each time the modal opens: on mount if `isOpen` is `true`, and whenever `isOpen` transitions from `false` to `true`. Useful for analytics, logging, or fetching data on open. */
+    onOpen?: () => void;
     /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
     children: ReactNode;
 };

package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}
+.bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray button{min-height:0;padding-block:0}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}

package/bpk-component-horizontal-nav/index.d.ts

@@ -0,0 +1,6 @@
+import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES, type Props as NavProps } from './src/BpkHorizontalNav';
+import BpkHorizontalNavItem, { type Props as ItemProps, themeAttributes } from './src/BpkHorizontalNavItem';
+export type BpkHorizontalNavProps = NavProps;
+export type BpkHorizontalNavItemProps = ItemProps;
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;

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

@@ -14,7 +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.
- */import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
+ */
+
+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.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+declare const HORIZONTAL_NAV_TYPES: {
+    readonly default: "default";
+    readonly light: "light";
+};
+type Props = {
+    children: ReactNode;
+    ariaLabel?: string | null;
+    /**
+     * Ensures that the selected item is within view when loaded on narrow-screened devices.
+     */
+    autoScrollToSelected?: boolean;
+    className?: string | null;
+    leadingScrollIndicatorClassName?: string | null;
+    /**
+     * 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?: boolean;
+    trailingScrollIndicatorClassName?: string | null;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNav: ({ ariaLabel, autoScrollToSelected, children: rawChildren, className, leadingScrollIndicatorClassName, showUnderline, trailingScrollIndicatorClassName, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export type { Props };
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };

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

@@ -14,8 +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.
- */import PropTypes from 'prop-types';
-import { Component, Children, cloneElement } from 'react';
+ */
+
+import { Children, cloneElement, useCallback, useEffect, useRef } from 'react';
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkHorizontalNav.module.css";
@@ -29,138 +30,102 @@ const getPos = ref => {
   if (!ref) {
     return null;
   }
-  const pos = ref.getBoundingClientRect();
-  return pos;
+  return ref.getBoundingClientRect();
 };
-class BpkHorizontalNav extends Component {
-  constructor(props) {
-    super(props);
-    this.scrollRef = null;
-    this.selectedItemRef = null;
-  }
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      this.scrollSelectedIntoView(false);
-    });
-  }
-  componentDidUpdate() {
-    this.scrollSelectedIntoView(true);
-  }
-  scrollSelectedIntoView = useSmoothScroll => {
-    if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
-      return;
-    }
-    if (!this.scrollRef) {
+const BpkHorizontalNav = ({
+  ariaLabel = null,
+  autoScrollToSelected = false,
+  children: rawChildren,
+  className = null,
+  leadingScrollIndicatorClassName = null,
+  showUnderline = true,
+  trailingScrollIndicatorClassName = null,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}) => {
+  const scrollRef = useRef(null);
+  const selectedItemRef = useRef(null);
+  const isMounted = useRef(false);
+  const scrollSelectedIntoView = useCallback(useSmoothScroll => {
+    if (!autoScrollToSelected || !scrollRef.current || !selectedItemRef.current) {
       return;
     }
-    const selectedItemPos = getPos(this.selectedItemRef);
+    const selectedItemPos = getPos(selectedItemRef.current);
     if (!selectedItemPos) {
       return;
     }
-    const scrollPos = getPos(this.scrollRef);
+    const scrollPos = getPos(scrollRef.current);
     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({
+    if (scrollRef.current.scroll && typeof scrollRef.current.scroll === 'function' && useSmoothScroll) {
+      scrollRef.current.scroll({
         left: scrollAdjustment,
         behavior: 'smooth'
       });
-    } else if (this.scrollRef) {
-      this.scrollRef.scrollLeft = scrollAdjustment;
+    } else {
+      scrollRef.current.scrollLeft = scrollAdjustment;
     }
-  };
-  render() {
-    const {
-      ariaLabel,
-      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 = Children.map(rawChildren, child => {
-        const childProps = {};
-        let childRef;
-        if (autoScrollToSelected) {
-          if (child && child.props && child.props.selected) {
-            childRef = ref => {
-              this.selectedItemRef = ref;
-            };
-          }
-        }
-        if (type === HORIZONTAL_NAV_TYPES.light) {
-          childProps.type = HORIZONTAL_NAV_TYPES.light;
-        }
-        return child ? /*#__PURE__*/_jsx("div", {
-          ref: childRef,
-          children: /*#__PURE__*/cloneElement(child, childProps)
-        }) : null;
-      });
+  }, [autoScrollToSelected]);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      scrollSelectedIntoView(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (isMounted.current) {
+      scrollSelectedIntoView(true);
+    } else {
+      isMounted.current = true;
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("div", {
-        className: classNames,
-        children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
-          ariaLabel: ariaLabel,
-          innerContainerTagName: "nav",
-          leadingIndicatorClassName: leadingScrollIndicatorClassName,
-          trailingIndicatorClassName: trailingScrollIndicatorClassName,
-          scrollerRef: ref => {
-            this.scrollRef = ref;
-          },
-          ...rest,
-          children: /*#__PURE__*/_jsx("div", {
-            className: getClassName('bpk-horizontal-nav__list'),
-            role: "tablist",
-            children: children
-          })
-        })
-      })
-    );
+  });
+  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 = Children.map(rawChildren, child => {
+      const isElement = typeof child === 'object' && child !== null && 'props' in child;
+      const childProps = {};
+      let childRef;
+      if (autoScrollToSelected) {
+        if (isElement && child.props.selected) {
+          childRef = ref => {
+            selectedItemRef.current = ref;
+          };
+        }
+      }
+      if (type === HORIZONTAL_NAV_TYPES.light) {
+        childProps.type = HORIZONTAL_NAV_TYPES.light;
+      }
+      return isElement ? /*#__PURE__*/_jsx("div", {
+        ref: childRef,
+        children: /*#__PURE__*/cloneElement(child, childProps)
+      }) : null;
+    });
   }
-}
-BpkHorizontalNav.propTypes = {
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  /**
-   * Ensures that the selected item is within view when loaded on narrow-screened devices.
-   */
-  autoScrollToSelected: PropTypes.bool,
-  className: PropTypes.string,
-  leadingScrollIndicatorClassName: PropTypes.string,
-  /**
-   * 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,
-  trailingScrollIndicatorClassName: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNav.defaultProps = {
-  ariaLabel: null,
-  autoScrollToSelected: false,
-  className: null,
-  leadingScrollIndicatorClassName: null,
-  showUnderline: true,
-  trailingScrollIndicatorClassName: null,
-  type: HORIZONTAL_NAV_TYPES.default
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+      ariaLabel: ariaLabel ?? undefined,
+      innerContainerTagName: "nav",
+      leadingIndicatorClassName: leadingScrollIndicatorClassName ?? undefined,
+      trailingIndicatorClassName: trailingScrollIndicatorClassName ?? undefined,
+      scrollerRef: ref => {
+        scrollRef.current = ref;
+      },
+      ...rest,
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-horizontal-nav__list'),
+        role: "tablist",
+        children: children
+      })
+    })
+  });
 };
 export default BpkHorizontalNav;
 export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';
+type Props = {
+    children: ReactNode;
+    className?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    disabled?: boolean;
+    href?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    selected?: boolean;
+    spaceAround?: boolean;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNavItem: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const themeAttributes: string[];
+export type { Props };
+export { themeAttributes };
+export default BpkHorizontalNavItem;