@skyscanner/backpack-web 38.7.0 → 38.9.0

package/bpk-component-autosuggest/index.js

@@ -16,5 +16,6 @@
  * limitations under the License.
  */import BpkAutosuggest from "./src/BpkAutosuggest";
 import BpkAutosuggestSuggestion from "./src/BpkAutosuggestSuggestion";
+import BpkAutosuggestV2 from "./src/BpkAutosuggestV2/BpkAutosuggest";
 export default BpkAutosuggest;
-export { BpkAutosuggestSuggestion };
+export { BpkAutosuggestSuggestion, BpkAutosuggestV2 };

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

@@ -0,0 +1,67 @@
+import type { ReactElement, HTMLProps, InputHTMLAttributes, Ref } from 'react';
+export type BpkAutoSuggestTheme = {
+    container?: string;
+    containerOpen?: string;
+    suggestionsContainer?: string;
+    suggestionsContainerOpen?: string;
+    suggestionsList?: string;
+    suggestion?: string;
+    suggestionHighlighted?: string;
+    sectionContainer?: string;
+    sectionTitle?: string;
+    desktopSuggestionsContainer?: string;
+    desktopSuggestionsList?: string;
+    inputTextWrapper?: string;
+    inputWrapper?: string;
+    label?: string;
+    visuallyHidden?: string;
+};
+export type EnterKeyHintType = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+export type BpkInputRenderProps = InputHTMLAttributes<HTMLInputElement> & {
+    ref?: Ref<HTMLInputElement>;
+};
+export type BpkAutoSuggestProps<T> = {
+    suggestions: T[];
+    ariaLabels?: {
+        resultsList?: string;
+        label?: string;
+        clearButton?: string;
+        noResults?: string;
+    };
+    getSuggestionValue: (suggestion: T) => string;
+    inputProps: HTMLProps<HTMLInputElement>;
+    onSuggestionSelected?: (data?: {
+        inputValue: string;
+        suggestion?: T;
+    }) => void;
+    onSuggestionsFetchRequested: (value: string) => void;
+    onSuggestionsClearRequested: () => void;
+    renderSuggestion: (suggestion: T) => ReactElement;
+    id: string;
+    enterKeyHint?: EnterKeyHintType;
+    getA11yResultsMessage: (resultCount: number) => string;
+    defaultValue?: string;
+    isDesktop?: boolean;
+    onLoad?: (inputValue: string) => void;
+    onClick?: () => void;
+    renderBesideInput?: () => ReactElement;
+    showClear?: boolean;
+    theme?: Partial<BpkAutoSuggestTheme>;
+    highlightFirstSuggestion?: boolean;
+    shouldRenderSuggestions?: (value?: string) => boolean;
+    multiSection?: boolean;
+    getSectionSuggestions?: (section: T) => T[];
+    renderSectionTitle?: (section: T) => ReactElement | null;
+    alwaysRenderSuggestions?: boolean;
+    onInputValueChange?: (input: {
+        method: string;
+        newValue: string;
+    }) => void;
+    renderInputComponent?: (inputProps: BpkInputRenderProps) => ReactElement;
+    onSuggestionHighlighted?: (data: {
+        suggestion: T | null;
+    }) => void;
+    focusInputOnSuggestionClick?: boolean;
+};
+declare const BpkAutosuggest: import("react").ForwardRefExoticComponent<BpkAutoSuggestProps<any> & import("react").RefAttributes<HTMLInputElement>>;
+export default BpkAutosuggest;

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

