@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/dist/types/input/Password.d.ts

@@ -1,6 +1,7 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputHTMLAttributes } from "react";
+import type { InputProps, WrapperProps } from "../types";
+export interface PasswordProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
     /**
      * show password toggle
      */
@@ -9,5 +10,9 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
      * password strength meter (0-1)
      */
     strength?: number;
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
 }
-export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Password input component with optional strength meter and toggle visibility.
+ */
+export declare function Password(props: PasswordProps): import("react").JSX.Element;

package/dist/types/input/Radio.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { type RefProp } from "@react-fabric/core/dist/types/types";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
 export interface RadioProps extends RefProp<HTMLInputElement> {
     name?: string;
     /**
      * radio label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * value
      */
@@ -39,4 +38,10 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
      */
     iconChecked?: string;
 }
-export declare const Radio: ({ ref, name, label, value, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Radio input component with custom icons and label.
+ *
+ * This component renders a radio button with an optional label and custom icons for checked and unchecked states.
+ * It supports disabled and invalid states, and allows for custom width.
+ */
+export declare function Radio({ ref, name, label, value, invalid, disabled, width, icon, error, iconChecked, onChange, ...rest }: RadioProps): import("react").JSX.Element;

package/dist/types/input/RadioGroup.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
-import { type Radio } from "./Radio";
-export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
+import type { ChildrenProp, CssProp } from "@react-fabric/core/dist/types/types";
+import type { RadioProps } from "./Radio";
+export interface RadioGroupProps extends ChildrenProp<RadioProps>, CssProp {
     /**
      * input label
      */
@@ -9,7 +8,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * field info
      */
@@ -38,9 +37,18 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      * vertical orientation
      */
     vertical?: boolean;
+    /**
+     * value
+     */
+    value?: string | number;
     /**
      * change handler
      */
     onChange?: (value: AnyObject) => void;
 }
-export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * It allows for customization of the label, options, and layout.
+ * The component supports inline and vertical orientations, and can handle change events.
+ */
+export declare function RadioGroup({ children, name, className, optionWidth, vertical, value, onChange, ...rest }: RadioGroupProps): import("react").JSX.Element;

package/dist/types/input/{Range.d.ts → RangeSlider.d.ts}

@@ -1,5 +1,5 @@
-import { type InputProps } from "../types";
-export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children"> {
+import type { InputProps, WrapperProps } from "../types";
+export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children" | "defaultValue">, WrapperProps {
     /**
      * min value
      */
@@ -35,11 +35,11 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
     /**
      * custom min label
      */
-    minLabel?: string;
+    minLabel?: string | React.ReactElement;
     /**
      * custom max label
      */
-    maxLabel?: string;
+    maxLabel?: string | React.ReactElement;
     /**
      * step ranges
      */
@@ -54,6 +54,11 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
     onSlide?: (val: number) => void;
 }
 /**
- * Number Range input
+ * RangeSlider component for rendering a range slider input.
+ * It supports vertical orientation, custom colors, step increments,
+ * min/max values, and display of labels and value tooltips.
+ * The component uses the Ranger library for handling the slider functionality.
+ * It also provides error handling and supports disabled and read-only states.
+ * The component is designed to be flexible and customizable, allowing for various configurations.
  */
-export declare const Range: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare function RangeSlider(props: RangeProps): import("react").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -1,6 +1,6 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputProps, WrapperProps } from "../types";
+export interface SearchProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
     /**
      * is searching
      */
@@ -9,9 +9,19 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      * search on value change
      */
     searchOnChange?: boolean;
+    /**
+     * hide search action handle
+     */
+    hideHandle?: boolean;
     /**
      * search handler
      */
     onSearch?: (query?: string) => void;
 }
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Search input component with optional searching state and search handler.
+ * This component allows users to input search queries and trigger a search action.
+ * It supports features like searching on value change, showing a search handle,
+ * and handling search actions with a debounce mechanism.
+ */
+export declare function Search(props: SearchProps): import("react").JSX.Element;

package/dist/types/input/Slider.d.ts

@@ -1,5 +1,5 @@
-import { type InputProps } from "../types";
-export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+import type { InputProps, WrapperProps } from "../types";
+export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children" | "defaultValue">, WrapperProps {
     /**
      * min value
      */
