@purpurds/autocomplete 0.0.1

package/dist/listbox.d.ts

@@ -0,0 +1,22 @@
+import { default as React, ComponentPropsWithRef } from 'react';
+
+export * from './useAutocomplete';
+type ListboxProps = Omit<ComponentPropsWithRef<"ul">, "role"> & {
+    "data-testid"?: string;
+    "aria-label": NonNullable<ComponentPropsWithRef<"ul">["aria-label"]>;
+    "aria-expanded": NonNullable<ComponentPropsWithRef<"ul">["aria-expanded"]>;
+};
+type ListboxItemProps = Omit<ComponentPropsWithRef<"li">, "role"> & {
+    "data-testid"?: string;
+    highlighted?: boolean;
+    hovered?: boolean;
+    key?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    noninteractive?: boolean;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<ListboxProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<ListboxItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export { Item, Root };
+export type { ListboxItemProps, ListboxProps };
+//# sourceMappingURL=listbox.d.ts.map

package/dist/listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../src/listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,qBAAqB,EAOtB,MAAM,OAAO,CAAC;AAOf,cAAc,mBAAmB,CAAC;AAKlC,KAAK,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IACrE,eAAe,EAAE,WAAW,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC;CAC5E,CAAC;AAgBF,KAAK,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA0CF,QAAA,MAAM,IAAI,oGAAU,CAAC;AACrB,QAAA,MAAM,IAAI,qGAAc,CAAC;AAEzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-autocomplete_19u9x_1{position:relative}._purpur-autocomplete__listbox_19u9x_4{position:absolute;z-index:1;top:calc(100% + var(--purpur-spacing-100))}._purpur-listbox_qhoi7_1{padding:0;margin:0;list-style-type:none;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);border-radius:var(--purpur-border-radius-sm);color:var(--purpur-color-brand-off-black);width:100%;background-color:var(--purpur-color-brand-white);max-height:calc(2 * var(--purpur-spacing-1200));overflow-y:scroll;box-sizing:border-box}._purpur-listbox-item_qhoi7_15{list-style:none;padding:var(--purpur-spacing-150);border:var(--purpur-border-width-xs) solid transparent;cursor:pointer;max-width:100%;word-break:break-word;transition:background var(--purpur-motion-duration-150) ease;display:flex;justify-content:space-between;align-items:center;gap:var(--purpur-spacing-100)}@media (hover: hover) and (pointer: fine){._purpur-listbox-item--hovered_qhoi7_29{background:var(--purpur-color-background-interactive-transparent-hover)}}._purpur-listbox-item--highlighted_qhoi7_37{outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:calc(-1 * var(--purpur-border-width-sm))}._purpur-listbox-item_qhoi7_15:active:not(._purpur-listbox-item--noninteractive_qhoi7_41){background:var(--purpur-color-background-interactive-transparent-active)}._purpur-listbox-item--disabled_qhoi7_44{color:var(--purpur-color-text-weak);cursor:default}._purpur-listbox-item--noninteractive_qhoi7_41{cursor:default}._purpur-listbox-item__icon_qhoi7_51{color:var(--purpur-color-text-interactive-selected)}

package/dist/useAutocomplete.d.ts

@@ -0,0 +1,40 @@
+import { ListboxItemProps, ListboxProps } from './listbox';
+import { ReactNode } from 'react';
+
+export type Option = {
+    label: string;
+    id: string;
+    value?: string;
+    disabled?: boolean;
+};
+export type UseAutocompleteOptions<T extends Option> = {
+    highlightFirstOption?: boolean;
+    defaultInputValue?: string;
+    inputValue?: string;
+    filterOption?: (inputValue: string | undefined, option: T) => boolean;
+    id: string;
+    listboxLabel: string;
+    listboxMaxHeight?: string | number;
+    noOptionsText?: ReactNode;
+    onInputChange?: (value: string) => void;
+    openOnFocus?: boolean;
+    onSelect?: (option: T | undefined) => void;
+    options: T[];
+    selectedOption?: T;
+    ["data-testid"]?: string;
+};
+export declare const useAutocomplete: <T extends Option>({ highlightFirstOption, defaultInputValue, inputValue, filterOption, id, listboxLabel, listboxMaxHeight, onInputChange, openOnFocus, noOptionsText, onSelect, options, selectedOption, ["data-testid"]: dataTestid, }: UseAutocompleteOptions<T>) => {
+    id: string;
+    inputProps: Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | import('react').RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        "data-testid"?: string | undefined;
+    };
+    internalRef: import('react').MutableRefObject<HTMLDivElement | null>;
+    optionsToShow: (T | undefined)[];
+    showListbox: boolean;
+    noOptionsText: ReactNode;
+    getListBoxItemProps: (option: T, index: number) => ListboxItemProps;
+    listboxProps: ListboxProps;
+};
+//# sourceMappingURL=useAutocomplete.d.ts.map

