@via-profit/ui-kit 0.1.0-rc.4 → 0.1.0-rc.41

package/Autocomplete/AutocompleteContainer.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Value, OnSelectItem, OnRequestClose } from '../Menu';
+import type { MenuItemCommonProps } from '../Menu/MenuItem';
+export type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
+    readonly value: Value<T, Multiple> | null;
+    /**
+     * Array of items. If will be array of objects or array of strings
+     */
+    readonly items: T[];
+    readonly multiple?: Multiple;
+    /**
+     * Menu open state\
+     * If `true` then menu is open, otherwise - closed
+     */
+    readonly isOpen?: boolean;
+    /**
+     * Loading indicator visiblility\
+     * If `true` then visible, otherwise - hidden
+     */
+    readonly isLoading?: boolean;
+    readonly clearIfNotSelected?: boolean;
+    readonly children: Children<T>;
+    readonly filterItems?: FilterItems<T>;
+    readonly onSelectItem?: OnSelectItem<T>;
+    readonly selectedItemToString: ItemToString<T, Multiple>;
+    readonly onRequestClose?: OnRequestClose;
+    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
+};
+export type Children<T> = (data: {
+    item: T;
+    index: number;
+    inputValue: string;
+}, itemProps: MenuItemCommonProps) => React.ReactNode;
+export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => string;
+export type FilterItems<T> = (items: readonly T[], data: {
+    readonly query: string;
+    readonly inputValue: string;
+}) => readonly T[];
+export type AutocompleteRef = {
+    clear: () => void;
+};
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
+    ref?: React.Ref<AutocompleteRef> | undefined;
+}) => JSX.Element;
+export default _default;

package/Autocomplete/AutocompleteContainer.js

