@skyscanner/backpack-web 38.9.0 → 38.10.0

package/bpk-animate-height/src/AnimateHeight.js

@@ -44,47 +44,49 @@ class AnimateHeight extends Component {
       this.contentElement.style.display = 'none';
     }
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps, prevState) {
     const {
-      height
+      duration,
+      height,
+      transitionOverflow
     } = this.props;
 
     // Check if 'height' prop has changed
-    if (this.contentElement && nextProps.height !== height) {
+    if (this.contentElement && height !== prevProps.height) {
       // Cache content height
       this.contentElement.style.display = '';
-      this.contentElement.style.overflow = this.props.transitionOverflow;
+      this.contentElement.style.overflow = transitionOverflow;
       const contentHeight = this.contentElement.offsetHeight;
       this.contentElement.style.overflow = '';
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
-      let timeoutOverflow = this.props.transitionOverflow;
-      let timeoutDuration = nextProps.duration;
+      let timeoutOverflow = transitionOverflow;
+      let timeoutDuration = duration;
       clearTimeout(this.timeoutID);
-      if (isNumber(nextProps.height)) {
+      if (isNumber(height)) {
         // If new height is a number
-        newHeight = nextProps.height < 0 ? 0 : nextProps.height;
+        newHeight = height < 0 ? 0 : height;
       } else {
-        // If not, animate to content height
-        // and then reset to auto
+        // If not, animate to content height and then reset to auto
         newHeight = contentHeight;
         shouldSetTimeout = true;
         timeoutHeight = 'auto';
         timeoutOverflow = 'visible';
       }
-      if (this.state.height === 'auto') {
-        // If previous height was 'auto'
-        // set it explicitly to be able to use transition
+
+      // If previous height was 'auto'
+      // set it explicitly to be able to use transition
+      if (prevState.height === 'auto') {
         shouldSetTimeout = true;
         timeoutHeight = newHeight;
         newHeight = contentHeight;
         timeoutDuration = 50;
       }
-      this.setState((state, props) => ({
+      this.setState({
         height: newHeight,
-        overflow: props.transitionOverflow
-      }));
+        overflow: transitionOverflow
+      });
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, HTMLProps, InputHTMLAttributes, Ref } from 'react';
+import type { ReactElement, HTMLProps, InputHTMLAttributes, Ref, SyntheticEvent } from 'react';
 export type BpkAutoSuggestTheme = {
     container?: string;
     containerOpen?: string;
@@ -19,6 +19,7 @@ export type BpkAutoSuggestTheme = {
 export type EnterKeyHintType = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export type BpkInputRenderProps = InputHTMLAttributes<HTMLInputElement> & {
     ref?: Ref<HTMLInputElement>;
+    onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void;
 };
 export type BpkAutoSuggestProps<T> = {
     suggestions: T[];

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

@@ -85,7 +85,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       changes,
       type
     } = actionAndChanges;
-    const shouldForceKeepOpen = alwaysRenderSuggestions && state.inputValue && state.inputValue.length > 0 && hasSuggestions && changes.isOpen === false;
+    const shouldForceKeepOpen = alwaysRenderSuggestions && hasSuggestions && changes.isOpen === false;
     if (shouldForceKeepOpen) {
       return {
         ...changes,
@@ -135,12 +135,12 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         method: type,
         newValue: newInputValue ?? ''
       });
-      if (newInputValue?.length) {
+      if (newInputValue?.length > 0) {
         if (newIsOpen) {
           onSuggestionsFetchRequested(newInputValue);
         }
-      } else if (suggestionsCount) {
-        onSuggestionsClearRequested();
+      } else {
+        onSuggestionsFetchRequested('');
       }
     },
     onSelectedItemChange(changes) {
@@ -171,7 +171,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     refs
   } = useFloating({
     placement: 'bottom-start',
-    middleware: isDesktop ? [offset(17), flip(), shift(), size({
+    middleware: isDesktop ? [offset(4), flip(), shift(), size({
       apply({
         elements,
         rects
@@ -222,6 +222,8 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     if (!isOpen && inputValue.length) {
       onSuggestionsFetchRequested(inputValue);
       openMenu();
+    } else if (alwaysRenderSuggestions && !inputValue) {
+      onSuggestionsFetchRequested('');
     } else {
       onClick?.();
     }
@@ -232,22 +234,6 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       onLoad?.(inputValue);
     }
   };
-  const onKeyDown = e => {
-    if (e.key !== 'Enter') {
-      return;
-    }
-    if (e.key === 'Enter' && suggestionsCount) {
-      onSuggestionSelected?.({
-        suggestion: suggestions[0],
-        inputValue
-      });
-    }
-    if (defaultValue) {
-      handleInputInteraction();
-    } else if (!hasSuggestions) {
-      onSuggestionSelected?.();
-    }
-  };
   const handleSuggestionClick = () => {
     if (!focusInputOnSuggestionClick) {
       document.activeElement?.blur?.();
@@ -256,6 +242,10 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   const clearSuggestions = e => {
     e?.stopPropagation();
     setInputValue('');
+    if (alwaysRenderSuggestions) {
+      hasLoadedInitiallyRef.current = true;
+      onSuggestionsFetchRequested('');
+    }
   };
 
   // Render suggestions function to render single section suggestion
@@ -309,7 +299,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         className: theme.sectionContainer,
         role: "group",
         "aria-labelledby": sectionId,
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [sectionTitleElement && /*#__PURE__*/_jsx("div", {
           id: sectionId,
           className: theme.sectionTitle,
           children: sectionTitleElement
@@ -338,7 +328,6 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       value,
       ...finalInputProps
     } = getInputProps({
-      onKeyDown,
       ref: forwardedRef,
       onClick: handleInputInteraction,
       onFocus: handleInputInteraction,
@@ -348,7 +337,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       ...restInputProps
     });
     const setInputRef = node => {
-      refs.setReference(node);
+      if (refs.reference?.current === node) return;
 
       // convert input ref from Downshift
       if (typeof downshiftInputRef === 'function') {
@@ -357,12 +346,6 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         downshiftInputRef.current = node;
       }
     };
-    let normalizedInputValue = '';
-    if (Array.isArray(value)) {
-      normalizedInputValue = value.join(', ');
-    } else if (typeof value === 'string' || typeof value === 'number') {
-      normalizedInputValue = value;
-    }
     if (renderInputComponent) {
       return renderInputComponent({
         ref: setInputRef,
@@ -386,21 +369,28 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         }), /*#__PURE__*/_jsx("div", {
           className: getClassName(theme.inputWrapper),
           children: /*#__PURE__*/_jsx(BpkInput, {
-            value: normalizedInputValue,
+            value: inputValue,
             inputRef: setInputRef,
             clearButtonMode: showClear ? 'whileEditing' : 'never',
             clearButtonLabel: ariaLabels?.clearButton || 'Clear input',
-            onClear: clearSuggestions,
             name: inputName || id,
             id: id,
             ...finalInputProps,
-            enterKeyHint: enterKeyHint
+            enterKeyHint: enterKeyHint,
+            onClear: clearSuggestions
           })
         })]
       })
     });
   };
+  const containerWrapperRef = useRef(null);
+  useEffect(() => {
+    if (containerWrapperRef.current) {
+      refs.setReference(containerWrapperRef.current);
+    }
+  }, [refs]);
   return /*#__PURE__*/_jsxs("div", {
+    ref: containerWrapperRef,
     className: getClassName(theme.container, suggestionsCount && theme.containerOpen),
     children: [renderInput(), showSuggestions && (isDesktop ? /*#__PURE__*/_jsx(FloatingPortal, {
       children: /*#__PURE__*/_jsxs("div", {

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

package/bpk-component-image/src/BpkBackgroundImage.d.ts

@@ -25,7 +25,6 @@ declare class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
     };
     constructor(props: BpkBackgroundImageProps);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(newProps: BpkBackgroundImageProps): void;
     componentDidUpdate(prevProps: BpkBackgroundImageProps): void;
     onBackgroundImageError: () => void;
     onBackgroundImageLoad: () => void;

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -43,13 +43,12 @@ class BpkBackgroundImage extends Component {
       this.startImageLoad();
     }
   }
-  UNSAFE_componentWillReceiveProps(newProps) {
-    if (!this.props.inView && newProps.inView) {
-      this.startImageLoad();
-    }
-  }
   componentDidUpdate(prevProps) {
-    if (prevProps.src !== this.props.src) {
+    const {
+      inView,
+      src
+    } = this.props;
+    if (prevProps.src !== src || inView && !prevProps.inView) {
       this.startImageLoad();
     }
   }

package/package.json

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