[BUG] - Autocomplete not detect typescript when using extendVariants

Open conduongtong opened this issue 1 year ago • 1 comments

NextUI Version

2.4.6

Describe the bug

I extend Autocomplete like this:

'use client';

import { Autocomplete as BaseAutocomplete, extendVariants, type AutocompleteProps } from '@nextui-org/react';
import { AutocompleteItem, type AutocompleteItemProps } from './AutocompleteItem';

const Autocomplete = extendVariants(BaseAutocomplete, {});

export { Autocomplete, AutocompleteItem };
export type { AutocompleteItemProps, AutocompleteProps };

Then use it dynamic:

import React from "react";
import {Autocomplete, AutocompleteItem} from "./component";

const animals = [
  { label: 'Cat', value: 'cat', description: 'The second most popular pet in the world' },
  { label: 'Dog', value: 'dog', description: 'The most popular pet in the world' },
  { label: 'Elephant', value: 'elephant', description: 'The largest land animal' },
  { label: 'Lion', value: 'lion', description: 'The king of the jungle' },
  { label: 'Tiger', value: 'tiger', description: 'The largest cat species' },
  { label: 'Giraffe', value: 'giraffe', description: 'The tallest land animal' },
  {
    label: 'Dolphin',
    value: 'dolphin',
    description: 'A widely distributed and diverse group of aquatic mammals'
  },
  { label: 'Penguin', value: 'penguin', description: 'A group of aquatic flightless birds' },
  { label: 'Zebra', value: 'zebra', description: 'A several species of African equids' },
  {
    label: 'Shark',
    value: 'shark',
    description: 'A group of elasmobranch fish characterized by a cartilaginous skeleton'
  },
  {
    label: 'Whale',
    value: 'whale',
    description: 'Diverse group of fully aquatic placental marine mammals'
  },
  { label: 'Otter', value: 'otter', description: 'A carnivorous mammal in the subfamily Lutrinae' },
  { label: 'Crocodile', value: 'crocodile', description: 'A large semiaquatic reptile' }
];

export default function App() {
  return (
    <Autocomplete
      defaultItems={animals} // <-- Not detect typescript, still Iterable<object>
      label="Favorite Animal"
      placeholder="Search an animal"
      className="max-w-xs"
    >
      {(animal) => <AutocompleteItem key={animal.value}>{animal.label}</AutocompleteItem>} // <-- no Typescript
    </Autocomplete>
  );
}