@skbkontur/react-ui 0.0.0-031e4bb3f9 → 0.0.0-0fe669bb2d

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2017 SKB Kontur
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2017 SKB Kontur
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,61 +1,129 @@
-# React UI
-
-[![Build Status](https://tc.skbkontur.ru/app/rest/builds/buildType:FrontendInfrastructure_Packages_RunAll/statusIcon)](https://tc.skbkontur.ru/project.html?projectId=FrontendInfrastructure_Packages_ReactUI&tab=projectOverview)
-
-- [Как использовать](#как-использовать)
-- [FAQ](#faq)
-
-### Как использовать
-
-```bash
-yarn add @skbkontur/react-ui
-```
-
-```jsx harmony static
-import { Button, Toast } from '@skbkontur/react-ui';
-
-const MyApp = () => (
-  <div>
-    Click this button <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
-  </div>
-);
-```
-
-### Хотим другой цвет кнопки!
-
-Нужно использовать [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext). Список переменных можно глянуть в [ThemeShowcase](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeShowcase)
-
-### Глобальные css-стили приложения портят внешний вид контролов
-
-Если библиотека используется в проекте с легаси, где стилизация сделана прямо по названиям тегов, то внешний вид контролов из библиотеки может сильно испортиться
-
-Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
-
-Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `specificityLevel`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
-
-Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом `react-ui`
-
-Пример настройки специфичности:
-
-```js static
-import { Upgrade } from '@skbkontur/react-ui/lib/Upgrades';
-
-Upgrade.setSpecificityLevel(1);
-```
-
-Специфичность должна устанавливаться в коде раньше импорта любых компонентов из библиотеки.
-
-## FAQ
-
-### Есть ли способ отключить анимации во время тестирования?
-
-Анимации в компонентах отключаются переменной окружения `process.env.NODE_ENV === 'test'`.
-
-### Прокидывание className и style компонентам
-
-Начиная с версии 2.14.0, стало возможным передавать в компоненты свои css-классы для дополнительной стилизации. Однако, не стоит пользоваться этой возможностью для вмешательства во внутренние стили компонентов. Верстка компонентов может быть изменена в любой момент без предупреждения, что приведет к поломке ваших переопределенных стилей.
-
-### Помощь в развитии
-
-Мы рады любой сторонней помощи. Не стесняйтесь писать в [issues](https://github.com/skbkontur/retail-ui/issues)
-баги и идеи для развития библиотеки.<br />
+# React UI
+
+[![Build Status](https://tc.skbkontur.ru/app/rest/builds/buildType:FrontendInfrastructure_Packages_RunAll/statusIcon)](https://tc.skbkontur.ru/project.html?projectId=FrontendInfrastructure_Packages_ReactUI&tab=projectOverview)
+
+- [Как использовать](#как-использовать)
+- [FAQ](#faq)
+
+### Как использовать
+
+```bash
+yarn add @skbkontur/react-ui
+```
+
+```jsx harmony static
+import { Button, Toast } from '@skbkontur/react-ui';
+
+const MyApp = () => (
+  <div>
+    Click this button <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
+  </div>
+);
+```
+
+### Хотим другой цвет кнопки!
+
+Нужно использовать [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext). Список переменных можно глянуть в [ThemeShowcase](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeShowcase)
+
+### Глобальные css-стили приложения портят внешний вид контролов
+
+Если библиотека используется в проекте с легаси, где стилизация сделана прямо по названиям тегов, то внешний вид контролов из библиотеки может сильно испортиться
+
+Если нет возможности разобрать легаси, то можно увеличить специфичность селекторов в библиотеке, тогда стили контролов будут приоритетнее стилей из легаси проекта
+
+Специфичность достигается за счет n-кратного повторения css-класса `react-ui` в селекторе стилей. Количество повторений задается через переменную `specificityLevel`, значение по умолчанию равно нулю, то есть по умолчанию css-класс `react-ui` никак ни на что не будет влиять
+
+Чтобы специфичность заработала в легаси проекте, react-блок, в котором используются компоненты из библиотеки, должен быть обернут в тег с css-классом `react-ui`
+
+Пример настройки специфичности:
+
+```js static
+import { Upgrade } from '@skbkontur/react-ui/lib/Upgrades';
+
+Upgrade.setSpecificityLevel(1);
+```
+
+Специфичность должна устанавливаться в коде раньше импорта любых компонентов из библиотеки.
+
+### StrictMode
+
+Начиная с версий `@skbkontur/react-ui@3.10.0` и `@skbkontur/react-ui-validations@1.7.0`, библиотека поддерживает работу в React.StrictMode.
+
+Некоторым компонентам библиотеки необходимо иметь доступ до корневой DOM-ноды своих
+children. Ранее для этого использовался метод findDomNode, который в StrictMode запрещён.
+Теперь получение DOM-ноды реализовано в библиотеке через ref, из-за чего появились некоторые
+требования к компонентам, передаваемым в Hint, Tooltip, Popup или Tab:
+
+- при передаче функциональных компонентов, они должны использовать `React.ForwardRef`;
+
+```js static
+import { Hint } from '@skbkontur/react-ui';
+
+const CustomFunctionComponent = React.forwardRef(
+  (props, ref) => <div ref={ref}>children text</div>
+);
+
+export const withFunctionChildren = () => (
+  <React.StrictMode>
+    <Hint pos="top" text="Something will never be changed" manual opened>
+      <CustomFunctionComponent />
+    </Hint>
+  </React.StrictMode>
+);
+```
+
+- при передаче классовых компонентов, их инстанс должен реализовывать метод `getRootNode`, возвращающий DOM-ноду.
+
+```js static
+import { Hint } from '@skbkontur/react-ui';
+
+class CustomClassComponent extends React.Component {
+  rootNode = React.createRef();
+
+  render() {
+    return <div ref={this.rootNode}>children text</div>;
+  }
+
+  getRootNode() {
+    return this.rootNode.current;
+  }
+}
+
+export const withClassChildren = () => (
+  <React.StrictMode>
+    <Hint pos="top" text="Something will never be changed" manual opened>
+      <CustomClassComponent />
+    </Hint>
+  </React.StrictMode>
+);
+```
+
+В случае несоблюдения требования, будет использоваться старый метод findDomNode, который не совместим с StrictMode.
+
+Подробнее в [пулл-реквесте](https://github.com/skbkontur/retail-ui/pull/2518)
+
+## FAQ
+
+### Отключение анимаций во время тестирования
+
+Анимации в компонентах отключаются любой из следующих переменных окружения:
+
+```static
+process.env.NODE_ENV === 'test'
+process.env.REACT_UI_TEST
+process.env.REACT_APP_REACT_UI_TEST
+process.env.STORYBOOK_REACT_UI_TEST
+```
+
+### Прокидывание className и style компонентам
+
+Начиная с версии 2.14.0, стало возможным передавать в компоненты свои css-классы для дополнительной стилизации. Однако, не стоит пользоваться этой возможностью для вмешательства во внутренние стили компонентов. Верстка компонентов может быть изменена в любой момент без предупреждения, что приведет к поломке ваших переопределенных стилей.
+
+### Мобильная верстка
+
+С версии 4.0 многие компоненты умеют адаптироваться под мобильные устройства. Подробнее об управлении этим поведением в [MOBILES.md](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MOBILES.md).
+
+### Помощь в развитии
+
+Мы рады любой сторонней помощи. Не стесняйтесь писать в [issues](https://github.com/skbkontur/retail-ui/issues)
+баги и идеи для развития библиотеки.<br />

package/cjs/components/Autocomplete/Autocomplete.d.ts

@@ -2,40 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../Input';
 import { Nullable, Override } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-declare function renderItem(item: any): any;
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 export interface AutocompleteProps extends CommonProps, Override<InputProps, {
     /** Функция отрисовки элемента меню */
-    renderItem: (item: string) => React.ReactNode;
+    renderItem?: (item: string) => React.ReactNode;
     /** Промис, резолвящий элементы меню */
     source?: string[] | ((patter: string) => Promise<string[]>);
     /** Отключает использование портала */
-    disablePortal: boolean;
+    disablePortal?: boolean;
     /** Отрисовка тени у выпадающего меню */
-    hasShadow: boolean;
+    hasShadow?: boolean;
     /** Выравнивание выпадающего меню */
-    menuAlign: 'left' | 'right';
+    menuAlign?: 'left' | 'right';
     /** Максимальная высота меню */
-    menuMaxHeight: number | string;
+    menuMaxHeight?: number | string;
     /** Ширина меню */
     menuWidth?: number | string;
     /** Отключить скролл окна, когда меню открыто */
-    preventWindowScroll: boolean;
+    preventWindowScroll?: boolean;
     /** Вызывается при изменении `value` */
     onValueChange: (value: string) => void;
     /** onBlur */
     onBlur?: () => void;
     /** Размер инпута */
-    size: InputProps['size'];
+    size?: InputProps['size'];
     /** value */
     value: string;
+    /**
+     * Текст заголовка выпадающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
 }> {
 }
 export interface AutocompleteState {
     items: Nullable<string[]>;
     selected: number;
     focused: boolean;
+    isMobileOpened: boolean;
 }
+export declare const AutocompleteDataTids: {
+    readonly root: "Autocomplete__root";
+};
+declare type DefaultProps = Required<Pick<AutocompleteProps, 'renderItem' | 'size' | 'disablePortal' | 'hasShadow' | 'menuMaxHeight' | 'menuAlign' | 'preventWindowScroll'>>;
 /**
  * Стандартный инпут с подсказками.
  *
@@ -64,23 +72,18 @@ export declare class Autocomplete extends React.Component<AutocompleteProps, Aut
          */
         source: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
     };
-    static defaultProps: {
-        renderItem: typeof renderItem;
-        size: string;
-        disablePortal: boolean;
-        hasShadow: boolean;
-        menuMaxHeight: number;
-        menuAlign: string;
-        preventWindowScroll: boolean;
-    };
+    static defaultProps: DefaultProps;
     state: AutocompleteState;
     private theme;
+    private isMobileLayout;
     private opened;
     private input;
     private menu;
     private rootSpan;
+    private mobilePopup;
     private requestId;
     private getProps;
+    private setRootNode;
     /**
      * @public
      */
@@ -91,10 +94,13 @@ export declare class Autocomplete extends React.Component<AutocompleteProps, Aut
     blur(): void;
     componentDidUpdate(prevProps: AutocompleteProps): void;
     render(): JSX.Element;
-    renderMain: (props: Pick<Pick<AutocompleteProps, "type" | "placeholder" | "dir" | "form" | "slot" | "source" | "title" | "mask" | "pattern" | "maskChar" | "formatChars" | "alwaysShowMask" | "onUnexpectedInput" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "leftIcon" | "rightIcon" | "error" | "warning" | "borderless" | "align" | "suffix" | "selectAllOnFocus" | "disablePortal" | "preventWindowScroll" | "hasShadow" | "renderItem" | "menuAlign" | "menuMaxHeight" | "menuWidth">, "type" | "placeholder" | "dir" | "form" | "slot" | "source" | "title" | "mask" | "pattern" | "maskChar" | "formatChars" | "alwaysShowMask" | "onUnexpectedInput" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "leftIcon" | "rightIcon" | "error" | "warning" | "borderless" | "align" | "suffix" | "selectAllOnFocus" | "disablePortal" | "preventWindowScroll" | "hasShadow" | "renderItem" | "menuAlign" | "menuMaxHeight" | "menuWidth">) => JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<AutocompleteProps>) => JSX.Element;
     private renderMenu;
-    private getInputWidth;
+    private renderMobileMenu;
+    private getItems;
     private handleValueChange;
+    private handleCloseMobile;
+    private handleKeyPressMobile;
     private handleFocus;
     private handleBlur;
     private handleClickOutside;
@@ -108,5 +114,6 @@ export declare class Autocomplete extends React.Component<AutocompleteProps, Aut
     private refInput;
     private refMenu;
     private refRootSpan;
+    private refMobilePopup;
 }
 export {};