@skyscanner/backpack-web 40.1.0 → 40.1.2

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js

@@ -76,6 +76,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   };
   const arrowRef = useRef(null);
   const previousHighlightedIndexRef = useRef(null);
+  const originalInputOnPreviewRef = useRef(null);
   const hasInteractedRef = useRef(false);
   const hasLoadedInitiallyRef = useRef(false);
   const suggestionsCount = suggestions.length;
@@ -135,12 +136,14 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         method: type,
         newValue: newInputValue ?? ''
       });
-      if (newInputValue?.length > 0) {
-        if (newIsOpen) {
-          onSuggestionsFetchRequested(newInputValue);
+      if (type === useCombobox.stateChangeTypes.InputChange) {
+        if (newInputValue?.length > 0) {
+          if (newIsOpen) {
+            onSuggestionsFetchRequested(newInputValue);
+          }
+        } else {
+          onSuggestionsFetchRequested('');
         }
-      } else {
-        onSuggestionsFetchRequested('');
       }
     },
     onSelectedItemChange(changes) {
@@ -149,6 +152,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       } = changes;
       if (selectedItem) {
         setInputValue(getSuggestionValue(selectedItem));
+        originalInputOnPreviewRef.current = null;
         onSuggestionSelected?.({
           suggestion: selectedItem,
           inputValue
@@ -163,7 +167,34 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       return getA11yResultsMessage?.(suggestionsCount) ?? '';
     },
     initialInputValue: defaultValue ?? '',
-    id
+    id,
+    onHighlightedIndexChange(changes) {
+      const {
+        highlightedIndex: newIndex,
+        type
+      } = changes;
+      const currentSuggestion = newIndex != null && newIndex >= 0 ? flattenedSuggestions?.[newIndex] ?? null : null;
+      onSuggestionHighlighted?.({
+        suggestion: currentSuggestion
+      });
+      const isArrowKey = type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp;
+      if (isArrowKey) {
+        if (currentSuggestion) {
+          if (originalInputOnPreviewRef.current === null) {
+            originalInputOnPreviewRef.current = inputValue ?? '';
+          }
+          const previewValue = getSuggestionValue(currentSuggestion);
+          if (previewValue !== inputValue) {
+            setInputValue(previewValue);
+          }
+        } else if (originalInputOnPreviewRef.current !== null) {
+          if ((inputValue ?? '') !== originalInputOnPreviewRef.current) {
+            setInputValue(originalInputOnPreviewRef.current);
+          }
+          originalInputOnPreviewRef.current = null;
+        }
+      }
+    }
   });
   const {
     context,
@@ -171,6 +202,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     refs
   } = useFloating({
     placement: 'bottom-start',
+    // Use fixed strategy on desktop to avoid stacking context issues with table headers
+    // Fixed positioning is relative to viewport, not affected by parent transforms/overflows
+    ...(isDesktop && {
+      strategy: 'fixed'
+    }),
     middleware: isDesktop ? [offset(4), flip(), shift(), size({
       apply({
         elements,
@@ -209,10 +245,16 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     if (highlightedIndex === previousHighlightedIndexRef.current) return;
     previousHighlightedIndexRef.current = highlightedIndex;
     const currentSuggestion = highlightedIndex != null && highlightedIndex >= 0 ? flattenedSuggestions?.[highlightedIndex] ?? null : null;
+    if (!currentSuggestion && originalInputOnPreviewRef.current !== null) {
+      if ((inputValue ?? '') !== originalInputOnPreviewRef.current) {
+        setInputValue(originalInputOnPreviewRef.current);
+      }
+      originalInputOnPreviewRef.current = null;
+    }
     onSuggestionHighlighted?.({
       suggestion: currentSuggestion
     });
-  }, [highlightedIndex, flattenedSuggestions, onSuggestionHighlighted]);
+  }, [highlightedIndex, flattenedSuggestions, onSuggestionHighlighted, inputValue, setInputValue]);
   const handleInputInteraction = () => {
     hasInteractedRef.current = true;
     if (shouldRenderSuggestions) {
@@ -389,6 +431,14 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       refs.setReference(containerWrapperRef.current);
     }
   }, [refs]);
+
+  // Call getMenuProps on every render to satisfy Downshift.
+  // When hidden, use suppressRefError to avoid ref warnings.
+  if (!showSuggestions) {
+    getMenuProps({}, {
+      suppressRefError: true
+    });
+  }
   return /*#__PURE__*/_jsxs("div", {
     ref: containerWrapperRef,
     className: getClassName(theme.container, suggestionsCount && theme.containerOpen),

package/bpk-component-button/BpkButtonDestructive.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonDestructive is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.destructive} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Destructive button component
+ */
 declare const BpkButtonDestructive: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonDestructive;

package/bpk-component-button/BpkButtonDestructive.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonDestructive is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.destructive} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Destructive button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonDestructive = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonFeatured.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonFeatured is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.featured} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Featured button component
+ */
 declare const BpkButtonFeatured: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonFeatured;

package/bpk-component-button/BpkButtonFeatured.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonFeatured is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.featured} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Featured button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonFeatured = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonLink.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonLink is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.link} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Link button component
+ */
 declare const BpkButtonLink: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonLink;

