Replace VSCodeTextField for VscodeTextfield

Author: tuan-nguen

extensions/ql-vscode/src/view/common/SearchBox.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
+import { VscodeTextfield } from "@vscode-elements/react-elements";
 import { Codicon } from "./icon";
 
-const TextField = styled(VSCodeTextField)`
+const TextField = styled(VscodeTextfield)`
   width: 100%;
 `;
 

extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx

@@ -14,15 +14,15 @@ import {
   useRole,
 } from "@floating-ui/react";
 import { css, styled } from "styled-components";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import type { Option } from "./options";
 import { findMatchingOptions } from "./options";
 import { SuggestBoxItem } from "./SuggestBoxItem";
 import { LabelText } from "./LabelText";
 import type { Diagnostic } from "./diagnostics";
 import { useOpenKey } from "./useOpenKey";
+import { VscodeTextfield } from "@vscode-elements/react-elements";
 
-const Input = styled(VSCodeTextField)<{ $error: boolean }>`
+const Input = styled(VscodeTextfield)<{ $error: boolean }>`
   width: 100%;
   font-family: var(--vscode-editor-font-family);
 
@@ -96,7 +96,7 @@ export type SuggestBoxProps<
 
   /**
    * Can be used to render a different component for the input. This is used
-   * in testing to use default HTML components rather than the VSCodeTextField
+   * in testing to use default HTML components rather than the VscodeTextfield
    * for easier testing.
    * @param props The props returned by `getReferenceProps` of {@link useInteractions}
    */

extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx

@@ -1,7 +1,6 @@
 import type { ChangeEvent } from "react";
 import { styled } from "styled-components";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
-import { VscodeButton } from "@vscode-elements/react-elements";
+import { VscodeButton, VscodeTextfield } from "@vscode-elements/react-elements";
 import { Codicon } from "../common";
 
 export class Renaming {
@@ -23,7 +22,7 @@ function tryCompilePattern(pattern: string): RegExp | undefined {
   }
 }
 
-const Input = styled(VSCodeTextField)`
+const Input = styled(VscodeTextfield)`
   width: 20em;
 `;
 

extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx

@@ -4,8 +4,8 @@ import type {
   ModeledMethod,
   TypeModeledMethod,
 } from "../../model-editor/modeled-method";
-import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
 import { useDebounceCallback } from "../common/useDebounceCallback";
+import { VscodeTextfield } from "@vscode-elements/react-elements";
 
 type Props = {
   modeledMethod: TypeModeledMethod;
@@ -53,7 +53,7 @@ export const ModelTypeTextbox = ({
   );
 
   return (
-    <VSCodeTextField
+    <VscodeTextfield
       value={value}
       onInput={handleChange}
       onClick={stopClickPropagation}