@tecsinapse/cortex-react 2.2.0-beta.6 → 2.2.0

package/dist/esm/components/Autocomplete/GroupedOptions.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
 import { AutocompleteOption } from './Option.js';
 import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
 import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
 
 const { groupedTitle, list } = selectVariants();
 const AutocompleteGroupedOptions = ({
@@ -13,6 +15,14 @@ const AutocompleteGroupedOptions = ({
   const { options: _options, isLoading } = useAutocompleteGroupedOptions({
     options
   });
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error(
+      "AutocompleteGroupedOptions must be used within AutocompleteRoot"
+    );
+  const { keyExtractor } = context;
   return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
     value.map((option) => /* @__PURE__ */ jsx(
@@ -22,7 +32,7 @@ const AutocompleteGroupedOptions = ({
         option,
         onSelect
       },
-      option.value
+      keyExtractor(option)
     ))
   ] }, key)) });
 };

package/dist/esm/components/Autocomplete/Option.js

@@ -8,10 +8,12 @@ const AutocompleteOption = ({
   onSelect,
   grouped = false
 }) => {
-  const context = useContext(AutocompleteContext);
+  const context = useContext(
+    AutocompleteContext
+  );
   if (!context)
     throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
-  const { setOpen } = context;
+  const { setOpen, labelExtractor } = context;
   const handleSelect = useCallback(
     (option2) => {
       setOpen(false);
@@ -28,7 +30,7 @@ const AutocompleteOption = ({
         grouped
       }),
       role: "option",
-      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option$1.label })
+      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: labelExtractor(option$1) })
     }
   );
 };

package/dist/esm/components/Autocomplete/Options.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import { useMemo } from 'react';
+import { useContext } from 'react';
 import { AutocompleteOption } from './Option.js';
 import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
 import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
 
 const { list } = selectVariants();
 const AutocompleteOptions = ({
@@ -11,19 +12,23 @@ const AutocompleteOptions = ({
   onSelect,
   children
 }) => {
-  const { options: _options, isLoading } = useAutocompleteOptions({ options });
-  const defaultOptions = useMemo(
-    () => _options?.map((option) => /* @__PURE__ */ jsx(
-      AutocompleteOption,
-      {
-        option,
-        onSelect
-      },
-      option.value
-    )) ?? [],
-    [_options, onSelect]
+  const context = useContext(
+    AutocompleteContext
   );
-  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { keyExtractor } = context;
+  const { options: _options, isLoading } = useAutocompleteOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsx(
+    AutocompleteOption,
+    {
+      option,
+      onSelect
+    },
+    keyExtractor(option)
+  )) });
 };
 
 export { AutocompleteOptions };

package/dist/esm/components/Autocomplete/Root.js

@@ -3,7 +3,11 @@ import { useState } from 'react';
 import { Popover } from '../Popover/index.js';
 import { AutocompleteContext } from './context.js';
 
-const AutocompleteRoot = ({ children }) => {
+const AutocompleteRoot = ({
+  keyExtractor,
+  labelExtractor,
+  children
+}) => {
   const [triggerWidth, setTriggerWidth] = useState();
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(
@@ -13,7 +17,9 @@ const AutocompleteRoot = ({ children }) => {
         open,
         setOpen,
         triggerWidth,
-        setTriggerWidth
+        setTriggerWidth,
+        keyExtractor,
+        labelExtractor
       },
       children: /* @__PURE__ */ jsx(
         Popover.Root,

package/dist/esm/components/Autocomplete/Trigger.js

@@ -30,17 +30,16 @@ const AutocompleteTrigger = ({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsx(
     Input.Root,
     {
       label: label ?? "Selecione uma op\xE7\xE3o",
       value: inputValue,
       onChange: handleChange,
       disabled,
-      placeholder,
-      ref: triggerRef
+      placeholder
     }
-  ) });
+  ) }) });
 };
 
 export { AutocompleteTrigger };

package/dist/esm/components/Autocomplete/context.js

@@ -1,7 +1,5 @@
 import { createContext } from 'react';
 
-const AutocompleteContext = createContext(
-  void 0
-);
+const AutocompleteContext = createContext(void 0);
 
 export { AutocompleteContext };

package/dist/esm/components/PhoneInput/FlagIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Flags from 'country-flag-icons/react/3x2';
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+export { FlagIcon };

