@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/Autocomplete/AutocompleteContainer.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Value, OnRequestClose, GetOptionSelected } from '../Menu';
 import { AutocompleteTextFieldProps } from './AutocompleteTextField';
-import type { AnchorPos } from '../Popper';
-import type { MenuItemCommonProps } from '../Menu/MenuItem';
+import { PositionStrategy } from '../Popper';
+import { AnchorPos, GetOptionSelected, MenuItemProps, OnRequestClose, Value } from '../Menu';
 export interface AutocompleteProps<T, Multiple extends boolean | undefined = undefined> extends Omit<AutocompleteTextFieldProps, 'value' | 'onChange' | 'children' | 'overrides'> {
     readonly items: readonly T[];
     readonly value: Value<T, Multiple>;
@@ -16,15 +15,43 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      */
     readonly isOpen?: boolean;
     /**
-     * Loading indicator visiblility\
+     * Loading indicator visibility\
      * If `true` then visible, otherwise - hidden
      */
     /**
      * Anchor position\
      * \
-     * Default: `auto-start-end`
+     * Default: `bottom-fill`
      */
     readonly anchorPos?: AnchorPos;
+    /**
+     * When enabled, the popper will automatically try to find the best placement
+     * if the preferred placement doesn't fit in the viewport.
+     * The component will iterate through possible placements until it finds one that fits.
+     *
+     * **Default**: `true`
+     * ```
+     */
+    readonly autoFlip?: boolean;
+    /**
+     * The positioning strategy to use.
+     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
+     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     *                 When using 'absolute', make sure a parent element has `position: relative`.
+     *
+     * **Default**: `fixed`
+     * ```
+     */
+    readonly positionStrategy?: PositionStrategy;
+    /**
+     * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
+     * Used to prevent the popper from being positioned too close to the screen boundaries.
+     * The popper will try to flip to another placement if it cannot maintain this margin.
+     *
+     * **Default**: `8`
+     * ```
+     */
+    readonly viewportMargin?: number;
     /**
      * Text field loading state\
      * If `true` then text field has been contained the loading indicator, otherwise - nop
@@ -116,7 +143,7 @@ export type Children<T> = (data: {
     item: T;
     index: number;
     inputValue: string;
-}, itemProps: MenuItemCommonProps) => React.ReactNode;
+}, itemProps: MenuItemProps) => React.ReactNode;
 export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 export type FilterItems<T> = (items: readonly T[], data: {

package/Autocomplete/AutocompleteContainer.js

@@ -38,15 +38,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Menu_1 = __importDefault(require("../Menu"));
 const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
 const Button_1 = __importDefault(require("../Button"));
 const Spinner_1 = __importDefault(require("../LoadingIndicator/Spinner"));
 const context_1 = __importStar(require("./context"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const ClickOutside_1 = require("../ClickOutside");
+const OverrideMenuList_1 = __importDefault(require("./OverrideMenuList"));
+const Menu_1 = __importDefault(require("../Menu"));
+//
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom', openOnFocus = true, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "openOnFocus", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', openOnFocus = true, autoFlip, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
     const menuRef = react_1.default.useRef(null);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -85,13 +88,13 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             case 'NumpadEnter':
                 if (currentOpen) {
                     event.preventDefault();
-                    (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem();
+                    (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHighlightedItem();
                 }
                 break;
             case 'ArrowUp':
                 {
                     event.preventDefault();
-                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.hightlightPrevItem();
+                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.highlightPrevItem();
                 }
                 break;
             case 'ArrowDown':
@@ -101,20 +104,20 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                         onRequestOpen(event);
                     }
                     if (currentOpen) {
-                        (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
+                        (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.highlightNextItem();
                     }
                 }
                 break;
             case 'Home':
                 {
                     event.preventDefault();
-                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.hightlightFirstItem();
+                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.highlightFirstItem();
                 }
                 break;
             case 'End':
                 {
                     event.preventDefault();
-                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.hightlightLastItem();
+                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.highlightLastItem();
                 }
                 break;
             // case 'PageUp':
@@ -135,11 +138,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const applyFilterForItems = react_1.default.useCallback((inputValue, itemList) => {
         const query = inputValue.toLowerCase().trim();
         // Apply filter
-        const newItems = typeof filterItems !== 'function' || query.length === 0
+        return typeof filterItems !== 'function' || query.length === 0
             ? itemList
             : filterItems(itemList, { query, inputValue });
-        return newItems;
     }, [filterItems]);
+    const renderChildren = react_1.default.useCallback(({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps), [children, inputValue]);
     /**
      * Only affected value change action
      */
@@ -166,20 +169,27 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         }
     }, [filteredItems]);
     react_1.default.useEffect(() => {
-        if (currentOpen !== isOpen || currentLoading !== isLoading) {
-            dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading }));
+        if (currentOpen !== isOpen) {
+            dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen }));
         }