@@ -0,0 +1,441 @@
+/*
+ * 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 { useEffect, forwardRef, useRef } from 'react';
+import { useFloating, offset, flip, shift, size, arrow as floatingArrow, FloatingArrow, autoUpdate, FloatingPortal } from '@floating-ui/react';
+import { useCombobox } from 'downshift';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkInput from "../../../bpk-component-input";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkAutosuggest.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const defaultTheme = {
+  container: getClassName('bpk-autosuggest__container'),
+  containerOpen: getClassName('bpk-autosuggest__container--open'),
+  suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
+  suggestionsContainerOpen: getClassName('bpk-autosuggest__suggestions-container--open'),
+  suggestionsList: getClassName('bpk-autosuggest__suggestions-list'),
+  suggestion: getClassName('bpk-autosuggest__suggestion-item'),
+  suggestionHighlighted: getClassName('bpk-autosuggest__suggestion-item--highlighted'),
+  sectionContainer: getClassName('bpk-autosuggest__section-container'),
+  sectionTitle: getClassName('bpk-autosuggest__section-title'),
+  input: getClassName('bpk-autosuggest__input'),
+  visuallyHidden: getClassName('bpk-autosuggest__visuallyhidden')
+};
+const strokeWidth = 0.0625;
+const BpkAutosuggest = /*#__PURE__*/forwardRef(({
+  alwaysRenderSuggestions,
+  ariaLabels,
+  defaultValue,
+  enterKeyHint,
+  focusInputOnSuggestionClick = false,
+  getA11yResultsMessage,
+  getSectionSuggestions,
+  getSuggestionValue,
+  highlightFirstSuggestion,
+  id,
+  inputProps,
+  isDesktop = true,
+  multiSection,
+  onClick,
+  onInputValueChange,
+  onLoad,
+  onSuggestionHighlighted,
+  onSuggestionSelected,
+  onSuggestionsClearRequested,
+  onSuggestionsFetchRequested,
+  renderBesideInput,
+  renderInputComponent,
+  renderSectionTitle,
+  renderSuggestion,
+  shouldRenderSuggestions,
+  showClear = false,
+  suggestions,
+  theme: customTheme = {}
+}, forwardedRef) => {
+  const ariaDescribedByLabelId = `${id}-srOnly`;
+  const theme = {
+    ...defaultTheme,
+    ...customTheme
+  };
+  const arrowRef = useRef(null);
+  const previousHighlightedIndexRef = useRef(null);
+  const hasInteractedRef = useRef(false);
+  const hasLoadedInitiallyRef = useRef(false);
+  const suggestionsCount = suggestions.length;
+  const hasSuggestions = suggestionsCount > 0;
+  function stateReducer(state, actionAndChanges) {
+    const {
+      changes,
+      type
+    } = actionAndChanges;
+    const shouldForceKeepOpen = alwaysRenderSuggestions && state.inputValue && state.inputValue.length > 0 && hasSuggestions && changes.isOpen === false;
+    if (shouldForceKeepOpen) {
+      return {
+        ...changes,
+        isOpen: true
+      };
+    }
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputClick:
+        return {
+          ...changes,
+          isOpen: state.isOpen
+        };
+      default:
+        {
+          const forceOpen = !isDesktop && !!changes.inputValue;
+          return {
+            ...changes,
+            isOpen: forceOpen ? true : changes.isOpen
+          };
+        }
+    }
+  }
+  const flattenedSuggestions = multiSection ? suggestions.flatMap(section => getSectionSuggestions?.(section) ?? []) : suggestions;
+  const {
+    getInputProps,
+    getItemProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    inputValue,
+    isOpen,
+    openMenu,
+    setInputValue
+  } = useCombobox({
+    stateReducer,
+    items: flattenedSuggestions,
+    itemToString(suggestion) {
+      return suggestion ? getSuggestionValue(suggestion) : '';
+    },
+    async onInputValueChange(changes) {
+      const {
+        inputValue: newInputValue,
+        isOpen: newIsOpen,
+        type
+      } = changes;
+      onInputValueChange?.({
+        method: type,
+        newValue: newInputValue ?? ''
+      });
+      if (newInputValue?.length) {
+        if (newIsOpen) {
+          onSuggestionsFetchRequested(newInputValue);
+        }
+      } else if (suggestionsCount) {
+        onSuggestionsClearRequested();
+      }
+    },
+    onSelectedItemChange(changes) {
+      const {
+        selectedItem
+      } = changes;
+      if (selectedItem) {
+        setInputValue(getSuggestionValue(selectedItem));
+        onSuggestionSelected?.({
+          suggestion: selectedItem,
+          inputValue
+        });
+        if (alwaysRenderSuggestions) {
+          // Manually clear suggestions or hide menu
+          onSuggestionsClearRequested();
+        }
+      }
+    },
+    getA11yStatusMessage() {
+      return getA11yResultsMessage?.(suggestionsCount) ?? '';
+    },
+    initialInputValue: defaultValue ?? '',
+    id
+  });
+  const {
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    placement: 'bottom-start',
+    middleware: isDesktop ? [offset(17), flip(), shift(), size({
+      apply({
+        elements,
+        rects
+      }) {
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }), floatingArrow({
+      element: arrowRef
+    })] : [],
+    whileElementsMounted: isDesktop ? autoUpdate : undefined
+  });
+  useEffect(() => {
+    if (defaultValue) {
+      setInputValue(defaultValue);
+    } else {
+      setInputValue('');
+    }
+  }, [defaultValue, setInputValue]);
+  useEffect(() => {
+    if (!isDesktop) {
+      onLoad?.(inputValue);
+    }
+    if (alwaysRenderSuggestions) {
+      hasLoadedInitiallyRef.current = true;
+      onSuggestionsFetchRequested(inputValue ?? '');
+    } else if (inputValue) {
+      onSuggestionsFetchRequested(inputValue);
+    }
+    // fire track event on load and forget about it after. We don't want to track again when anything (inputValue) changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (highlightedIndex === previousHighlightedIndexRef.current) return;
+    previousHighlightedIndexRef.current = highlightedIndex;
+    const currentSuggestion = highlightedIndex != null && highlightedIndex >= 0 ? flattenedSuggestions?.[highlightedIndex] ?? null : null;
+    onSuggestionHighlighted?.({
+      suggestion: currentSuggestion
+    });
+  }, [highlightedIndex, flattenedSuggestions, onSuggestionHighlighted]);
+  const handleInputInteraction = () => {
+    hasInteractedRef.current = true;
+    if (shouldRenderSuggestions) {
+      shouldRenderSuggestions(inputValue);
+      openMenu();
+    }
+    if (!isOpen && inputValue.length) {
+      onSuggestionsFetchRequested(inputValue);
+      openMenu();
+    } else {
+      onClick?.();
+    }
+
+    // Desktop destination autosuggest lives on the homepage and is "loaded/interacted with" via clicking on it
+    // Every other use case is within a new screen or modal so is interacted with via the user navigating into the modal/new screen
+    if (isDesktop) {
+      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?.();
+    }
+  };
+  const clearSuggestions = e => {
+    e?.stopPropagation();
+    setInputValue('');
+  };
+
+  // Render suggestions function to render single section suggestion
+  const renderSuggestions = ({
+    items,
+    sectionId,
+    sectionIndex,
+    sectionTitle,
+    startIndex = 0
+  }) => items.map((suggestion, localIndex) => {
+    const globalIndex = startIndex + localIndex;
+    const isFirst = globalIndex === 0;
+    const itemId = sectionId ? `item-${sectionIndex}-${localIndex}` : undefined;
+    const isHighlighted = highlightedIndex === globalIndex || highlightFirstSuggestion && isFirst && highlightedIndex === -1;
+    return /*#__PURE__*/_jsx("li", {
+      "aria-labelledby": sectionId && itemId ? `${sectionId} ${itemId}` : undefined,
+      ...getItemProps({
+        item: suggestion,
+        index: globalIndex,
+        onClick: handleSuggestionClick,
+        'aria-selected': highlightedIndex === globalIndex
+      }),
+      className: getClassName(theme.suggestion, isHighlighted && theme.suggestionHighlighted),
+      children: itemId ? /*#__PURE__*/_jsx("span", {
+        id: itemId,
+        children: renderSuggestion(suggestion)
+      }) : renderSuggestion(suggestion)
+    }, sectionTitle ? `${sectionTitle}-${getSuggestionValue(suggestion)}` : getSuggestionValue(suggestion));
+  });
+
+  // renderSections function to render multi-section suggestions
+  const renderSections = sections => {
+    let suggestionIndex = 0;
+    return sections.map((section, sectionIndex) => {
+      const sectionSuggestions = getSectionSuggestions?.(section) ?? [];
+      if (sectionSuggestions.length === 0) {
+        return null;
+      }
+      const sectionId = `section-${sectionIndex}`;
+      const sectionTitleElement = renderSectionTitle?.(section);
+      const sectionTitle = typeof sectionTitleElement === 'string' ? sectionTitleElement : `section-${sectionIndex}`;
+      const renderedItems = renderSuggestions({
+        items: sectionSuggestions,
+        sectionId,
+        sectionTitle,
+        sectionIndex,
+        startIndex: suggestionIndex
+      });
+      suggestionIndex += sectionSuggestions.length;
+      return /*#__PURE__*/_jsxs("section", {
+        className: theme.sectionContainer,
+        role: "group",
+        "aria-labelledby": sectionId,
+        children: [/*#__PURE__*/_jsx("div", {
+          id: sectionId,
+          className: theme.sectionTitle,
+          children: sectionTitleElement
+        }), renderedItems]
+      }, sectionTitle);
+    });
+  };
+  const showSuggestions = hasSuggestions && (alwaysRenderSuggestions && hasLoadedInitiallyRef.current && !hasInteractedRef.current || isOpen);
+  const renderList = () => multiSection ? renderSections(suggestions) : renderSuggestions({
+    items: suggestions
+  });
+
+  // Render the input component
+  const renderInput = () => {
+    const inputAriaLabel = inputValue || inputProps.placeholder;
+    const {
+      className: inputClassName,
+      name: inputName,
+      onClick: inputOnClick,
+      onKeyDown: inputOnKeyDown,
+      type: typeFromInputProps,
+      ...restInputProps
+    } = inputProps;
+    const {
+      ref: downshiftInputRef,
+      value,
+      ...finalInputProps
+    } = getInputProps({
+      onKeyDown,
+      ref: forwardedRef,
+      onClick: handleInputInteraction,
+      onFocus: handleInputInteraction,
+      'aria-describedby': ariaDescribedByLabelId,
+      'aria-label': inputAriaLabel,
+      className: inputClassName || theme.input,
+      ...restInputProps
+    });
+    const setInputRef = node => {
+      refs.setReference(node);
+
+      // convert input ref from Downshift
+      if (typeof downshiftInputRef === 'function') {
+        downshiftInputRef(node);
+      } else if (downshiftInputRef && typeof downshiftInputRef === 'object' && 'current' in downshiftInputRef) {
+        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,
+        enterKeyHint,
+        value,
+        ...finalInputProps
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      className: getClassName(theme.label),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: getClassName(theme.inputTextWrapper),
+        children: [/*#__PURE__*/_jsx("label", {
+          "aria-hidden": true,
+          ...getLabelProps(),
+          children: renderBesideInput?.()
+        }), /*#__PURE__*/_jsx("span", {
+          className: theme.visuallyHidden,
+          id: ariaDescribedByLabelId,
+          children: ariaLabels?.label && ariaLabels.label
+        }), /*#__PURE__*/_jsx("div", {
+          className: getClassName(theme.inputWrapper),
+          children: /*#__PURE__*/_jsx(BpkInput, {
+            value: normalizedInputValue,
+            inputRef: setInputRef,
+            clearButtonMode: showClear ? 'whileEditing' : 'never',
+            clearButtonLabel: ariaLabels?.clearButton || 'Clear input',
+            onClear: clearSuggestions,
+            name: inputName || id,
+            id: id,
+            ...finalInputProps,
+            enterKeyHint: enterKeyHint
+          })
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName(theme.container, suggestionsCount && theme.containerOpen),
+    children: [renderInput(), showSuggestions && (isDesktop ? /*#__PURE__*/_jsx(FloatingPortal, {
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        className: getClassName(theme.suggestionsContainer, isDesktop && theme.desktopSuggestionsContainer, showSuggestions && theme.suggestionsContainerOpen),
+        children: [/*#__PURE__*/_jsx(FloatingArrow, {
+          ref: arrowRef,
+          context: context,
+          className: getClassName('bpk-autosuggest__arrow'),
+          role: "presentation",
+          stroke: surfaceHighlightDay,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/_jsx("ul", {
+          ...getMenuProps({
+            ...(ariaLabels?.resultsList && {
+              'aria-label': ariaLabels.resultsList
+            })
+          }),
+          className: getClassName(theme.suggestionsList, isDesktop && theme.desktopSuggestionsList),
+          children: renderList()
+        })]
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      className: getClassName(theme.suggestionsContainer, showSuggestions && theme.suggestionsContainerOpen),
+      children: /*#__PURE__*/_jsx("ul", {
+        ...getMenuProps({
+          ...(ariaLabels?.resultsList && {
+            'aria-label': ariaLabels.resultsList
+          })
+        }),
+        className: getClassName(theme.suggestionsList),
+        children: renderList()
+      })
+    }))]
+  });
+});
+export default BpkAutosuggest;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.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)}

package/bpk-component-modal/src/BpkModalInner.js

@@ -101,7 +101,7 @@ const BpkModalInner = ({
           leadingButton: accessoryViewFinal,
           trailingButton: closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
             onClick: onClose,
-            onDark: modalStyle === MODAL_STYLING.surfaceContrast,
+            alternate: modalStyle === MODAL_STYLING.surfaceContrast,
             children: closeText
           }) : /*#__PURE__*/_jsx(BpkCloseButton, {
             label: closeLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.7.0",
+  "version": "38.9.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",
-    "@radix-ui/react-slider": "1.1.2",
+    "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
     "@skyscanner/bpk-foundations-web": "^22.1.0",
     "@skyscanner/bpk-svgs": "^20.8.0",
@@ -33,6 +33,7 @@
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
+    "downshift": "^9.0.10",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",