@mezzanine-ui/react 0.13.10 → 0.13.12

package/Drawer/Drawer.js

@@ -4,16 +4,16 @@ import { drawerClasses } from '@mezzanine-ui/core/drawer';
 import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
 import cx from 'clsx';
 
-const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const slideFadeDirection = useMemo(() => ({
-        top: 'down',
-        left: 'right',
-        right: 'left',
-        bottom: 'up',
-    }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
-});
+const Drawer = forwardRef((props, ref) => {
+    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
+    const slideFadeDirection = useMemo(() => ({
+        top: 'down',
+        left: 'right',
+        right: 'left',
+        bottom: 'up',
+    }), []);
+    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+});
 var Drawer$1 = Drawer;
 
 export { Drawer$1 as default };

package/Drawer/index.d.ts

@@ -1,2 +1,2 @@
-export type { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-export { DrawerProps, default, } from './Drawer';
+export type { DrawerPlacement } from '@mezzanine-ui/core/drawer';
+export { DrawerProps, default, } from './Drawer';

package/Dropdown/Dropdown.d.ts

@@ -1,25 +1,25 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from 'react';
-import { PopperProps } from '../Popper';
-import { ClickAwayEvent } from '../hooks/useClickAway';
-export interface DropdownProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> {
-    children: (ref: Ref<any>) => ReactNode;
-    /**
-     * Whether to disable triggering onClose while clicked away.
-     * @default false
-     */
-    disableClickAway?: boolean;
-    /**
-     * The dropdown menu
-     */
-    menu?: ReactNode;
-    /**
-     * The handler fired while clicked away.
-     */
-    onClose?: (event: ClickAwayEvent) => void;
-    /**
-     * the props of popper
-     */
-    popperProps?: PopperProps;
-}
-declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Dropdown;
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from 'react';
+import { PopperProps } from '../Popper';
+import { ClickAwayEvent } from '../hooks/useClickAway';
+export interface DropdownProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> {
+    children: (ref: Ref<any>) => ReactNode;
+    /**
+     * Whether to disable triggering onClose while clicked away.
+     * @default false
+     */
+    disableClickAway?: boolean;
+    /**
+     * The dropdown menu
+     */
+    menu?: ReactNode;
+    /**
+     * The handler fired while clicked away.
+     */
+    onClose?: (event: ClickAwayEvent) => void;
+    /**
+     * the props of popper
+     */
+    popperProps?: PopperProps;
+}
+declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/Dropdown/Dropdown.js

@@ -4,58 +4,58 @@ import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 
-const popperOptions = {
-    modifiers: [
-        {
-            name: 'sameWidth',
-            enabled: true,
-            phase: 'beforeWrite',
-            requires: ['computeStyles'],
-            fn: ({ state }) => {
-                const reassignState = state;
-                reassignState.styles.popper.width = 'auto';
-                reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-            },
-            effect: ({ state }) => {
-                const reassignState = state;
-                reassignState.elements.popper.style.width = 'auto';
-                reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-            },
-        },
-    ],
-};
-const Dropdown = forwardRef(function Dropdown(props, ref) {
-    var _a;
-    const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
-    const anchor = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, popperRef]);
-    const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
-    const modifiers = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.modifiers) || [];
-    useClickAway(() => {
-        if (!open || disableClickAway || !onClose) {
-            return;
-        }
-        return (event) => {
-            if (onClose) {
-                onClose(event);
-            }
-        };
-    }, popperRef, [
-        disableClickAway,
-        onClose,
-        open,
-        popperRef,
-    ]);
-    return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
-                    placement: 'top-start',
-                    ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
-                    modifiers: [
-                        ...(popperOptions.modifiers || []),
-                        ...modifiers,
-                    ],
-                }, children: menu })] }));
-});
+const popperOptions = {
+    modifiers: [
+        {
+            name: 'sameWidth',
+            enabled: true,
+            phase: 'beforeWrite',
+            requires: ['computeStyles'],
+            fn: ({ state }) => {
+                const reassignState = state;
+                reassignState.styles.popper.width = 'auto';
+                reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
+            },
+            effect: ({ state }) => {
+                const reassignState = state;
+                reassignState.elements.popper.style.width = 'auto';
+                reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
+            },
+        },
+    ],
+};
+const Dropdown = forwardRef(function Dropdown(props, ref) {
+    var _a;
+    const { children, disableClickAway = false, menu, onClose, popperProps, ...rest } = props;
+    const anchor = useRef(null);
+    const popperRef = useRef(null);
+    const composedRef = useComposeRefs([ref, popperRef]);
+    const open = popperProps === null || popperProps === void 0 ? void 0 : popperProps.open;
+    const modifiers = ((_a = popperProps === null || popperProps === void 0 ? void 0 : popperProps.options) === null || _a === void 0 ? void 0 : _a.modifiers) || [];
+    useClickAway(() => {
+        if (!open || disableClickAway || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (onClose) {
+                onClose(event);
+            }
+        };
+    }, popperRef, [
+        disableClickAway,
+        onClose,
+        open,
+        popperRef,
+    ]);
+    return (jsxs(Fragment, { children: [children(anchor), jsx(Popper, { ...popperProps, ref: composedRef, ...rest, anchor: anchor, options: {
+                    placement: 'top-start',
+                    ...popperProps === null || popperProps === void 0 ? void 0 : popperProps.options,
+                    modifiers: [
+                        ...(popperOptions.modifiers || []),
+                        ...modifiers,
+                    ],
+                }, children: menu })] }));
+});
 var Dropdown$1 = Dropdown;
 
 export { Dropdown$1 as default };