package/dist/esm/components/PhoneInput/Option.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PhoneInputOption = ({
+  country,
+  handleSelectCountry,
+  disableClick = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
+      onClick: () => {
+        handleSelectCountry(country);
+      },
+      disabled: disableClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-secondary-light text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+export { PhoneInputOption };

package/dist/esm/components/PhoneInput/Options.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Divider } from '../Divider.js';
+import { usePhoneContext } from './context.js';
+import { PhoneInputOption } from './Option.js';
+import 'clsx';
+import '../Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '@tecsinapse/cortex-core';
+import 'react-aria';
+import 'react-stately';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../../provider/ManagerContext.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import '../Calendar/CalendarCell.js';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../ColorPicker.js';
+import '../DatePicker/DateSegment.js';
+import '../DatePicker/DatePickerInputBase.js';
+import '../GroupButton.js';
+import { Input } from '../Input/index.js';
+import '../Menubar/Left.js';
+import '../../styles/menubar.js';
+import '../Menubar/Right.js';
+import '../Menubar/Dropdown.js';
+import '../Menubar/MostUsed.js';
+import '../Menubar/MostUsedItem.js';
+import '../Menubar/Header.js';
+import '../Menubar/Item.js';
+import '../../provider/CategoriesContext.js';
+import '../Menubar/SubItem.js';
+import '../ProgressBar/Progress.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../../styles/stepNodeVariants.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../TimePicker/TimeFieldInput.js';
+import '../Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+import 'react-icons/io5';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
+import { defaultCountries, parseCountry } from 'react-international-phone';
+import 'country-flag-icons/react/3x2';
+
+const countries = defaultCountries.map((c) => {
+  return parseCountry(c);
+});
+const PhoneInputOptions = ({
+  hasSearch = true
+}) => {
+  const { country, setCountry, setIsOpen } = usePhoneContext();
+  const [searchText, setSearchText] = useState("");
+  const filteredCountries = useMemo(() => {
+    return countries.filter(
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
+    );
+  }, [country, searchText]);
+  const handleSelect = (country2) => {
+    setCountry?.(country2.iso2);
+    setIsOpen?.(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
+    hasSearch ? /* @__PURE__ */ jsx(
+      Input.Search,
+      {
+        onChange: (e) => setSearchText(e.target.value),
+        variants: { className: "mx-deca my-centi outline-none" }
+      }
+    ) : null,
+    country ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country,
+          handleSelectCountry: handleSelect,
+          disableClick: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }) : null,
+    filteredCountries.map((country2) => {
+      return /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country: country2,
+          handleSelectCountry: handleSelect
+        },
+        `${country2.dialCode} ${country2.iso2}`
+      );
+    })
+  ] });
+};
+
+export { PhoneInputOptions };

package/dist/esm/components/PhoneInput/Popover.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal } from '@floating-ui/react';
+import { Popover } from '../Popover/index.js';
+import { usePhoneContext } from './context.js';
+
+const PhoneInputPopover = ({ children }) => {
+  const { triggerWidth } = usePhoneContext();
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      children
+    }
+  ) });
+};
+
+export { PhoneInputPopover };

package/dist/esm/components/PhoneInput/Root.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import clsx from 'clsx';
+import { usePhoneInput, defaultCountries } from 'react-international-phone';
+import { PhoneInputContext } from './context.js';
+
+const PhoneInputRoot = ({
+  children,
+  className,
+  onChange,
+  ...rest
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = usePhoneInput({
+    countries: defaultCountries,
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
+  });
+  return /* @__PURE__ */ jsx(
+    Popover.Root,
+    {
+      placement: "bottom-start",
+      controlled: true,
+      isOpen,
+      setIsOpen,
+      children: /* @__PURE__ */ jsx(
+        PhoneInputContext.Provider,
+        {
+          value: {
+            triggerWidth,
+            setTriggerWidth,
+            isOpen,
+            setIsOpen,
+            country,
+            setCountry,
+            handlePhoneValueChange,
+            inputValue,
+            phone,
+            inputRef
+          },
+          children: /* @__PURE__ */ jsx("div", { className: clsx("relative w-full h-full", className), children })
+        }
+      )
+    }
+  );
+};
+
+export { PhoneInputRoot };

package/dist/esm/components/PhoneInput/Trigger.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IoChevronDown } from 'react-icons/io5';
+import 'clsx';
+import { useRef, useEffect } from 'react';
+import '../Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '@tecsinapse/cortex-core';
+import 'react-aria';
+import 'react-stately';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../../provider/ManagerContext.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import '../Calendar/CalendarCell.js';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../ColorPicker.js';
+import '../DatePicker/DateSegment.js';
+import { Popover } from '../Popover/index.js';
+import '../DatePicker/DatePickerInputBase.js';
+import '../GroupButton.js';
+import { Input } from '../Input/index.js';
+import '../Menubar/Left.js';
+import '../../styles/menubar.js';
+import '../Menubar/Right.js';
+import '../Menubar/Dropdown.js';
+import '../Menubar/MostUsed.js';
+import '../Menubar/MostUsedItem.js';
+import '../Menubar/Header.js';
+import '../Menubar/Item.js';
+import '../../provider/CategoriesContext.js';
+import '../Menubar/SubItem.js';
+import '../ProgressBar/Progress.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../../styles/stepNodeVariants.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../TimePicker/TimeFieldInput.js';
+import '../Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
+import './Options.js';
+import { usePhoneContext } from './context.js';
+import 'react-international-phone';
+import { FlagIcon } from './FlagIcon.js';
+
+const PhoneInputTrigger = ({
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  const {
+    setIsOpen,
+    setTriggerWidth,
+    country,
+    handlePhoneValueChange,
+    inputValue
+  } = usePhoneContext();
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs(Input.Face, { ref: triggerRef, children: [
+    /* @__PURE__ */ jsx(
+      Input.Box,
+      {
+        value: inputValue,
+        onChange: handlePhoneValueChange,
+        label: label ?? "Insert a phone number",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1 cursor-pointer w-full",
+        onClick: () => setIsOpen?.(true),
+        children: [
+          country ? /* @__PURE__ */ jsx(FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
+          /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
+        ]
+      }
+    ) })
+  ] }) });
+};
+
+export { PhoneInputTrigger };