@@ -35,11 +35,11 @@ export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "a
     /**
      * custom min label
      */
-    minLabel?: string;
+    minLabel?: string | React.ReactElement;
     /**
      * custom max label
      */
-    maxLabel?: string;
+    maxLabel?: string | React.ReactElement;
     /**
      * step ranges
      */
@@ -58,6 +58,9 @@ export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "a
     onSlide?: (val: number) => void;
 }
 /**
- * Number slider input
+ * Slider component for rendering a slider input with labels and value display.
+ * It supports vertical orientation, custom min/max labels, and step ranges.
+ * The component handles value changes, displays tooltips, and integrates with ranger for slider functionality.
+ * It also supports deferred value updates for smoother interactions.
  */
-export declare const Slider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, useInfinity, format, invalid, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, ...rest }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Slider(props: SliderProps): import("react").JSX.Element;

package/dist/types/input/Switch.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { type ColorType, type RefProp } from "@react-fabric/core/dist/types/types";
+import type { ColorUnion, RefProp } from "@react-fabric/core/dist/types/types";
 export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
      * Switch label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * checked
      */
@@ -32,15 +31,21 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
      * cutom Switch icon
      */
-    color?: string | ColorType;
+    color?: ColorUnion;
     /**
      * cutom Switch icon
      */
-    defaultColor?: string | ColorType;
+    defaultColor?: ColorUnion;
     name?: string;
     onLabel?: string;
-    onLabelColor?: string | ColorType;
+    onLabelColor?: ColorUnion;
     offLabel?: string;
-    offLabelColor?: string | ColorType;
+    offLabelColor?: ColorUnion;
 }