-    }, [isOpen, isLoading, dispatch, currentOpen, currentLoading]);
+    }, [isOpen, currentOpen, dispatch]);
     react_1.default.useEffect(() => {
-        if (JSON.stringify(items) !== JSON.stringify(itemsRef.current)) {
-            itemsRef.current = items;
-            const newFilteredItems = applyFilterForItems(inputValue, items);
-            dispatch((0, context_1.actionSetPartial)({ filteredItems: newFilteredItems }));
-            if (!newFilteredItems.length) {
-                onRequestClose();
-            }
+        if (currentLoading !== isLoading) {
+            dispatch((0, context_1.actionSetPartial)({ currentLoading: isLoading }));
         }
-    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose]);
+    }, [isLoading, currentLoading, dispatch]);
+    react_1.default.useEffect(() => {
+        // Сравниваем items более эффективно
+        if (itemsRef.current === items) {
+            return;
+        }
+        itemsRef.current = items;
+        const newFilteredItems = applyFilterForItems(inputValue, items);
+        dispatch((0, context_1.actionSetPartial)({ filteredItems: newFilteredItems }));
+        if (!newFilteredItems.length && currentOpen) {
+            onRequestClose();
+        }
+    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose, currentOpen]);
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
             var _a;
@@ -232,7 +242,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         multiple,
     ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: clearable ? (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null))) : undefined }, nativeInputProps, { onKeyDown: event => {
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, anchorPos: actualPlacement, isOpen: currentOpen, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: clearable ? (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", variant: "plain", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null))) : undefined }, nativeInputProps, { onKeyDown: event => {
                 inputKeydownEvent(event);
                 if (typeof nativeInputProps.onKeyDown === 'function') {
                     nativeInputProps.onKeyDown(event);
@@ -256,16 +266,12 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
             }, onFocus: event => {
                 isFocusedRef.current = true;
-                if (openOnFocus &&
-                    !currentOpen &&
-                    filteredItems.length > 0
-                // && inputValue.trim() !== ''
-                ) {
-                    onRequestOpen(event);
-                }
-                if (!openOnFocus && !currentOpen && inputValue !== '' && filteredItems.length > 0) {
+                if (openOnFocus && !currentOpen && filteredItems.length > 0) {
                     onRequestOpen(event);
                 }
+                // if (!openOnFocus && !currentOpen && inputValue !== '' && filteredItems.length > 0) {
+                //   onRequestOpen(event);
+                // }
                 if (typeof nativeInputProps.onFocus === 'function') {
                     nativeInputProps.onFocus(event);
                 }
@@ -307,8 +313,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             } }))), [
             overridesMap,
             placeholder,
+            actualPlacement,
+            currentOpen,
             label,
-            onRequestClose,
             error,
             requiredAsterisk,
             errorText,
@@ -324,14 +331,16 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             dispatch,
             inputRef,
             openOnFocus,
-            currentOpen,
             filteredItems.length,
             onRequestOpen,
             onInputChange,
-            items,
             applyFilterForItems,
+            items,
+            onRequestClose,
         ]),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen, autofocus: false, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onRequestClose: onRequestClose, closeOnSelect: multiple ? false : true, onSelectItem: item => {
+        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, onAnchorPosChanged: setActualPlacement, anchorPos: actualPlacement, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen, autofocus: false, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: 0, overrides: {
+                List: OverrideMenuList_1.default,
+            }, positionStrategy: positionStrategy, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onRequestClose: onRequestClose, closeOnSelect: !multiple, onSelectItem: item => {
                 if (!multiple) {
                     dispatch({
                         type: 'setPartial',
@@ -343,20 +352,23 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 if (typeof onChange === 'function') {
                     onChange(item);
                 }
-            } }, ({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps))), [
-            anchorPos,
+            } }, renderChildren)), [
+            actualPlacement,
             multiple,
             filteredItems,
             currentValue,
             currentOpen,
+            autoFlip,
+            viewportMargin,
+            positionStrategy,
             anchorElement,
             getOptionSelected,
             onRequestClose,
+            onChange,
             dispatch,
             applyFilterForItems,
             selectedItemToString,
             items,
-            onChange,
             children,
             inputValue,
         ])));