@@ -0,0 +1,229 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Menu_1 = __importDefault(require("../Menu"));
+const TextField_1 = __importDefault(require("../TextField"));
+const Button_1 = __importDefault(require("../Button"));
+const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
+const IconClear_1 = __importDefault(require("./IconClear"));
+const context_1 = __importStar(require("./context"));
+const Autocomplete = react_1.default.forwardRef((props, ref) => {
+    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, filterItems, children, onSelectItem, selectedItemToString, onInputChange, onRequestOpen = () => undefined, onRequestClose = () => undefined, } = props;
+    const menuRef = react_1.default.useRef(null);
+    const inputRef = react_1.default.useRef(null);
+    const isFocusedRef = react_1.default.useRef(false);
+    const { state, dispatch } = (0, context_1.default)();
+    const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = state;
+    const clear = react_1.default.useCallback(() => {
+        if (onSelectItem) {
+            onSelectItem(null);
+        }
+        dispatch((0, context_1.actionSetPartial)({
+            filteredItems: items,
+            currentValue: null,
+            inputValue: '',
+        }));
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 15);
+    }, [dispatch, onSelectItem, items]);
+    /**
+     * API
+     */
+    react_1.default.useImperativeHandle(ref, () => ({
+        clear: () => clear(),
+    }), [clear]);
+    const inputKeydownEvent = react_1.default.useCallback((event) => {
+        var _a, _b, _c, _d, _e;
+        if (!isFocusedRef.current) {
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                event.preventDefault();
+                (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem();
+                break;
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.hightlightPrevItem();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
+                    if (!currentOpen) {
+                        onRequestOpen(event);
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    event.preventDefault();
+                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.hightlightFirstItem();
+                }
+                break;
+            case 'End':
+                {
+                    event.preventDefault();
+                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.hightlightLastItem();
+                }
+                break;
+            // case 'PageUp':
+            // case 'PageDown':
+            //   event.preventDefault();
+            //   break;
+            case 'Escape':
+            case 'Tab':
+                if (currentOpen) {
+                    onRequestClose(event);
+                }
+                break;
+            default:
+                // do nothing
+                break;
+        }
+    }, [currentOpen, onRequestClose, onRequestOpen]);
+    /**
+     * Only affected value change action
+     */
+    react_1.default.useEffect(() => {
+        if (value === currentValue) {
+            return;
+        }
+        if (multiple) {
+            if (Array.isArray(value)) {
+                dispatch((0, context_1.actionSetPartial)({
+                    currentValue: value,
+                    inputValue: value === null ? inputValue : selectedItemToString(value),
+                }));
+            }
+        }
+        if (!multiple) {
+            if (!Array.isArray(value)) {
+                dispatch((0, context_1.actionSetPartial)({
+                    currentValue: value,
+                    inputValue: value === null ? inputValue : selectedItemToString(value),
+                }));
+            }
+        }
+    }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
+    react_1.default.useEffect(() => {
+        if (currentOpen && menuRef.current) {
+            menuRef.current.scrollToFirstSelected();
+        }
+    }, [currentOpen]);
+    react_1.default.useEffect(() => {
+        var _a;
+        if (filteredItems.length === 1) {
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(0);
+        }
+    }, [filteredItems]);
+    react_1.default.useEffect(() => {
+        dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading, filteredItems: items }));
+    }, [isOpen, isLoading, items, dispatch]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.useMemo(() => (react_1.default.createElement(TextField_1.default, { endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)), onKeyDown: inputKeydownEvent, ref: el => {
+                if (anchorElement !== el) {
+                    dispatch((0, context_1.actionSetPartial)({ anchorElement: el }));
+                }
+            }, inputRef: inputRef, value: inputValue, onBlur: () => {
+                isFocusedRef.current = false;
+                if (clearIfNotSelected) {
+                    dispatch((0, context_1.actionSetPartial)({
+                        inputValue: value !== null ? selectedItemToString(value) : '',
+                    }));
+                }
+            }, onFocus: event => {
+                isFocusedRef.current = true;
+                onRequestOpen(event);
+            }, onClick: event => {
+                if (isFocusedRef.current) {
+                    onRequestOpen(event);
+                }
+            }, onChange: event => {
+                dispatch((0, context_1.actionSetPartial)({ inputValue: event.currentTarget.value }));
+                if (typeof onInputChange === 'function') {
+                    onInputChange(event);
+                }
+                const query = event.currentTarget.value.toLowerCase().trim();
+                // Apply filter
+                const newItems = typeof filterItems !== 'function' || query.length === 0
+                    ? items
+                    : filterItems(items, { query, inputValue });
+                dispatch((0, context_1.actionSetPartial)({
+                    filteredItems: newItems,
+                }));
+            } })), [
+            currentLoading,
+            inputKeydownEvent,
+            inputValue,
+            clear,
+            anchorElement,
+            dispatch,
+            clearIfNotSelected,
+            value,
+            selectedItemToString,
+            onRequestOpen,
+            onInputChange,
+            filterItems,
+            items,
+        ]),
+        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: "left-bottom-right", multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: true, onSelectItem: item => {
+                if (typeof onSelectItem === 'function') {
+                    onSelectItem(item);
+                }
+                if (!multiple) {
+                    dispatch((0, context_1.actionSetPartial)({
+                        inputValue: selectedItemToString(item),
+                    }));
+                }
+            }, closeOnSelect: multiple ? false : true, onRequestClose: evt => {
+                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+                    onRequestClose(evt);
+                }
+            } }, ({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps))), [
+            anchorElement,
+            currentOpen,
+            currentValue,
+            filteredItems,
+            inputValue,
+            multiple,
+            children,
+            dispatch,
+            onRequestClose,
+            onSelectItem,
+            selectedItemToString,
+        ])));
+});
+Autocomplete.displayName = 'Autocomplete';
+exports.default = Autocomplete;

package/Autocomplete/IconClear.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconClear = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "m139.86 128.54a16 16 0 0 0-7.1738 4.1406 16 16 0 0 0 0 22.629l100.69 100.69-100.69 100.69a16 16 0 0 0 0 22.629 16 16 0 0 0 22.629 0l100.69-100.69 100.69 100.69a16 16 0 0 0 22.629 0 16 16 0 0 0 0-22.629l-100.69-100.69 100.69-100.69a16 16 0 0 0 0-22.629 16 16 0 0 0-22.629 0l-100.69 100.69-100.69-100.69a16 16 0 0 0-15.455-4.1406z", fill: "currentColor" })));
+exports.default = react_1.default.forwardRef(IconClear);