-export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Switch input component with custom labels and colors.
+ * This component renders a switch input with optional labels for the "on" and "off" states,
+ * and allows for custom colors for the switch background and labels.
+ * It supports disabled and invalid states, and handles change events.
+ */
+export declare function Switch({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, onChange, ...rest }: SwitchProps): import("react").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -1,6 +1,6 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputProps, WrapperProps } from "../types";
+export interface TextareaProps extends InputProps, WrapperProps, RefProp<HTMLTextAreaElement> {
     /**
      * textarae rows
      */
@@ -13,5 +13,16 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      * increment rows on value change
      */
     variableRows?: boolean;
+    /**
+     * expandable textarea
+     */
+    expandable?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ */
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;

package/dist/types/internal/ErrorIcon.d.ts

@@ -1 +1,4 @@
-export declare const ErrorIcon: ({ error, invalid }: KeyValue) => any;
+export declare function ErrorIcon({ error, invalid }: {
+    error?: string | KeyValue;
+    invalid?: boolean;
+}): false | "" | import("react").JSX.Element | undefined;

package/dist/types/internal/FieldWrapper.d.ts

@@ -1 +1,10 @@
-export declare const FieldWrapper: ({ label, appendLabel, width, labelWidth, inline, info, disabled, required, children, listing, className, "data-inner": isInner, }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+import type { CssProp } from "@react-fabric/core/dist/types/types";
+import type { ReactNode } from "react";
+import type { WrapperProps } from "../types";
+export interface FieldProps extends CssProp, WrapperProps {
+    id?: string;
+    children: ReactNode;
+    showError?: boolean;
+    listing?: ReactNode;
+}
+export declare function FieldWrapper({ id, name, label, appendLabel, width, labelWidth, inline, info, required, children, listing, invalid, disabled, error, showError, }: FieldProps): import("react").JSX.Element;

package/dist/types/internal/InputWrapper.d.ts

@@ -1 +1,19 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, children, onClear, noOutline, noBorder, textarea, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+import type { CssProp } from "@react-fabric/core/dist/types/types";
+import type { ReactNode } from "react";
+import type { WrapperProps } from "../types";
+export interface InputWrapperProps extends CssProp, WrapperProps {
+    id?: string;
+    children: ReactNode;
+    showClear?: boolean;
+    onClear?: () => void;
+    textarea?: boolean;
+    hasStepper?: boolean;
+    actionButton?: ReactNode;
+    textareaExpandable?: boolean;
+    isOpen?: boolean;
+    focusRing?: boolean;
+    floatingExpand?: boolean;
+    listing?: ReactNode;
+    ref?: React.Ref<HTMLDivElement | null>;
+}
+export declare function InputWrapper(props: InputWrapperProps): import("react").JSX.Element;

package/dist/types/ranger/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
 import { type KeyboardEvent as KE, type MouseEvent as ME, type TouchEvent as TE } from "react";
 type RangerChangeEvent = (newValue: readonly number[]) => void;
 type RangerConfig = {
@@ -17,8 +21,8 @@ type RangerConfig = {
 } | {
     steps: number[];
 });
-export declare const useRanger: (opts: RangerConfig) => {
-    trackElRef: import("react").RefObject<HTMLDivElement>;
+export declare function useRanger(opts: RangerConfig): {
+    trackElRef: import("react").RefObject<HTMLDivElement | null>;
     activeHandleIndex: number | undefined;
     ticks: {
         key: number;
@@ -33,7 +37,7 @@ export declare const useRanger: (opts: RangerConfig) => {
         value: number;
         active: boolean;
         props: {
-            ref: import("react").RefObject<HTMLDivElement>;
+            ref: import("react").RefObject<HTMLDivElement | null>;
             onMouseDownCapture: (e: ME) => void;
             onTouchStartCapture: (e: TE) => void;
         } | {

package/dist/types/ranger/utils.d.ts

@@ -2,7 +2,7 @@
  * react-ranger
  * https://github.com/TanStack/ranger
  */
-export declare const getBoundingClientRect: (element: any) => {
+export declare function getBoundingClientRect(element: AnyObject): {
     top: number;
     left: number;
     right: number;
@@ -10,7 +10,7 @@ export declare const getBoundingClientRect: (element: any) => {
     bottom: number;
     height: number;
 };
-export declare const sortNumList: (arr: ReadonlyArray<number | string>) => number[];
+export declare function sortNumList(arr: ReadonlyArray<number | string>): number[];
 export declare const linearInterpolator: {
     getPercentageForValue: (val: number, min: number, max: number) => number;
     getValueForClientX: (clientX: number, trackDims: {

package/dist/types/select/AutoComplete.d.ts

@@ -1,5 +1,6 @@
+import type { RefProp } from "@react-fabric/core/dist/types/types";
 import { type SelectProps } from "../types";
-type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "createOption"> & {
+type AutoCompleteProps = Omit<SelectProps<string>, "ref" | "options" | "allowCreate" | "createOption"> & RefProp<HTMLTextAreaElement> & {
     /**
      * auto-complete history
      */
@@ -13,5 +14,9 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
      */
     onInput?: (query: string) => void;
 };
-export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ */
+export declare function AutoComplete(props: AutoCompleteProps): import("react").JSX.Element;
 export {};

package/dist/types/select/DualList.d.ts

@@ -1,38 +1,12 @@
-/// <reference types="react" />
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type FieldProps } from "../input/Field";
-export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<HTMLInputElement> {
-    /**
-     * list height
-     */
+import type { DualSelectProps } from "../types";
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ */
+export declare function DualList<T extends AnyObject = string>(props: DualSelectProps<T> & {
     height?: string | number;
-    /**
-     * list options
-     */
-    options: T[];
-    /**
-     * selected value
-     */
-    value?: string[];
-    /**
-     * group by property name
-     */
-    groupProperty?: keyof T;
-    /**
-     * label property name
-     */
-    labelProperty?: keyof T;
-    /**
-     * value property name
-     */
-    valueProperty?: keyof T;
-    /**
-     * item renderer
-     */
-    renderer?: (option: T) => React.ReactNode;
-    /**
-     * change handler
-     */
-    onChange?: (value?: string[]) => void;
-}
-export declare const DualList: <T extends unknown = string>({ ref, value, options, groupProperty, height, labelProperty, valueProperty, renderer, onChange, name, invalid, readOnly, disabled, placeholder, autoFocus, error, ...rest }: DualListProps<T>) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/types/select/List.d.ts

@@ -1,4 +1,9 @@
 import { type SelectProps } from "../types";
-export declare const List: <T extends unknown = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, multiple, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: SelectProps<T> & {
+/**
+ * List component for selecting items from a list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ */
+export declare function List<T extends AnyObject = string>(props: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/types/select/Options.d.ts

@@ -1,14 +1,15 @@
-import { type ReactElement, type ReactNode } from "react";
-export declare const Options: ({ ref, style, items, active, className, itemRef, empty, valueProperty, labelProperty, itemProps, children, ...rest }: {
-    ref: AnyObject;
+export declare function Options({ ref, style, items, active, className, itemRef, empty, info, labelProperty, itemProps, children, onMouseOut, }: {
+    ref: React.Ref<HTMLDivElement | null>;
+    info?: AnyObject;
     itemRef: AnyObject;
-    style?: AnyObject;
+    style?: React.CSSProperties;
     items: AnyObject[];
     active: number | null;
     className?: string;
-    empty?: ReactElement;
+    empty?: React.ReactNode;
     valueProperty?: AnyObject;
     labelProperty?: AnyObject;
+    onMouseOut?: () => void;
     itemProps: (item: AnyObject) => AnyObject;
-    children: (item: AnyObject, label: string) => ReactNode;
-} & KeyValue) => import("react/jsx-runtime").JSX.Element;
+    children: (item: AnyObject, label: string) => React.ReactNode;
+}): import("react").JSX.Element;

package/dist/types/select/Select.d.ts

@@ -1,2 +1,7 @@
-import { type SelectProps } from "../types";
-export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, groupProperty, labelProperty, valueProperty, multiple, searchable, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+import type { SelectProps } from "../types";
+/**
+ * Select component for selecting items from a dropdown list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ */
+export declare function Select<T extends AnyObject = string>(props: SelectProps<T>): import("react").JSX.Element;

package/dist/types/select/helpers.d.ts

@@ -1,2 +1,2 @@
-export declare const makeOption: (query: string) => string;
-export declare const getSelectedValue: (value: AnyObject, emptyValue: AnyObject, valueProperty?: AnyObject) => any;
+export declare function makeOption(query: string): string;
+export declare function getSelectedValue(value: AnyObject, emptyValue: string | string[], valueProperty?: string): string | string[];

package/dist/types/select/useSelect.d.ts

@@ -1,47 +1,29 @@
-/// <reference types="react" />
+import type { SelectProps } from "../types";
 interface State {
     multiple: boolean;
     emptyValue: AnyObject;
     open: boolean;
     loading: boolean;
     activeIndex: number | null;
+    activeItem: AnyObject;
     selectedIndex: number | null;
     value: AnyObject;
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
-    value?: AnyObject;
-    options?: AnyObject[];
+export declare function useSelect(props: Omit<SelectProps<AnyObject>, "multiple"> & {
     multiple?: boolean;
-    allowCreate?: boolean;
-    groupProperty?: AnyObject;
-    valueProperty?: AnyObject;
-    labelProperty?: AnyObject;
     autoComplete?: boolean;
-    matcher?: (item: AnyObject, query: string) => boolean;
-    createOption?: (query: string) => AnyObject;
-    onQuery?: (query: string) => AnyObject;
-    onSelect?: (item: AnyObject) => void;
-    onChange?: (value: AnyObject) => void;
-}) => {
-    state: State | {
-        value: any;
-        activeIndex: null;
-        selectedIndex: any;
-        multiple: boolean;
-        emptyValue: AnyObject;
-        open: boolean;
-        loading: boolean;
-        query?: string | undefined;
-        items: AnyObject[];
-    };
-    listRef: import("react").MutableRefObject<HTMLElement[]>;
-    focusableRef: import("react").RefObject<HTMLElement>;
-    listContentRef: import("react").MutableRefObject<any[]>;
+    alwaysOpen?: boolean;
+}): {
+    state: State;
+    listRef: import("react").RefObject<HTMLElement[]>;
+    focusableRef: import("react").RefObject<HTMLElement | null>;
+    listContentRef: import("react").RefObject<any[]>;
     handleChange: (value?: AnyObject) => void;
     handleRemove: (index?: number) => void;
     handleQuery: (query: string) => void;
+    clearActiveIndex: () => void;
     macthOption: (item: AnyObject, query: string) => boolean;
     setActiveIndex: (index: number | null) => void;
     setOpen: (open: boolean) => void;