package/Dropdown/index.d.ts

@@ -1 +1 @@
-export { DropdownProps, default, } from './Dropdown';
+export { DropdownProps, default, } from './Dropdown';

package/Empty/Empty.d.ts

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface EmptyProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
-    /**
-     * if true, the empty component will be 100% height of it's parent
-     */
-    fullHeight?: boolean;
-    /**
-     * Override default icon.
-     */
-    image?: ReactNode;
-    /**
-     * Optionally given a title. If not required, simply use react children to display description.
-     */
-    title?: ReactNode;
-}
-declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Empty;
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface EmptyProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title'> {
+    /**
+     * if true, the empty component will be 100% height of it's parent
+     */
+    fullHeight?: boolean;
+    /**
+     * Override default icon.
+     */
+    image?: ReactNode;
+    /**
+     * Optionally given a title. If not required, simply use react children to display description.
+     */
+    title?: ReactNode;
+}
+declare const Empty: import("react").ForwardRefExoticComponent<EmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Empty;

package/Empty/Empty.js

@@ -5,12 +5,12 @@ import { FolderOpenIcon } from '@mezzanine-ui/icons';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-const Empty = forwardRef(function Empty(props, ref) {
-    const { children, className, fullHeight, image = jsx(Icon, { className: emptyClasses.icon, icon: FolderOpenIcon }), title, ...rest } = props;
-    return (jsxs("div", { ref: ref, ...rest, className: cx(emptyClasses.host, {
-            [emptyClasses.fullHeight]: fullHeight,
-        }, className), children: [image, title && jsx("div", { className: emptyClasses.title, children: title }), children && jsx("div", { className: emptyClasses.description, children: children })] }));
-});
+const Empty = forwardRef(function Empty(props, ref) {
+    const { children, className, fullHeight, image = jsx(Icon, { className: emptyClasses.icon, icon: FolderOpenIcon }), title, ...rest } = props;
+    return (jsxs("div", { ref: ref, ...rest, className: cx(emptyClasses.host, {
+            [emptyClasses.fullHeight]: fullHeight,
+        }, className), children: [image, title && jsx("div", { className: emptyClasses.title, children: title }), children && jsx("div", { className: emptyClasses.description, children: children })] }));
+});
 var Empty$1 = Empty;
 
 export { Empty$1 as default };