package/bpk-component-button/BpkButtonLink.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonLink is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.link} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Link button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonLink = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonLinkOnDark.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonLinkOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.linkOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Link on dark button component
+ */
 declare const BpkButtonLinkOnDark: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonLinkOnDark;

package/bpk-component-button/BpkButtonLinkOnDark.js

@@ -16,6 +16,12 @@
  * limitations under the License.
  */
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonLinkOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.linkOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Link on dark button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonLinkOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonPrimary.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonPrimary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primary} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary button component
+ */
 declare const BpkButtonPrimary: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonPrimary;

package/bpk-component-button/BpkButtonPrimary.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonPrimary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primary} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonPrimary = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props

package/bpk-component-button/BpkButtonPrimaryOnDark.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonPrimaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary on dark button component
+ */
 declare const BpkButtonPrimaryOnDark: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonPrimaryOnDark;

package/bpk-component-button/BpkButtonPrimaryOnDark.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonPrimaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary on dark button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonPrimaryOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonPrimaryOnLight.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonPrimaryOnLight is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnLight} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary on light button component
+ */
 declare const BpkButtonPrimaryOnLight: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonPrimaryOnLight;

package/bpk-component-button/BpkButtonPrimaryOnLight.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonPrimaryOnLight is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnLight} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Primary on light button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonPrimaryOnLight = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonSecondary.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonSecondary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondary} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Secondary button component
+ */
 declare const BpkButtonSecondary: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonSecondary;

package/bpk-component-button/BpkButtonSecondary.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonSecondary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondary} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Secondary button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonSecondary = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/BpkButtonSecondaryOnDark.d.ts

@@ -1,3 +1,8 @@
 import { type Props } from './src/BpkButton';
+/**
+ * @deprecated BpkButtonSecondaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondaryOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Secondary on dark button component
+ */
 declare const BpkButtonSecondaryOnDark: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkButtonSecondaryOnDark;

package/bpk-component-button/BpkButtonSecondaryOnDark.js

@@ -17,6 +17,12 @@
  */
 
 import BpkButton from "./src/BpkButton";
+
+/**
+ * @deprecated BpkButtonSecondaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondaryOnDark} instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Secondary on dark button component
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkButtonSecondaryOnDark = props => /*#__PURE__*/_jsx(BpkButton, {
   ...props,

package/bpk-component-button/index.d.ts

@@ -9,7 +9,7 @@ import BpkButtonSecondary from './BpkButtonSecondary';
 import BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark';
 import BpkButton from './src/BpkButton';
 import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton';
-export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types';
+export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButtonV2/common-types';
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './themeAttributes';
 export default BpkButton;
 export { BpkButtonPrimary, BpkButtonPrimaryOnDark, BpkButtonPrimaryOnLight, BpkButtonSecondary, BpkButtonSecondaryOnDark, BpkButtonDestructive, BpkButtonLink, BpkButtonLinkOnDark, BpkButtonFeatured, BpkButtonV2, };

package/bpk-component-button/src/BpkButton.d.ts

@@ -10,6 +10,11 @@ export type Props = CommonProps & {
     link?: boolean;
     linkOnDark?: boolean;
 };
+/**
+ * @deprecated BpkButton is deprecated and will be removed in a future major version. Please use BpkButtonV2 instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Button component
+ */
 declare const BpkButton: {
     ({ destructive, featured, link, linkOnDark, primaryOnDark, primaryOnLight, secondary, secondaryOnDark, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
     propTypes: {

package/bpk-component-button/src/BpkButton.js

@@ -19,6 +19,11 @@ import PropTypes from 'prop-types';
 import BpkButtonBase, { BUTTON_TYPES } from "./BpkButtonBase";
 import { propTypes } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated BpkButton is deprecated and will be removed in a future major version. Please use BpkButtonV2 instead.
+ * @param {Props} props - Component props
+ * @returns {JSX.Element} Button component
+ */
 const BpkButton = ({
   destructive = false,
   featured = false,

package/package.json

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