package/Autocomplete/AutocompleteItem.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuItemProps } from '../Menu/MenuItem';
 export interface AutocompleteItemProps extends MenuItemProps {
     readonly variant?: 'standard' | 'virtual';
-    readonly startIcon?: JSX.Element;
+    readonly startIcon?: React.ReactNode;
 }
 export declare const AutocompleteItem: React.ForwardRefExoticComponent<AutocompleteItemProps & React.RefAttributes<HTMLDivElement>>;
 export default AutocompleteItem;

package/Autocomplete/AutocompleteTextField.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import { TextFieldProps } from '../TextField';
+import { AnchorPos } from '../Menu';
 export interface AutocompleteTextFieldProps extends TextFieldProps {
     /**
      * Text field loading state\
      * If `true` then text field has been contained the loading indicator, otherwise - nop
      */
     readonly isLoading?: boolean;
+    readonly anchorPos?: AnchorPos;
+    readonly isOpen?: boolean;
     /**
      * Native <input> element reference
      */

package/Autocomplete/AutocompleteTextField.js

@@ -1,9 +1,71 @@
 "use strict";
+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 styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
 const TextField_1 = __importDefault(require("../TextField"));
-const AutocompleteTextField = (props, ref) => react_1.default.createElement(TextField_1.default, Object.assign({}, props, { ref: ref }));
+const TextFieldInputWrapper_1 = __importDefault(require("../TextField/TextFieldInputWrapper"));
+const StyledTextFieldInputWrapper = (0, styled_1.default)(TextFieldInputWrapper_1.default) `
+  ${({ theme, $isOpen, $anchorPos }) => $isOpen &&
+    $anchorPos &&
+    ['bottom-fill', 'top-fill'].includes($anchorPos) &&
+    (0, react_2.css) `
+      border-width: 1px;
+      border-style: solid;
+      border-color: ${theme.isDark
+        ? theme.color.textPrimary.darken(100).toString()
+        : theme.color.textPrimary.lighten(150).toString()};
+    `};
+
+  ${({ focused, $anchorPos, $isOpen }) => $isOpen &&
+    $anchorPos &&
+    ['bottom-fill', 'top-fill'].includes($anchorPos) &&
+    focused &&
+    (0, react_2.css) `
+      outline: none;
+    `};
+
+  ${({ $anchorPos, $isOpen }) => $isOpen &&
+    $anchorPos === 'bottom-fill' &&
+    (0, react_2.css) `
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: 0;
+    `};
+
+  ${({ $anchorPos, $isOpen }) => $isOpen &&
+    $anchorPos === 'top-fill' &&
+    (0, react_2.css) `
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: 0;
+    `};
+`;
+const WrapperContext = react_1.default.createContext({ anchorPos: undefined, isOpen: false });
+const InputWrapper = react_1.default.forwardRef(function StyledInputWrapper(props, ref) {
+    const ctx = react_1.default.useContext(WrapperContext);
+    const { anchorPos, isOpen } = ctx;
+    return (react_1.default.createElement(StyledTextFieldInputWrapper, Object.assign({ "$anchorPos": anchorPos, "$isOpen": isOpen, ref: ref }, props)));
+});
+const AutocompleteTextField = (props, ref) => {
+    const { anchorPos, isOpen } = props, restProps = __rest(props, ["anchorPos", "isOpen"]);
+    return (react_1.default.createElement(WrapperContext.Provider, { value: { anchorPos, isOpen } },
+        react_1.default.createElement(TextField_1.default, Object.assign({ overrides: {
+                InputWrapper,
+            } }, restProps, { ref: ref }))));
+};
 exports.default = react_1.default.forwardRef(AutocompleteTextField);

package/Autocomplete/OverrideMenuList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MenuListProps } from '../Menu';
+declare const OverrideMenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
+export default OverrideMenuList;