package/Empty/index.d.ts

@@ -1 +1 @@
-export { EmptyProps, default, } from './Empty';
+export { EmptyProps, default, } from './Empty';

package/Form/FormControlContext.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { Severity } from '@mezzanine-ui/system/severity';
-export interface FormControl {
-    disabled: boolean;
-    fullWidth: boolean;
-    required: boolean;
-    severity?: Severity;
-}
-export declare const FormControlContext: import("react").Context<FormControl | undefined>;
+/// <reference types="react" />
+import { Severity } from '@mezzanine-ui/system/severity';
+export interface FormControl {
+    disabled: boolean;
+    fullWidth: boolean;
+    required: boolean;
+    severity?: Severity;
+}
+export declare const FormControlContext: import("react").Context<FormControl | undefined>;

package/Form/FormField.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import { Severity } from '@mezzanine-ui/system/severity';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * To control the field passed from children whether should be disabled.
-     * The form message won't appear if disabled.
-     */
-    disabled?: boolean;
-    /**
-     * To control the field passed from children whether should be fullWidth.
-     */
-    fullWidth?: boolean;
-    /**
-     * To control the field passed from children whether should be required.
-     */
-    required?: boolean;
-    /**
-     * To control the severity of field passed from children and form message.
-     */
-    severity?: Severity;
-}
-/**
- * The react component for `mezzanine` form field.
- */
-declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
-export default FormField;
+/// <reference types="react" />
+import { Severity } from '@mezzanine-ui/system/severity';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * To control the field passed from children whether should be disabled.
+     * The form message won't appear if disabled.
+     */
+    disabled?: boolean;
+    /**
+     * To control the field passed from children whether should be fullWidth.
+     */
+    fullWidth?: boolean;
+    /**
+     * To control the field passed from children whether should be required.
+     */
+    required?: boolean;
+    /**
+     * To control the severity of field passed from children and form message.
+     */
+    severity?: Severity;
+}
+/**
+ * The react component for `mezzanine` form field.
+ */
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormField;

package/Form/FormField.js

@@ -4,22 +4,22 @@ import { formFieldClasses } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` form field.
- */
-const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, disabled = false, fullWidth = false, required = false, severity, ...rest } = props;
-    const formControl = {
-        disabled,
-        fullWidth,
-        required,
-        severity,
-    };
-    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, severity && formFieldClasses.severity(severity), {
-            [formFieldClasses.disabled]: disabled,
-            [formFieldClasses.fullWidth]: fullWidth,
-        }, className), children: jsx(FormControlContext.Provider, { value: formControl, children: children }) }));
-});
+/**
+ * The react component for `mezzanine` form field.
+ */
+const FormField = forwardRef(function FormField(props, ref) {
+    const { children, className, disabled = false, fullWidth = false, required = false, severity, ...rest } = props;
+    const formControl = {
+        disabled,
+        fullWidth,
+        required,
+        severity,
+    };
+    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, severity && formFieldClasses.severity(severity), {
+            [formFieldClasses.disabled]: disabled,
+            [formFieldClasses.fullWidth]: fullWidth,
+        }, className), children: jsx(FormControlContext.Provider, { value: formControl, children: children }) }));
+});
 var FormField$1 = FormField;
 
 export { FormField$1 as default };

package/Form/FormLabel.d.ts

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface FormLabelProps extends NativeElementPropsWithoutKeyAndRef<'label'> {
-    remark?: ReactNode;
-    remarkIcon?: ReactNode;
-}
-/**
- * The react component for `mezzanine` form label.
- */
-declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export default FormLabel;
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface FormLabelProps extends NativeElementPropsWithoutKeyAndRef<'label'> {
+    remark?: ReactNode;
+    remarkIcon?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` form label.
+ */
+declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default FormLabel;

package/Form/FormLabel.js