package/dist/esm/components/PhoneInput/context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+const PhoneInputContext = createContext(
+  null
+);
+const usePhoneContext = () => {
+  const context = useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(
+      "usePhoneInputContext must be used within a usePhoneInputProvider"
+    );
+  }
+  return context;
+};
+
+export { PhoneInputContext, usePhoneContext };

package/dist/esm/components/PhoneInput/index.js

@@ -0,0 +1,15 @@
+import { PhoneInputOption } from './Option.js';
+import { PhoneInputOptions } from './Options.js';
+import { PhoneInputPopover } from './Popover.js';
+import { PhoneInputRoot } from './Root.js';
+import { PhoneInputTrigger } from './Trigger.js';
+
+const PhoneInput = {
+  Root: PhoneInputRoot,
+  Popover: PhoneInputPopover,
+  Trigger: PhoneInputTrigger,
+  Option: PhoneInputOption,
+  Options: PhoneInputOptions
+};
+
+export { PhoneInput };

package/dist/esm/index.js

@@ -43,6 +43,7 @@ export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
 export { Autocomplete } from './components/Autocomplete/index.js';
+export { PhoneInput } from './components/PhoneInput/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/provider/ManagerContext.js

@@ -67,6 +67,11 @@ import 'react-dom';
 import '../components/Autocomplete/context.js';
 import '../components/Autocomplete/Options.js';
 import '../components/Autocomplete/GroupedOptions.js';
+import '../components/PhoneInput/Options.js';
+import '../components/PhoneInput/context.js';
+import 'react-international-phone';
+import 'react-icons/io5';
+import 'country-flag-icons/react/3x2';
 
 const ManagerContext = createContext(null);
 const ManagerProvider = ({ children }) => {

package/dist/esm/service/SnackbarSonner.js

@@ -33,6 +33,38 @@ class SnackbarSonner {
       { ...this._options, ...options }
     );
   }
+  async promise(promise, config) {
+    const { loading, success, error } = config;
+    const id = this.show(loading.type ?? "info", loading.message, {
+      ...loading.options,
+      duration: loading.options?.duration ?? Infinity
+    });
+    try {
+      await promise;
+      if (!success) {
+        toast.dismiss(id);
+      } else {
+        const msg = success?.message ?? "Opera\xE7\xE3o conclu\xEDda com sucesso.";
+        this.show(success?.type ?? "success", msg, {
+          ...success?.options,
+          id,
+          duration: success?.options?.duration ?? this._options?.duration ?? 5e3
+        });
+      }
+    } catch (err) {
+      if (!error) {
+        toast.dismiss(id);
+      } else {
+        const msg = error?.message ?? "Ocorreu um erro inesperado.";
+        this.show(error?.type ?? "error", msg, {
+          ...error?.options,
+          id,
+          duration: error?.options?.duration ?? this._options?.duration ?? 5e3
+        });
+      }
+    }
+    return promise;
+  }
 }
 
 export { SnackbarSonner };

package/dist/types/components/Autocomplete/GroupedOptions.d.ts

@@ -1,2 +1,2 @@
 import { AutocompleteGroupedOptionsProps } from './types';
-export declare const AutocompleteGroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: AutocompleteGroupedOptionsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Option.d.ts

@@ -1,2 +1,2 @@
 import { AutocompleteOptionProps } from './types';
-export declare const AutocompleteOption: ({ option, onSelect, grouped, }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteOption: <T>({ option, onSelect, grouped, }: AutocompleteOptionProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Options.d.ts

@@ -1,2 +1,2 @@
 import { AutocompleteOptionsProps } from './types';
-export declare const AutocompleteOptions: ({ options, onSelect, children, }: AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteOptions: <T>({ options, onSelect, children, }: AutocompleteOptionsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/Root.d.ts

@@ -1,2 +1,2 @@
 import { AutocompleteRootProps } from './types';
-export declare const AutocompleteRoot: ({ children }: AutocompleteRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteRoot: <T>({ keyExtractor, labelExtractor, children, }: AutocompleteRootProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Autocomplete/context.d.ts

@@ -1,9 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
-interface AutocompleteContextType {
+export interface AutocompleteContextType<T> {
     open: boolean;
     setOpen: (open: boolean) => void;
     triggerWidth: number | undefined;
     setTriggerWidth: Dispatch<SetStateAction<number | undefined>>;
+    keyExtractor: (option: T) => string;
+    labelExtractor: (option: T) => string;
 }
-export declare const AutocompleteContext: import("react").Context<AutocompleteContextType | undefined>;
-export {};
+export declare const AutocompleteContext: import("react").Context<AutocompleteContextType<any> | undefined>;