package/Autocomplete/OverrideMenuList.js

@@ -0,0 +1,39 @@
+"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 styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Menu_1 = require("../Menu");
+const StyledMenuList = (0, styled_1.default)(Menu_1.MenuList) `
+  &:focus {
+    outline: none;
+  }
+
+  --border-color: ${({ theme }) => theme.isDark
+    ? theme.color.textPrimary.darken(100).toString()
+    : theme.color.textPrimary.lighten(150).toString()};
+
+  ${({ anchorPos, theme }) => anchorPos === 'top-fill' &&
+    (0, react_2.css) `
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 1px solid var(--border-color);
+      border-bottom: 0;
+      box-shadow: 0 1em -1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()};
+    `};
+
+  ${({ anchorPos, theme }) => anchorPos === 'bottom-fill' &&
+    (0, react_2.css) `
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border: 1px solid var(--border-color);
+      border-top: 0;
+      box-shadow: 0 1em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()};
+    `};
+`;
+const OverrideMenuList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(StyledMenuList, Object.assign({ "data-anch-po": props.anchorPos }, props, { ref: ref }))));
+OverrideMenuList.displayName = 'OverrideMenuList';
+exports.default = OverrideMenuList;

package/Autocomplete/context.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { AnchorElement } from '../Menu';
+import type { AnchorElement, Value } from '../Menu';
+import { FilterItems, ItemToString } from './AutocompleteContainer';
 type State = {
     readonly currentOpen: boolean;
     readonly currentLoading: boolean;
@@ -16,6 +17,13 @@ type ActionSetPartial = {
 export declare const actionSetPartial: (payload: ActionSetPartial['payload']) => ActionSetPartial;
 export declare const defaultState: State;
 export declare const reducer: React.Reducer<State, Action>;
+export declare const createInitialState: <T, Multiple extends boolean | undefined = undefined>(params: {
+    readonly items: readonly T[];
+    readonly value: Value<T, Multiple> | null;
+    readonly selectedItemToString: ItemToString<T, Multiple>;
+    readonly isOpen?: boolean | undefined;
+    readonly filterItems: FilterItems<T> | undefined;
+}) => State;
 interface ContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly initialState?: Partial<State>;

package/Autocomplete/context.js

@@ -3,7 +3,7 @@ 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;
+exports.useContext = exports.ContextProvider = exports.createInitialState = exports.reducer = exports.defaultState = exports.actionSetPartial = void 0;
 const react_1 = __importDefault(require("react"));
 const actionSetPartial = (payload) => ({
     type: 'setPartial',
@@ -27,6 +27,20 @@ const reducer = (state, action) => {
     }
 };
 exports.reducer = reducer;
+const createInitialState = (params) => {
+    const { filterItems, isOpen, items, selectedItemToString, value } = params;
+    const inputValue = !value
+        ? ''
+        : selectedItemToString(value);
+    const data = {
+        inputValue: inputValue,
+        query: inputValue.trim().toLocaleLowerCase(),
+    };
+    const filteredItems = filterItems ? filterItems(items, data) : items;
+    return Object.assign(Object.assign({}, exports.defaultState), { filteredItems,
+        inputValue, currentValue: value, currentOpen: Boolean(isOpen) });
+};
+exports.createInitialState = createInitialState;
 const context = react_1.default.createContext({
     state: exports.defaultState,
     dispatch: () => undefined,

package/Autocomplete/index.js

@@ -34,16 +34,15 @@ const context_1 = require("./context");
 __exportStar(require("./AutocompleteContainer"), exports);
 __exportStar(require("./AutocompleteItem"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { children, items, isOpen, multiple, selectedItemToString, value } = props, restProps = __rest(props, ["children", "items", "isOpen", "multiple", "selectedItemToString", "value"]);
-    return (react_1.default.createElement(context_1.ContextProvider, { initialState: {
-            filteredItems: items,
-            currentOpen: isOpen,
-            currentValue: value,
-            inputValue: value === null
-                ? ''
-                : selectedItemToString(value),
-        } },
-        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));
+    const { children, items, filterItems, isOpen, multiple, selectedItemToString, value } = props, restProps = __rest(props, ["children", "items", "filterItems", "isOpen", "multiple", "selectedItemToString", "value"]);
+    return (react_1.default.createElement(context_1.ContextProvider, { initialState: (0, context_1.createInitialState)({
+            items,
+            selectedItemToString,
+            filterItems,
+            value,
+            isOpen,
+        }) },
+        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, filterItems: filterItems, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));
 });
 Autocomplete.displayName = 'Autocomplete';
 exports.default = Autocomplete;

package/Autocomplete2/Autocomplete2.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+type Item = {
+    readonly id: string;
+    readonly label: string;
+};
+type Autocomplete2Props = {
+    readonly value: Item | null;
+    readonly items: readonly Item[];
+    readonly onChange: (value: Item | null) => void;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Autocomplete2Props & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/Autocomplete2/Autocomplete2.js

@@ -0,0 +1,83 @@
+"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 = __importStar(require("react"));
+const Autocomplete2TextField_1 = __importDefault(require("./Autocomplete2TextField"));
+const Autocomplete2 = React.forwardRef((props, ref) => {
+    const { value, items, onChange } = props;
+    /**
+     * Get item ID
+     */
+    const getItemID = React.useCallback((item) => (item ? item.id : '<no-value-id>'), []);
+    const [valueID, setValueID] = React.useState(() => getItemID(value));
+    /**
+     * Filter items list by input value
+     */
+    const filterItems = React.useCallback((items, data) => {
+        const { query } = data;
+        return items.filter(item => item.label.toLocaleLowerCase().indexOf(query) !== -1);
+    }, []);
+    /**
+     * Input value
+     */
+    const [inputValue, setInputValue] = React.useState(() => {
+        if (!value) {
+            return '';
+        }
+        return value.label;
+    });
+    /**
+     * Filtered items
+     */
+    const [filteredItems, setFilteredItems] = React.useState(() => filterItems(items, { query: inputValue }));
+    /**
+     * Render filtered items list
+     */
+    const renderItems = React.useCallback(() => (React.createElement("ol", null, filteredItems.map(item => (React.createElement("li", { key: item.id, onClick: () => onChange(item) }, item.label))))), [filteredItems, onChange]);
+    /**
+     * onChange text field input
+     */
+    const handleInputChange = React.useCallback((input) => {
+        setInputValue(input);
+        setFilteredItems(filterItems(items, { query: input }));
+    }, [filterItems, items]);
+    /**
+     * value listener
+     */
+    React.useEffect(() => {
+        const newValueID = getItemID(value);
+        if (newValueID !== valueID) {
+            setValueID(newValueID);
+        }
+    }, [getItemID, inputValue, value, valueID]);
+    return (React.createElement("div", null,
+        React.createElement(Autocomplete2TextField_1.default, { ref: ref, value: inputValue, onChange: handleInputChange }),
+        renderItems()));
+});
+Autocomplete2.displayName = 'Autocomplete2';
+exports.default = React.memo(Autocomplete2);

package/Autocomplete2/Autocomplete2TextField.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type Autocomplete2TextFieldProps = {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+};
+declare const Autocomplete2TextField: React.ForwardRefExoticComponent<Autocomplete2TextFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default Autocomplete2TextField;

package/Autocomplete2/Autocomplete2TextField.js

@@ -0,0 +1,39 @@
+"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 = __importStar(require("react"));
+const TextField_1 = __importDefault(require("../TextField"));
+const Autocomplete2TextField = React.forwardRef((props, ref) => {
+    const { value, onChange } = props;
+    const handleChange = React.useCallback(event => {
+        onChange(event.target.value);
+    }, [onChange]);
+    return React.createElement(TextField_1.default, { value: value, onChange: handleChange, ref: ref });
+});
+Autocomplete2TextField.displayName = 'Autocomplete2TextField';
+exports.default = Autocomplete2TextField;

package/Autocomplete2/index.d.ts

@@ -0,0 +1,2 @@
+import Autocomplete2 from "./Autocomplete2";
+export default Autocomplete2;

package/Autocomplete2/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Autocomplete2_1 = __importDefault(require("./Autocomplete2"));
+exports.default = Autocomplete2_1.default;