package/dist/useAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../src/useAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG3D,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IAIrD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAI/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI3B,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IAItE,EAAE,EAAE,MAAM,CAAC;IAIX,YAAY,EAAE,MAAM,CAAC;IAIrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAInC,aAAa,CAAC,EAAE,SAAS,CAAC;IAI1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAIxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAItB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAI3C,OAAO,EAAE,CAAC,EAAE,CAAC;IAIb,cAAc,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,eAAe,4OAezB,uBAAuB,CAAC,CAAC;;;;;;;;;;;kCAsKW,CAAC,SAAS,MAAM,KAAG,gBAAgB;;CAoDzE,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export declare const useMutableRefObject: <T>(value: T) => MutableRefObject<T>;
+export declare const useOnClickOutside: (element: HTMLElement | null, callback: () => void) => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAkC,MAAM,OAAO,CAAC;AAGzE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KACvB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,GAAG,EAAE,CAAC;AAEP,eAAO,MAAM,mBAAmB,aAAc,CAAC,KAAG,iBAAiB,CAAC,CAEnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,WAAW,GAAG,IAAI,YAAY,MAAM,IAAI,SAgBlF,CAAC"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@purpurds/autocomplete",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/autocomplete.cjs.js",
+  "types": "./dist/autocomplete.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/autocomplete.cjs.js",
+      "types": "./dist/autocomplete.d.ts",
+      "default": "./dist/autocomplete.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/autocomplete.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/icon": "4.5.1",
+    "@purpurds/tokens": "4.5.1",
+    "@purpurds/paragraph": "4.5.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/client-api": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "18",
+    "@types/react-dom": "~18.3.0",
+    "@types/react": "~18.3.0",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.3.0",
+    "react": "~18.3.0",
+    "typescript": "~5.4.2",
+    "vite": "~5.2.2",
+    "vitest": "~1.5.0",
+    "@purpurds/icon": "4.5.1",
+    "@purpurds/button": "4.5.1",
+    "@purpurds/search-field": "4.5.1",
+    "@purpurds/text-field": "4.5.1",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,164 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as AutocompleteStories from "./src/autocomplete.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Autocomplete" of={AutocompleteStories} />
+
+# Autocomplete
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/purpur/styles";
+```
+
+### Examples
+
+In MyComponent.tsx
+
+#### With uncontrolled input (using Purpur TextField)
+
+```tsx
+import { Autocomplete, Option, TextField } from "@purpurds/purpur";
+import { useState } from "React";
+
+export const MyComponent = () => {
+  const options: Options[] = [
+    /* Your options */
+  ];
+  const [selectedOption, setSelectedOption] = useState<Option>();
+
+  return (
+    <Autocomplete
+      id="autocomplete"
+      listboxLabel="Label for listbox, for a11y (describe the options)"
+      selectedOption={selectedOption}
+      onSelect={selectedOption}
+      options={options}
+      selectedOption
+      renderInput={(inputProps) => (
+        <TextField
+          {...inputProps}
+          label="Text Field"
+          id="autocomplete-input"
+          type="text"
+          placeholder="Write something"
+        />
+      )}
+    />
+  );
+};
+```
+
+#### With controlled input (using Purpur SearchField)
+
+```tsx
+import { Autocomplete, Option, SearchField } from "@purpurds/purpur";
+import { useState } from "React";
+
+export const MyComponent = () => {
+  const options: Options[] = [
+    /* Your options */
+  ];
+  const [selectedOption, setSelectedOption] = useState<Option>();
+  const [inputValue, setInputValue] = useState("");
+
+  return (
+    <Autocomplete
+      id="autocomplete"
+      listboxLabel="Label for listbox, for a11y (describe the options)"
+      selectedOption={selectedOption}
+      onSelect={selectedOption}
+      options={options}
+      selectedOption
+      onInputChange={setInputValue}
+      inputValue={inputValue}
+      renderInput={(inputProps) => (
+        <SearchField
+          {...inputProps}
+          label="Text Field"
+          id="autocomplete-input"
+          type="text"
+          placeholder="Write something"
+          onClear={() => setInputValue("")}
+          clearButtonAllyLabel="Rensa sökfältet"
+          variant="button-attached"
+          iconOnlySearchButton
+          searchButtonLabel="Search"
+        />
+      )}
+    />
+  );
+};
+```
+
+#### With controlled input & with `renderOption` function (using Purpur TextField)
+
+Highlight parts of the option labels that are matching the input value
+
+```tsx
+import { Autocomplete, Option, Paragraph, TextField } from "@purpurds/purpur";
+import { useState } from "React";
+
+export const MyComponent = () => {
+  const options: Options[] = [
+    /* Your options */
+  ];
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState<Option>();
+
+  function renderOption(option: Option) {
+    const optionText = option.label;
+    if (!inputValue.trim()) {
+      return optionText;
+    }
+
+    const escapeRegExp = (str = "") => str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
+    const regex = new RegExp(`(${escapeRegExp(inputValue)})`, "gi");
+    const parts = optionText.split(regex);
+
+    return (
+      <Paragraph>
+        {parts
+          .filter((part) => part)
+          .map((part, i) =>
+            regex.test(part) ? <strong key={i}>{part}</strong> : <span key={i}>{part}</span>
+          )}
+      </Paragraph>
+    );
+  }
+
+  return (
+    <Autocomplete
+      id="autocomplete"
+      listboxLabel="Label for listbox, for a11y (describe the options)"
+      selectedOption={selectedOption}
+      onSelect={setSelectedOption}
+      onInputChange={setInputValue}
+      inputValue={inputValue}
+      renderOption={renderOption}
+      options={options}
+      renderInput={(inputProps) => (
+        <TextField {...inputProps} label="With renderOption" id="autocomplete-input" type="text" />
+      )}
+    />
+  );
+};
+```

package/src/autocomplete.module.scss

@@ -0,0 +1,9 @@
+.purpur-autocomplete {
+  position: relative;
+
+  &__listbox {
+    position: absolute;
+    z-index: 1;
+    top: calc(100% + var(--purpur-spacing-100));
+  }
+}

package/src/autocomplete.stories.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { SearchField } from "@purpurds/search-field";
+import { TextField } from "@purpurds/text-field";
+import { useArgs, useState } from "@storybook/client-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/button/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/search-field/styles";
+import "@purpurds/text-field/styles";
+import { Autocomplete } from "./autocomplete";
+
+const options = [
+  { id: "0", label: "Apple" },
+  { id: "1", label: "Apricot" },
+  { id: "2", label: "Acai" },
+  { id: "4", label: "Almond" },
+  { id: "6", label: "Avocado" },
+  { id: "7", label: "Banana" },
+  { id: "8", label: "Blueberry" },
+  { id: "5", label: "Blackberry" },
+  { id: "9", label: "Cherry" },
+  { id: "3", label: "Date" },
+  { id: "10", label: "Grape" },
+  { id: "11", label: "Kiwi" },
+  { id: "12", label: "Lemon" },
+  { id: "13", label: "Mango" },
+  { id: "14", label: "Orange" },
+  { id: "15", label: "Papaya" },
+  { id: "16", label: "Pear" },
+  { id: "17", label: "Pineapple" },
+  { id: "18", label: "Raspberry" },
+  { id: "19", label: "Strawberry" },
+];
+
+const meta: Meta<typeof Autocomplete> = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  args: {
+    options,
+    listboxLabel: "Fruits",
+    noOptionsText: "That is not a fruit... Try again!",
+  },
+  parameters: {
+    design: [
+      {
+        name: "Autocomplete",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=47667%3A53816&mode=design",
+      },
+      {
+        name: "Dropdown",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=47667%3A13626&mode=dev",
+      },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "18.5rem", minHeight: "20rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+export const WithTextField: Story = {
+  args: {
+    id: "with-text-field",
+  },
+  argTypes: {
+    listboxMaxHeight: { type: "string" },
+  },
+  render: ({ ...args }) => {
+    const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    return (
+      <Autocomplete
+        {...args}
+        selectedOption={selectedOption}
+        onSelect={(selectedOption) => updateArgs({ selectedOption })}
+        renderInput={(inputProps) => (
+          <TextField
+            {...inputProps}
+            label="With Text Field"
+            id="autocomplete-input"
+            type="text"
+            placeholder="Enter a fruit"
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const WithSearchField: Story = {
+  args: {
+    id: "with-search-field",
+  },
+  argTypes: {
+    listboxMaxHeight: { type: "string" },
+    inputValue: { table: { disabled: true } },
+    onInputChange: { table: { disabled: true } },
+  },
+  render: ({ ...args }) => {
+    const [inputValue, setInputValue] = useState(""); // eslint-disable-line react-hooks/rules-of-hooks
+    const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    return (
+      <Autocomplete
+        {...args}
+        selectedOption={selectedOption}
+        onSelect={(selectedOption) => updateArgs({ selectedOption })}
+        onInputChange={(value) => {
+          setInputValue(value);
+          updateArgs({ selectedOption: undefined });
+        }}
+        inputValue={inputValue}
+        renderInput={(inputProps) => (
+          <SearchField
+            {...inputProps}
+            label="With Search Field"
+            id="autocomplete-input"
+            type="text"
+            onClear={() => {
+              setInputValue("");
+              updateArgs({ selectedOption: undefined });
+            }}
+            placeholder="Find your fruit"
+            clearButtonAllyLabel="Rensa sökfältet"
+            variant="button-attached"
+            iconOnlySearchButton
+            searchButtonLabel="Search"
+          />
+        )}
+      />
+    );
+  },
+};
+
+export const WithRenderOption: Story = {
+  args: {
+    id: "with-render-option",
+  },
+  argTypes: {
+    listboxMaxHeight: { type: "string" },
+    inputValue: { table: { disabled: true } },
+    onInputChange: { table: { disabled: true } },
+  },
+  render: ({ ...args }) => {
+    const [inputValue, setInputValue] = useState(""); // eslint-disable-line react-hooks/rules-of-hooks
+    const [{ selectedOption }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    return (
+      <>
+        <Paragraph>The matching parts are bolded</Paragraph>
+        <hr />
+        <Autocomplete
+          {...args}
+          selectedOption={selectedOption}
+          onSelect={(selectedOption) => updateArgs({ selectedOption })}
+          onInputChange={setInputValue}
+          inputValue={inputValue}
+          renderOption={(option) => {
+            const optionText = option.label;
+            if (!inputValue.trim()) {
+              return optionText;
+            }
+
+            const escapeRegExp = (str = "") => str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
+            const regex = new RegExp(`(${escapeRegExp(inputValue)})`, "gi");
+            const parts = optionText.split(regex);
+
+            return (
+              <Paragraph>
+                {parts
+                  .filter((part) => part)
+                  .map((part, i) =>
+                    // eslint-disable-next-line react/no-array-index-key
+                    regex.test(part) ? <strong key={i}>{part}</strong> : <span key={i}>{part}</span>
+                  )}
+              </Paragraph>
+            );
+          }}
+          renderInput={(inputProps) => (
+            <TextField
+              {...inputProps}
+              label="With renderOption"
+              id="autocomplete-input"
+              type="text"
+              placeholder="Enter a fruit"
+            />
+          )}
+        />
+      </>
+    );
+  },
+};