[NO JIRA][BpkAutosuggest] Migrate JS to TypeScript

[kerrie-wu]

• Convert all .js/.jsx source, test, and example files to .tsx/.ts
• Remove Flow type annotations and PropTypes; replace with TypeScript interfaces
• Use ts-expect-error for untyped react-autosuggest import per decisions/imports-ts-suppressions.md
• Move defaultProps defaults to destructuring parameters
• Fix class component constructor to pass props per TypeScript strict mode
• Add missing onSuggestionsClearRequested method caught by TypeScript
• Remove now-unused ts-expect-error directives from consumer examples/stories
• Delete all original .js files

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[Copilot]

Pull request overview

Migrates bpk-component-autosuggest (and its related examples/tests) from Flow/JS to TypeScript, removing Flow/PropTypes usage and tightening typings while keeping consumer-facing behavior consistent.

Changes:

• Converted component/test/example files to TypeScript and removed Flow annotations / PropTypes.
• Added/updated TypeScript typings around react-autosuggest integration (with @ts-expect-error per repo decision).
• Updated Storybook/examples and regenerated Jest snapshots for the migrated components.

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/bpk-component-autosuggest/src/accessibility-test.tsx	Removes Flow pragma and adds TS annotations in accessibility test helpers.
packages/bpk-component-autosuggest/src/snapshots/BpkAutosuggestSuggestion-test.tsx.snap	Adds new snapshots for suggestion rendering after TS migration.
packages/bpk-component-autosuggest/src/snapshots/BpkAutosuggest-test.tsx.snap	Adds new snapshots for autosuggest rendering after TS migration.
packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.tsx	Replaces Flow/PropTypes with TS props and defaulting via destructuring.
packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion-test.tsx	Removes Flow pragma in tests.
packages/bpk-component-autosuggest/src/BpkAutosuggest.tsx	Adds TS types and @ts-expect-error for untyped react-autosuggest; updates renderInputComponent typing.
packages/bpk-component-autosuggest/src/BpkAutosuggest-test.tsx	Updates tests with TS annotations/casts.
packages/bpk-component-autosuggest/index.ts	Removes Flow pragma; keeps/clarifies TS exports.
packages/bpk-component-autosuggest/check-autosuggest-version-test.ts	Removes Flow pragma in version check test.
examples/bpk-component-autosuggest/stories.tsx	Updates example imports to use typed package exports.
examples/bpk-component-autosuggest/examples.tsx	Updates example imports to use typed package exports.
examples/bpk-component-autosuggest-legency/stories.tsx	Minor formatting change while migrating surrounding ecosystem to TS.
examples/bpk-component-autosuggest-legency/examples.tsx	Adds TS types, fixes constructor strictness, and adds missing clear handler method.
.claude/skills/bpk-js-to-ts-migration/SKILL.md	Adds a migration playbook documenting the repo’s preferred Flow→TS patterns and suppressions.

Comments suppressed due to low confidence (4)

examples/bpk-component-autosuggest-legency/stories.tsx:20

• There are now two blank lines between the file header and the first import. Please remove the extra empty line to keep formatting consistent (or run Prettier).
  packages/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.tsx:34
• Props is defined as HTMLAttributes<HTMLElement> & { className?: string | null; ... }, but HTMLAttributes already defines className?: string, so the intersection collapses className back to string (i.e., null won’t actually be allowed). If you want to preserve the previous API (defaultProps used null), use Omit<HTMLAttributes<HTMLElement>, 'className'> and then re-add className?: string | null.
  packages/bpk-component-autosuggest/src/BpkAutosuggest.tsx:74
• The inputRef callback is typed as (element: HTMLInputElement) but it can be invoked with null (React ref callbacks receive null on unmount, and your InputComponentProps.ref/inputRef types already allow null). Consider typing it as HTMLInputElement | null and guarding before calling ref(...) / inputRef(...) to avoid runtime errors during unmount.
  packages/bpk-component-autosuggest/src/BpkAutosuggest.tsx:66
• There’s trailing whitespace on the blank line immediately before <BpkInput (line 66). This tends to fail formatting/linting checks; please remove the extra spaces (or run Prettier).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Import formatting is off (BpkAutosuggest,{ ... }). This should be formatted as BpkAutosuggest, { ... } (and generally left to Prettier) to match repo style and avoid churn in future formatting passes.

Suggested change

	import BpkAutosuggest,{ BpkAutosuggestSuggestion } from '../../packages/bpk-component-autosuggest';
	import BpkAutosuggest, { BpkAutosuggestSuggestion } from '../../packages/bpk-component-autosuggest';

[Copilot]

Import formatting is off (BpkAutosuggest,{ ... }). Please format this as BpkAutosuggest, { ... } (or run Prettier) to match the repo’s standard import style.

Suggested change

	import BpkAutosuggest,{ BpkAutosuggestSuggestion } from '../../packages/bpk-component-autosuggest';
	import BpkAutosuggest, { BpkAutosuggestSuggestion } from '../../packages/bpk-component-autosuggest';

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4303 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/4303 to see this build running in a browser.

[skyscanner-backpack-bot]

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 1531173