package/Autocomplete/context.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { AnchorElement } from '../Menu';
+type State = {
+    readonly currentOpen: boolean;
+    readonly currentLoading: boolean;
+    readonly anchorElement: AnchorElement | null;
+    readonly filteredItems: readonly unknown[];
+    readonly inputValue: string;
+    readonly currentValue: unknown | null;
+};
+type Action = ActionSetPartial;
+type ActionSetPartial = {
+    readonly type: 'setPartial';
+    readonly payload: Partial<State>;
+};
+export declare const actionSetPartial: (payload: ActionSetPartial['payload']) => ActionSetPartial;
+export declare const defaultState: State;
+export declare const reducer: React.Reducer<State, Action>;
+interface ContextProviderProps {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+}
+export declare const ContextProvider: React.FC<ContextProviderProps>;
+export declare const useContext: () => {
+    state: State;
+    dispatch: React.Dispatch<ActionSetPartial>;
+};
+export default useContext;

package/Autocomplete/context.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContext = exports.ContextProvider = exports.reducer = exports.defaultState = exports.actionSetPartial = void 0;
+const react_1 = __importDefault(require("react"));
+const actionSetPartial = (payload) => ({
+    type: 'setPartial',
+    payload,
+});
+exports.actionSetPartial = actionSetPartial;
+exports.defaultState = {
+    currentOpen: false,
+    currentLoading: false,
+    anchorElement: null,
+    filteredItems: [],
+    currentValue: null,
+    inputValue: '',
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setPartial':
+            return Object.assign(Object.assign({}, state), action.payload);
+        default:
+            return state;
+    }
+};
+exports.reducer = reducer;
+const context = react_1.default.createContext({
+    state: exports.defaultState,
+    dispatch: () => undefined,
+});
+const ContextProvider = props => {
+    const { children } = props;
+    const [state, dispatch] = react_1.default.useReducer(exports.reducer, exports.defaultState);
+    return react_1.default.createElement(context.Provider, { value: { state, dispatch } }, children);
+};
+exports.ContextProvider = ContextProvider;
+const useContext = () => {
+    const { state, dispatch } = react_1.default.useContext(context);
+    return {
+        state,
+        dispatch,
+    };
+};
+exports.useContext = useContext;
+exports.default = exports.useContext;

package/Autocomplete/index.d.ts

@@ -1,46 +1,7 @@
 import React from 'react';
