[BpkAutosuggest][CLOV-354]Make BpkAutosuggestV2 as default

examples/bpk-component-autosuggest/examples.js

@@ -20,7 +20,8 @@
 
 import { Component } from 'react';
 
-import BpkAutosuggest, {
+import {
+  BpkAutosuggestLegacy,
   BpkAutosuggestSuggestion,
 } from '../../packages/bpk-component-autosuggest';
 import { withRtlSupport } from '../../packages/bpk-component-icon';
@@ -148,7 +149,7 @@
     };
   }
 
   onChange = (e: SyntheticEvent<any>, { newValue }: { newValue: string }) => {
     this.setState({
       value: newValue,
     });
@@ -174,7 +175,7 @@
     };
 
     return (
-      <BpkAutosuggest
+      <BpkAutosuggestLegacy
         alwaysRenderSuggestions={this.props.alwaysRenderSuggestions}
         suggestions={suggestions}
         onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}

examples/bpk-component-autosuggest/stories.js

@@ -19,16 +19,15 @@
 import { Title, Markdown, ArgTypes } from '@storybook/addon-docs/blocks';
 import { userEvent, within } from 'storybook/test';
 
-import BpkAutosuggest from '../../packages/bpk-component-autosuggest/src/BpkAutosuggest';
-import BpkAutosuggestSuggestion from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion';
+import { BpkAutosuggestLegacy, BpkAutosuggestSuggestion } from '../../packages/bpk-component-autosuggest';
 
 import AutosuggestExample from './examples';
 
 import type { StoryObj } from '@storybook/react-webpack5';
 
 export default {
-  title: 'bpk-component-autosuggest',
-  component: BpkAutosuggest,
+  title: 'bpk-component-autosuggest/legacy',
+  component: BpkAutosuggestLegacy,
   subcomponents: {
     BpkAutosuggestSuggestion,
   },
@@ -40,7 +39,7 @@ export default {
           <ArgTypes exclude={['zoomEnabled']} />
           <Markdown>
             {
-            `**BpkAutosuggest:**
+            `**BpkAutosuggestLegacy:**
             Please refer to react-autosuggest's
             documentation for a full list of [props](https://github.com/moroshko/react-autosuggest#props).
             **Note:** The \`inputProps\` object is passed directly to a

examples/bpk-component-autosuggestV2/examples.tsx

@@ -18,11 +18,12 @@
 import { Component } from 'react';
 import type { ReactElement, InputHTMLAttributes, LegacyRef } from 'react';
 
-// @ts-ignore
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkAutosuggest from '../../packages/bpk-component-autosuggest';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 // BpkAutosuggestSuggestion is a Flow-based JS file without type declarations.
 // TODO: This will be removed once the file is migrated to TypeScript.
 import BpkAutosuggestSuggestion from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion';
-import BpkAutosuggestV2 from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest';
 import { withRtlSupport } from '../../packages/bpk-component-icon';
 import FlightIcon from '../../packages/bpk-component-icon/lg/flight';
 
@@ -243,7 +244,7 @@ class AutosuggestExample extends Component<Props, State> {
     };
 
     return (
-      <BpkAutosuggestV2
+      <BpkAutosuggest
         ariaLabels={{ label: 'input label', resultsList: 'results' }}
         alwaysRenderSuggestions={alwaysRenderSuggestions}
         suggestions={suggestions}

examples/bpk-component-autosuggestV2/stories.tsx

@@ -20,19 +20,19 @@ import type { ReactElement, InputHTMLAttributes, LegacyRef } from 'react';
 
 import { userEvent, within } from 'storybook/test';
 
-// @ts-ignore
-// BpkAutosuggestSuggestion is a Flow-based JS file without type declarations.
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkAutosuggest from '../../packages/bpk-component-autosuggest';
+// @ts-expect-error: BpkAutosuggestSuggestion is a Flow-based JS file without type declarations.
 // TODO: This will be removed once the file is migrated to TypeScript.
 import BpkAutosuggestSuggestion from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion';
-import BpkAutosuggestV2 from '../../packages/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest';
 
 import AutosuggestExample from './examples';
 
 import type { StoryObj } from '@storybook/react';
 
 export default {
-  title: 'bpk-component-autosuggestV2',
-  component: BpkAutosuggestV2,
+  title: 'bpk-component-autosuggest',
+  component: BpkAutosuggest,
   subcomponents: {
     BpkAutosuggestSuggestion,
   },

examples/bpk-component-fieldset/examples.tsx

@@ -130,29 +130,19 @@ let instances = 0;
 
 class Autosuggest extends Component<
   Record<string, never>,
-  { value: string; suggestions: Office[] }
+  { suggestions: Office[] }
 > {
   constructor(props: Record<string, never>) {
     super(props);
 
     instances += instances;
 
     this.state = {
-      value: '',
       suggestions: [],
     };
   }
 
-  onChange = (
-    _event: ChangeEvent<HTMLInputElement>,
-    { newValue }: { newValue: string },
-  ) => {
-    this.setState({
-      value: newValue,
-    });
-  };
-
-  onSuggestionsFetchRequested = ({ value }: { value: string }) => {
+  onSuggestionsFetchRequested = (value: string) => {
     this.setState({
       suggestions: getSuggestions(value),
     });
@@ -165,14 +155,11 @@ class Autosuggest extends Component<
   };
 
   render() {
-    const { suggestions, value } = this.state;
+    const { suggestions } = this.state;
 
     const inputProps = {
-      id: 'carhire-search-controls-location-pick-up',
       name: 'my_autosuggest',
-      value,
       placeholder: 'Enter a destination name',
-      onChange: this.onChange,
     };
 
     return (
@@ -183,6 +170,15 @@ class Autosuggest extends Component<
         description="The final price will be adjusted based on your selection"
       >
         <BpkAutosuggest
+          id="carhire-search-controls-location-pick-up"
+          ariaLabels={{
+            label: 'Destination',
+            resultsList: 'Destination suggestions',
+            clearButton: 'Clear input',
+          }}
+          getA11yResultsMessage={(count: number) =>
+            `${count} result${count === 1 ? '' : 's'}`
+          }
           suggestions={suggestions}
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}

packages/bpk-component-autosuggest/README.md

@@ -13,7 +13,7 @@ import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import FlightIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/flight';
-import BpkAutosuggest, { BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';
+import { BpkAutosuggestLegacy, BpkAutosuggestSuggestion } from '@skyscanner/backpack-web/bpk-component-autosuggest';
 
 const BpkFlightIcon = withRtlSupport(FlightIcon);
 
@@ -90,7 +90,7 @@ class MyComponent extends Component {
     return (
       <div>
         <BpkLabel htmlFor="my-autosuggest">Office</BpkLabel>
-        <BpkAutosuggest
+        <BpkAutosuggestLegacy
           suggestions={suggestions}
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}
@@ -104,6 +104,23 @@ class MyComponent extends Component {
 }
 ```
 
+## AutosuggestV2
+
+The default export is now **BpkAutosuggest** (V2):
+
+```js
+import BpkAutosuggest from '@skyscanner/backpack-web/bpk-component-autosuggest';
+```
+
+The legacy implementation is still available as a named export:
+
+```js
+import { BpkAutosuggestLegacy } from '@skyscanner/backpack-web/bpk-component-autosuggest';
+```
+
+- **Migration guide**: see `docs/migrating-from-v1-to-v2.md`.
+- **Note**: `BpkAutosuggestLegacy` is the legacy implementation (based on `react-autosuggest`).
+
 ## Props
 
 Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/autosuggest/web-1dnVX8RX#section-props-01).