@skyscanner/backpack-web 42.13.1 → 42.13.3

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

@@ -101,6 +101,18 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       changes,
       type
     } = actionAndChanges;
+
+    // Intercept InputBlur before the alwaysRenderSuggestions early-return
+    if (type === useCombobox.stateChangeTypes.InputBlur) {
+      const keepOpen = Boolean(alwaysRenderSuggestions && hasSuggestions);
+      return {
+        ...changes,
+        isOpen: keepOpen,
+        highlightedIndex: -1,
+        selectedItem: state.selectedItem,
+        inputValue: state.inputValue
+      };
+    }
     const shouldForceKeepOpen = alwaysRenderSuggestions && hasSuggestions && changes.isOpen === false;
     if (shouldForceKeepOpen) {
       return {
@@ -205,6 +217,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       onSuggestionHighlighted?.({
         suggestion: currentSuggestion
       });
+
+      // Only arm auto-select-on-blur for non-mouse-driven highlight changes.
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
+        savedHighlightedIndexRef.current = newIndex ?? null;
+      }
       const isArrowKey = type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp;
       if (isArrowKey) {
         if (currentSuggestion) {
@@ -272,8 +289,6 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (highlightedIndex === previousHighlightedIndexRef.current) return;
     previousHighlightedIndexRef.current = highlightedIndex;
-    // Save highlighted index to allow auto-selection on blur
-    savedHighlightedIndexRef.current = highlightedIndex;
     const currentSuggestion = highlightedIndex != null && highlightedIndex >= 0 ? flattenedSuggestions?.[highlightedIndex] ?? null : null;
     if (!currentSuggestion && originalInputOnPreviewRef.current !== null) {
       if ((inputValue ?? '') !== originalInputOnPreviewRef.current) {
@@ -463,8 +478,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         highlightedSuggestion = firstSuggestion;
       }
       if (highlightedSuggestion) {
-        // Use setTimeout to ensure selectItem runs after the blur event completes
+        // Use setTimeout to ensure selectItem runs after the blur event completes.
         setTimeout(() => {
+          if (committedSelectionRef.current) {
+            return;
+          }
           selectItem(highlightedSuggestion);
         }, 0);
       }

package/bpk-component-chatbot-input/src/BpkChatbotInput.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-no-touch-support .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:active{border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:focus-within{box-shadow:0 0 0 .03125rem #0062e3;box-shadow:0 0 0 .03125rem var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--composer{position:relative;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;background:#fff;box-sizing:border-box;will-change:transform,box-shadow;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-chatbot-input--composer--with-shadow:focus-within{box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-chatbot-input--composer--overLimit{transform:translateY(-0.25rem)}
+.bpk-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-no-touch-support .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:active{border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:focus-within{box-shadow:0 0 0 .03125rem #0062e3;box-shadow:0 0 0 .03125rem var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--composer{position:relative;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;background:#fff;box-sizing:border-box;will-change:transform,box-shadow;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-chatbot-input--composer--with-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chatbot-input--composer--with-shadow:focus-within{box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-chatbot-input--composer--overLimit{transform:translateY(-0.25rem)}

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}
+.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--container{outline:none}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__body--padded:not(:last-of-type){padding-bottom:0}.bpk-popover__header{display:flex;padding:1rem 1rem 0;justify-content:space-between}.bpk-popover__header~.bpk-popover__body--padded{padding-top:.5rem}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right}html[dir=rtl] .bpk-popover__footer{text-align:left}.bpk-popover__action{padding:0 1rem 1rem 1rem}

package/package.json

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