-import { MenuRef, MenuProps, Value } from '../Menu';
-export type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = AutocompleteMenuProps<T, Multiple>;
-export type AutocompleteContainerRef = HTMLDivElement;
-type AutocompleteMenuProps<T, Multiple extends boolean | undefined = undefined> = Pick<MenuProps<T, Multiple>, 'items' | 'value' | 'estimatedItemSize' | 'endThreshold' | 'overscanCount' | 'getOptionSelected' | 'onEndReached' | 'onSelectItem' | 'renderItem' | 'multiple' | 'zIndex' | 'onRequestClose' | 'isOpen'> & {
-    readonly containerRef?: React.Ref<AutocompleteContainerRef>;
-    readonly itemToString: ItemToString<T, Multiple>;
-    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
-    readonly onRequestOpen: (event?: FocusEvent | KeyboardEvent | MouseEvent | React.FocusEvent | React.KeyboardEvent | React.MouseEvent) => void;
-    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-    readonly filterItems?: (items: readonly T[], data: {
-        readonly query: string;
-        readonly inputValue: string;
-    }) => readonly T[];
-};
-export type ItemToString<T, Multiple> = Multiple extends undefined | false ? (item: T) => string : undefined;
-export type RenderInputProps<T, Multiple extends boolean | undefined = undefined> = {
-    readonly selected: Value<T, Multiple> | null;
-    readonly value: string;
-    readonly inputRef: React.Ref<HTMLInputElement>;
-    readonly onClick: React.MouseEventHandler<HTMLInputElement>;
-    readonly onFocus: React.FocusEventHandler<HTMLInputElement>;
-    readonly onBlur: React.FocusEventHandler<HTMLInputElement>;
-    readonly onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
-    readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
-};
-export type AutocompleteRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' | 'scrollToFirstSelected' | 'selectItem' | 'highlightIndex' | 'hightlightPrevItem' | 'hightlightNextItem' | 'hightlightFirstItem' | 'hightlightLastItem' | 'selectHightlightedItem' | 'updatePopper'> & {
-    readonly clear: () => void;
-    readonly focus: () => void;
-    readonly blur: () => void;
-    readonly clearInput: () => void;
-};
-declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "value" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
-    readonly containerRef?: React.Ref<HTMLDivElement> | undefined;
-    readonly itemToString: ItemToString<T, Multiple>;
-    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
-    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
-    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-    readonly filterItems?: ((items: readonly T[], data: {
-        readonly query: string;
-        readonly inputValue: string;
-    }) => readonly T[]) | undefined;
-} & {
-    ref?: React.Ref<AutocompleteRef<T>> | undefined;
+import { AutocompleteProps, AutocompleteRef } from './AutocompleteContainer';
+export * from './AutocompleteContainer';
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
+    ref?: React.Ref<AutocompleteRef> | undefined;
 }) => JSX.Element;
 export default _default;

package/Autocomplete/index.js