@@ -4,14 +4,14 @@ import { formFieldClasses } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` form label.
- */
-const FormLabel = forwardRef(function FormLabel(props, ref) {
-    const { children, className, htmlFor, remark, remarkIcon, ...rest } = props;
-    const { required } = useContext(FormControlContext) || {};
-    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [jsxs("span", { children: [children, required && jsx("span", { className: formFieldClasses.asterisk, children: "*" })] }), (remark || remarkIcon) && (jsxs("span", { className: formFieldClasses.remark, children: [jsx("span", { children: remark }), remarkIcon] }))] }));
-});
+/**
+ * The react component for `mezzanine` form label.
+ */
+const FormLabel = forwardRef(function FormLabel(props, ref) {
+    const { children, className, htmlFor, remark, remarkIcon, ...rest } = props;
+    const { required } = useContext(FormControlContext) || {};
+    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [jsxs("span", { children: [children, required && jsx("span", { className: formFieldClasses.asterisk, children: "*" })] }), (remark || remarkIcon) && (jsxs("span", { className: formFieldClasses.remark, children: [jsx("span", { children: remark }), remarkIcon] }))] }));
+});
 var FormLabel$1 = FormLabel;
 
 export { FormLabel$1 as default };

package/Form/FormMessage.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type FormMessageProps = NativeElementPropsWithoutKeyAndRef<'span'>;
-/**
- * The react component for `mezzanine` form message.
- */
-declare const FormMessage: import("react").ForwardRefExoticComponent<FormMessageProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default FormMessage;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export type FormMessageProps = NativeElementPropsWithoutKeyAndRef<'span'>;
+/**
+ * The react component for `mezzanine` form message.
+ */
+declare const FormMessage: import("react").ForwardRefExoticComponent<FormMessageProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default FormMessage;

package/Form/FormMessage.js

@@ -5,15 +5,15 @@ import { FormControlContext } from './FormControlContext.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` form message.
- */
-const FormMessage = forwardRef(function FormMessage(props, ref) {
-    const { children, className, ...rest } = props;
-    const { severity } = useContext(FormControlContext) || {};
-    const icon = severity ? formMessageIcons[severity] : null;
-    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.message, className), children: [icon && (jsx(Icon, { className: formFieldClasses.severityIcon, icon: icon })), children] }));
-});
+/**
+ * The react component for `mezzanine` form message.
+ */
+const FormMessage = forwardRef(function FormMessage(props, ref) {
+    const { children, className, ...rest } = props;
+    const { severity } = useContext(FormControlContext) || {};
+    const icon = severity ? formMessageIcons[severity] : null;
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.message, className), children: [icon && (jsx(Icon, { className: formFieldClasses.severityIcon, icon: icon })), children] }));
+});
 var FormMessage$1 = FormMessage;
 
 export { FormMessage$1 as default };

package/Form/index.d.ts

@@ -1,5 +1,5 @@
-export * from './typings';
-export * from './FormControlContext';
-export { FormFieldProps, default as FormField } from './FormField';
-export { FormLabelProps, default as FormLabel } from './FormLabel';
-export { FormMessageProps, default as FormMessage } from './FormMessage';
+export * from './typings';
+export * from './FormControlContext';
+export { FormFieldProps, default as FormField } from './FormField';
+export { FormLabelProps, default as FormLabel } from './FormLabel';
+export { FormMessageProps, default as FormMessage } from './FormMessage';

package/Form/typings.d.ts

@@ -1,4 +1,4 @@
-export declare type FormElementFocusHandlers = {
-    onBlur?: VoidFunction;
-    onFocus?: VoidFunction;
-};
+export type FormElementFocusHandlers = {
+    onBlur?: VoidFunction;
+    onFocus?: VoidFunction;
+};

package/Form/useAutoCompleteValueControl.d.ts