@@ -1,187 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Menu_1 = __importDefault(require("../Menu"));
-const popper_options_1 = __importDefault(require("./popper-options"));
+const AutocompleteContainer_1 = __importDefault(require("./AutocompleteContainer"));
+const context_1 = require("./context");
+__exportStar(require("./AutocompleteContainer"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, estimatedItemSize, endThreshold, overscanCount, zIndex, isOpen, multiple, itemToString, containerRef, filterItems, renderInput, getOptionSelected, onEndReached, onSelectItem, renderItem, onRequestClose, onRequestOpen, onInputChange, } = props;
-    const [inputValue, setInputValue] = react_1.default.useState('');
-    const menuRef = react_1.default.useRef(null);
-    const isFocusedRef = react_1.default.useRef(false);
-    const [currentOpen, setCurrentOpen] = react_1.default.useState(isOpen);
-    const [currentValue, setCurrentValue] = react_1.default.useState(value);
-    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
-    const [filteredItems, setFilteredItems] = react_1.default.useState(items);
-    /**
-     * API
-     */
-    react_1.default.useImperativeHandle(ref, () => ({
-        highlightIndex: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(index); },
-        hightlightPrevItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightPrevItem(); },
-        hightlightNextItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightNextItem(); },
-        hightlightFirstItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightFirstItem(); },
-        hightlightLastItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightLastItem(); },
-        selectHightlightedItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem(); },
-        updatePopper: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.updatePopper(); },
-        scrollToFirstSelected: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToFirstSelected(); },
-        selectItem: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectItem(index); },
-        scrollTo: (scrollOffset) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(scrollOffset); },
-        scrollToItem: (index, align) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align); },
-        clear: () => {
-            setCurrentValue(null);
-            setInputValue('');
-            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
-            setFilteredItems(items);
-        },
-        focus: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus(),
-        blur: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.blur(),
-        clearInput: () => setInputValue(''),
-    }), [anchorElement, items]);
-    const inputKeydownEvent = react_1.default.useCallback((event) => {
-        var _a, _b, _c, _d, _e;
-        if (!isFocusedRef.current) {
-            return;
-        }
-        switch (event.code) {
-            case 'Enter':
-            case 'NumpadEnter':
-                event.preventDefault();
-                (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem();
-                break;
-            case 'ArrowUp':
-                {
-                    event.preventDefault();
-                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.hightlightPrevItem();
-                }
-                break;
-            case 'ArrowDown':
-                {
-                    event.preventDefault();
-                    (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
-                    if (!currentOpen) {
-                        onRequestOpen(event);
-                    }
-                }
-                break;
-            case 'Home':
-                {
-                    event.preventDefault();
-                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.hightlightFirstItem();
-                }
-                break;
-            case 'End':
-                {
-                    event.preventDefault();
-                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.hightlightLastItem();
-                }
-                break;
-            case 'PageUp':
-            case 'PageDown':
-                event.preventDefault();
-                break;
-            case 'Escape':
-            case 'Tab':
-                onRequestClose(event);
-                break;
-            default:
-                if (!currentOpen) {
-                    onRequestOpen(event);
-                }
-                // do nothing
-                break;
-        }
-    }, [currentOpen, onRequestClose, onRequestOpen]);
-    const onSelectItemF = react_1.default.useCallback(selected => {
-        setCurrentValue(selected);
-        if (typeof onSelectItem === 'function') {
-            if (!Array.isArray(selected) && typeof itemToString === 'function') {
-                setInputValue(itemToString(selected));
-            }
-            onSelectItem(selected);
-        }
-    }, [itemToString, onSelectItem]);
-    react_1.default.useEffect(() => {
-        if (value === null) {
-            setCurrentValue(null);
-            return;
-        }
-        if (multiple) {
-            if (Array.isArray(value)) {
-                setCurrentValue(value);
-            }
-            if (!Array.isArray(value)) {
-                setCurrentValue([value]);
-            }
-        }
-        if (!multiple) {
-            if (Array.isArray(value)) {
-                setCurrentValue(value[0]);
-            }
-            if (!Array.isArray(value)) {
-                setCurrentValue(value);
-            }
-        }
-    }, [value, multiple]);
-    react_1.default.useEffect(() => {
-        setCurrentOpen(isOpen);
-    }, [isOpen]);
-    const renderInputOnChange = react_1.default.useCallback(event => {
-        setInputValue(event.currentTarget.value);
-        if (typeof onInputChange === 'function') {
-            onInputChange(event);
-        }
-        const query = event.currentTarget.value.toLowerCase().trim();
-        // Apply filter
-        const newItems = typeof filterItems !== 'function' || query.length === 0
-            ? items
-            : filterItems(items, { query, inputValue });
-        setFilteredItems(newItems);
-    }, [inputValue, items, onInputChange, filterItems]);
-    react_1.default.useEffect(() => {
-        var _a;
-        if (filteredItems.length === 1) {
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(0);
-        }
-    }, [filteredItems]);
-    const inputElement = react_1.default.useMemo(() => {
-        const elem = renderInput({
-            inputRef: setAnchorElement,
-            value: inputValue,
-            selected: currentValue,
-            onBlur: () => {
-                isFocusedRef.current = false;
-            },
-            onFocus: event => {
-                isFocusedRef.current = true;
-                onRequestOpen(event);
-            },
-            onKeyDown: inputKeydownEvent,
-            onChange: renderInputOnChange,
-            onClick: event => {
-                if (isFocusedRef.current) {
-                    onRequestOpen(event);
-                }
-            },
-        });
-        return elem;
-    }, [
-        inputKeydownEvent,
-        inputValue,
-        onRequestOpen,
-        renderInput,
-        renderInputOnChange,
-        currentValue,
-    ]);
-    return (react_1.default.createElement("div", { ref: containerRef },
-        inputElement,
-        react_1.default.createElement(Menu_1.default, { ref: menuRef, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, estimatedItemSize: estimatedItemSize, endThreshold: endThreshold, overscanCount: overscanCount, getOptionSelected: getOptionSelected, onEndReached: onEndReached, onSelectItem: onSelectItemF, renderItem: renderItem, multiple: multiple, zIndex: zIndex, closeOutsideClick: true, popperOptions: popper_options_1.default, onRequestClose: evt => {
-                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
-                    onRequestClose(evt);
-                }
-            } })));
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(context_1.ContextProvider, null,
+        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { ref: ref }), children)));
 });
 Autocomplete.displayName = 'Autocomplete';
 exports.default = Autocomplete;