@@ -1,42 +1,42 @@
-import { Dispatch, MouseEvent, SetStateAction } from 'react';
-import { SelectValue } from '../Select/typings';
-export interface UseAutoCompleteBaseValueControl {
-    disabledOptionsFilter: boolean;
-    onChange?(newOptions: SelectValue[] | SelectValue | null): any;
-    onClear?(e: MouseEvent<Element>): void;
-    onClose?(): void;
-    onSearch?(input: string): any;
-    options: SelectValue[];
-}
-export declare type UseAutoCompleteMultipleValueControl = UseAutoCompleteBaseValueControl & {
-    defaultValue?: SelectValue[];
-    mode: 'multiple';
-    onChange?(newOptions: SelectValue[]): any;
-    value?: SelectValue[];
-};
-export declare type UseAutoCompleteSingleValueControl = UseAutoCompleteBaseValueControl & {
-    defaultValue?: SelectValue;
-    mode: 'single';
-    onChange?(newOption: SelectValue | null): any;
-    value?: SelectValue | null;
-};
-export declare type UseAutoCompleteValueControl = UseAutoCompleteMultipleValueControl | UseAutoCompleteSingleValueControl;
-export interface AutoCompleteBaseValueControl {
-    focused: boolean;
-    onClear(e: MouseEvent<Element>): void;
-    onFocus: (f: boolean) => void;
-    options: SelectValue[];
-    searchText: string;
-    selectedOptions: SelectValue[];
-    setSearchText: Dispatch<SetStateAction<string>>;
-    unselectedOptions: SelectValue[];
-}
-export declare type AutoCompleteMultipleValueControl = AutoCompleteBaseValueControl & {
-    onChange: (v: SelectValue | null) => SelectValue[];
-    value: SelectValue[];
-};
-export declare type AutoCompleteSingleValueControl = AutoCompleteBaseValueControl & {
-    onChange: (v: SelectValue | null) => SelectValue | null;
-    value: SelectValue | null;
-};
-export declare const useAutoCompleteValueControl: (props: UseAutoCompleteValueControl) => AutoCompleteMultipleValueControl | AutoCompleteSingleValueControl;
+import { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { SelectValue } from '../Select/typings';
+export interface UseAutoCompleteBaseValueControl {
+    disabledOptionsFilter: boolean;
+    onChange?(newOptions: SelectValue[] | SelectValue | null): any;
+    onClear?(e: MouseEvent<Element>): void;
+    onClose?(): void;
+    onSearch?(input: string): any;
+    options: SelectValue[];
+}
+export type UseAutoCompleteMultipleValueControl = UseAutoCompleteBaseValueControl & {
+    defaultValue?: SelectValue[];
+    mode: 'multiple';
+    onChange?(newOptions: SelectValue[]): any;
+    value?: SelectValue[];
+};
+export type UseAutoCompleteSingleValueControl = UseAutoCompleteBaseValueControl & {
+    defaultValue?: SelectValue;
+    mode: 'single';
+    onChange?(newOption: SelectValue | null): any;
+    value?: SelectValue | null;
+};
+export type UseAutoCompleteValueControl = UseAutoCompleteMultipleValueControl | UseAutoCompleteSingleValueControl;
+export interface AutoCompleteBaseValueControl {
+    focused: boolean;
+    onClear(e: MouseEvent<Element>): void;
+    onFocus: (f: boolean) => void;
+    options: SelectValue[];
+    searchText: string;
+    selectedOptions: SelectValue[];
+    setSearchText: Dispatch<SetStateAction<string>>;
+    unselectedOptions: SelectValue[];
+}
+export type AutoCompleteMultipleValueControl = AutoCompleteBaseValueControl & {
+    onChange: (v: SelectValue | null) => SelectValue[];
+    value: SelectValue[];
+};
+export type AutoCompleteSingleValueControl = AutoCompleteBaseValueControl & {
+    onChange: (v: SelectValue | null) => SelectValue | null;
+    value: SelectValue | null;
+};
+export declare const useAutoCompleteValueControl: (props: UseAutoCompleteValueControl) => AutoCompleteMultipleValueControl | AutoCompleteSingleValueControl;