@skbkontur/react-ui 3.8.3 → 3.8.4-adaptive.1

package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts

@@ -1,31 +1,32 @@
-import React, { Component } from 'react';
-import { Menu } from '../Menu';
-import { MenuItemState } from '../../components/MenuItem';
-import { Nullable } from '../../typings/utility-types';
-import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
-export interface ComboBoxMenuProps<T> {
-    opened?: boolean;
-    items?: Nullable<T[]>;
-    totalCount?: number;
-    loading?: boolean;
-    maxMenuHeight?: number | string;
-    refMenu?: (menu: Nullable<Menu>) => void;
-    renderNotFound?: () => React.ReactNode;
-    renderTotalCount?: (found: number, total: number) => React.ReactNode;
-    renderItem: (item: T, state: MenuItemState) => React.ReactNode;
-    onValueChange: (value: T) => any;
-    renderAddButton?: () => React.ReactNode;
-    caption?: React.ReactNode;
-    repeatRequest?: () => void;
-    requestStatus?: ComboBoxRequestStatus;
-}
-export declare class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        repeatRequest: () => undefined;
-        requestStatus: ComboBoxRequestStatus;
-    };
-    private readonly locale;
-    render(): JSX.Element | null;
-    private renderItem;
-}
+import React, { Component } from 'react';
+import { Menu } from '../Menu';
+import { MenuItemState } from '../../components/MenuItem';
+import { Nullable } from '../../typings/utility-types';
+import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
+export interface ComboBoxMenuProps<T> {
+    opened?: boolean;
+    items?: Nullable<T[]>;
+    totalCount?: number;
+    loading?: boolean;
+    maxMenuHeight?: number | string;
+    refMenu?: (menu: Nullable<Menu>) => void;
+    renderNotFound?: () => React.ReactNode;
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    renderItem: (item: T, state: MenuItemState) => React.ReactNode;
+    onValueChange: (value: T) => any;
+    renderAddButton?: () => React.ReactNode;
+    caption?: React.ReactNode;
+    repeatRequest?: () => void;
+    requestStatus?: ComboBoxRequestStatus;
+    isMobile?: boolean;
+}
+export declare class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        repeatRequest: () => undefined;
+        requestStatus: ComboBoxRequestStatus;
+    };
+    private readonly locale;
+    render(): JSX.Element | null;
+    private renderItem;
+}

package/cjs/internal/CustomComboBox/ComboBoxMenu.js

@@ -29,6 +29,7 @@ var _locale = require("./locale");var _dec, _class, _class2, _temp;var
 
 
 
+
 ComboBoxMenu = (_dec = (0, _decorators.locale)('ComboBox', _locale.CustomComboBoxLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {(0, _inheritsLoose2.default)(ComboBoxMenu, _Component);function ComboBoxMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _Component.call.apply(_Component, [this].concat(args)) || this;_this.
 
 
@@ -112,6 +113,14 @@ ComboBoxMenu = (_dec = (0, _decorators.locale)('ComboBox', _locale.CustomComboBo
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -139,8 +148,13 @@ ComboBoxMenu = (_dec = (0, _decorators.locale)('ComboBox', _locale.CustomComboBo
       }
 
       return /*#__PURE__*/(
-        _react.default.createElement(_MenuItem.MenuItem, { "data-tid": "ComboBoxMenu__item", onClick: function onClick() {return onValueChange(item);}, key: index },
+        _react.default.createElement(_MenuItem.MenuItem, {
+          "data-tid": "ComboBoxMenu__item",
+          onClick: function onClick() {return onValueChange(item);},
+          key: index,
+          isMobile: _this.props.isMobile },
+
         function (state) {return renderItem(item, state);}));
 
 
-    };return _this;}var _proto = ComboBoxMenu.prototype;_proto.render = function render() {var _this$props2 = this.props,opened = _this$props2.opened,items = _this$props2.items,totalCount = _this$props2.totalCount,loading = _this$props2.loading,refMenu = _this$props2.refMenu,_this$props2$renderNo = _this$props2.renderNotFound,renderNotFound = _this$props2$renderNo === void 0 ? function () {return notFound;} : _this$props2$renderNo,renderTotalCount = _this$props2.renderTotalCount,maxMenuHeight = _this$props2.maxMenuHeight,requestStatus = _this$props2.requestStatus;var _this$locale = this.locale,notFound = _this$locale.notFound,errorNetworkButton = _this$locale.errorNetworkButton,errorNetworkMessage = _this$locale.errorNetworkMessage;if (!opened) {return null;}var renderAddButton = null;if (this.props.renderAddButton) {renderAddButton = this.props.renderAddButton();}if (loading && (!items || !items.length)) {return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: refMenu }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true }, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: "mini", dimmed: true })));}if (items === null && requestStatus === _CustomComboBoxTypes.ComboBoxRequestStatus.Failed) {return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: refMenu, maxHeight: maxMenuHeight }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true, key: "message" }, /*#__PURE__*/_react.default.createElement("div", { style: { maxWidth: 300, whiteSpace: 'normal' } }, errorNetworkMessage)), /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { link: true, onClick: this.props.repeatRequest, key: "retry" }, errorNetworkButton));}if ((items == null || items.length === 0) && renderNotFound) {var notFoundValue = renderNotFound();if (renderAddButton) return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: refMenu }, renderAddButton);if (notFoundValue) return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: refMenu }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { "data-tid": "ComboBoxMenu__notFound", disabled: true }, notFoundValue));return null;}var total = null;var renderedItems = items && items.map(this.renderItem);var countItems = renderedItems == null ? void 0 : renderedItems.filter(function (item) {return (0, _utils.isReactUINode)('MenuItem', item);}).length;if (countItems && renderTotalCount && totalCount && countItems < totalCount) {total = /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true, key: "total" }, /*#__PURE__*/_react.default.createElement("div", { style: { fontSize: 12 } }, renderTotalCount(countItems, totalCount)));}return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { "data-tid": "ComboBoxMenu__items", ref: refMenu, maxHeight: maxMenuHeight }, renderedItems, total, renderAddButton && [/*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, { key: "separator" }), renderAddButton]);};return ComboBoxMenu;}(_react.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxMenu', _class2.defaultProps = { repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown }, _temp)) || _class);exports.ComboBoxMenu = ComboBoxMenu;
+    };return _this;}var _proto = ComboBoxMenu.prototype;_proto.render = function render() {var _this$props2 = this.props,opened = _this$props2.opened,items = _this$props2.items,totalCount = _this$props2.totalCount,loading = _this$props2.loading,refMenu = _this$props2.refMenu,_this$props2$renderNo = _this$props2.renderNotFound,renderNotFound = _this$props2$renderNo === void 0 ? function () {return notFound;} : _this$props2$renderNo,renderTotalCount = _this$props2.renderTotalCount,maxMenuHeight = _this$props2.maxMenuHeight,requestStatus = _this$props2.requestStatus,isMobile = _this$props2.isMobile;var _this$locale = this.locale,notFound = _this$locale.notFound,errorNetworkButton = _this$locale.errorNetworkButton,errorNetworkMessage = _this$locale.errorNetworkMessage;if (!opened) {return null;}var renderAddButton = null;if (this.props.renderAddButton) {renderAddButton = this.props.renderAddButton();}var maxHeight = isMobile ? 'auto' : maxMenuHeight;if (loading && (!items || !items.length)) {return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { maxHeight: maxHeight, ref: refMenu, disableScrollContainer: isMobile }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true, isMobile: isMobile }, /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: "mini", dimmed: true })));}if (items === null && requestStatus === _CustomComboBoxTypes.ComboBoxRequestStatus.Failed) {return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: refMenu, maxHeight: maxHeight, disableScrollContainer: isMobile }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true, key: "message", isMobile: isMobile }, /*#__PURE__*/_react.default.createElement("div", { style: { maxWidth: 300, whiteSpace: 'normal' } }, errorNetworkMessage)), /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { link: true, onClick: this.props.repeatRequest, key: "retry", isMobile: isMobile }, errorNetworkButton));}if ((items == null || items.length === 0) && renderNotFound) {var notFoundValue = renderNotFound();if (renderAddButton) return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { maxHeight: maxHeight, ref: refMenu, disableScrollContainer: isMobile }, renderAddButton);if (notFoundValue) return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { maxHeight: maxHeight, ref: refMenu, disableScrollContainer: isMobile }, /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { "data-tid": "ComboBoxMenu__notFound", disabled: true, isMobile: isMobile }, notFoundValue));return null;}var total = null;var renderedItems = items && items.map(this.renderItem);var countItems = renderedItems == null ? void 0 : renderedItems.filter(function (item) {return (0, _utils.isReactUINode)('MenuItem', item);}).length;if (countItems && renderTotalCount && totalCount && countItems < totalCount) {total = /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { disabled: true, key: "total", isMobile: isMobile }, /*#__PURE__*/_react.default.createElement("div", { style: { fontSize: 12 } }, renderTotalCount(countItems, totalCount)));}return /*#__PURE__*/_react.default.createElement(_Menu.Menu, { "data-tid": "ComboBoxMenu__items", ref: refMenu, maxHeight: maxHeight, disableScrollContainer: isMobile }, renderedItems, total, renderAddButton && [/*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, { key: "separator" }), renderAddButton]);};return ComboBoxMenu;}(_react.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxMenu', _class2.defaultProps = { repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown }, _temp)) || _class);exports.ComboBoxMenu = ComboBoxMenu;

package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboBoxMenu.tsx"],"names":["ComboBoxMenu","CustomComboBoxLocaleHelper","locale","renderItem","item","index","props","onValueChange","React","isValidElement","element","Object","assign","key","onClick","cloneElement","state","render","opened","items","totalCount","loading","refMenu","renderNotFound","notFound","renderTotalCount","maxMenuHeight","requestStatus","errorNetworkButton","errorNetworkMessage","renderAddButton","length","ComboBoxRequestStatus","Failed","maxWidth","whiteSpace","repeatRequest","notFoundValue","total","renderedItems","map","countItems","filter","fontSize","Component","__KONTUR_REACT_UI__","defaultProps","undefined","Unknown"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { isReactUINode } from '../../lib/utils';\nimport { Menu } from '../Menu';\nimport { MenuItem, MenuItemState } from '../../components/MenuItem';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuSeparator } from '../../components/MenuSeparator';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { ComboBoxLocale, CustomComboBoxLocaleHelper } from './locale';\n\nexport interface ComboBoxMenuProps<T> {\n  opened?: boolean;\n  items?: Nullable<T[]>;\n  totalCount?: number;\n  loading?: boolean;\n  maxMenuHeight?: number | string;\n  refMenu?: (menu: Nullable<Menu>) => void;\n  renderNotFound?: () => React.ReactNode;\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n  renderItem: (item: T, state: MenuItemState) => React.ReactNode;\n  onValueChange: (value: T) => any;\n  renderAddButton?: () => React.ReactNode;\n  caption?: React.ReactNode;\n  repeatRequest?: () => void;\n  requestStatus?: ComboBoxRequestStatus;\n}\n\n@locale('ComboBox', CustomComboBoxLocaleHelper)\nexport class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBoxMenu';\n\n  public static defaultProps = {\n    repeatRequest: () => undefined,\n    requestStatus: ComboBoxRequestStatus.Unknown,\n  };\n\n  private readonly locale!: ComboBoxLocale;\n\n  public render() {\n    const {\n      opened,\n      items,\n      totalCount,\n      loading,\n      refMenu,\n      renderNotFound = () => notFound,\n      renderTotalCount,\n      maxMenuHeight,\n      requestStatus,\n    } = this.props;\n\n    const { notFound, errorNetworkButton, errorNetworkMessage } = this.locale;\n\n    if (!opened) {\n      return null;\n    }\n\n    let renderAddButton = null;\n    if (this.props.renderAddButton) {\n      renderAddButton = this.props.renderAddButton();\n    }\n\n    if (loading && (!items || !items.length)) {\n      return (\n        <Menu ref={refMenu}>\n          <MenuItem disabled>\n            <Spinner type=\"mini\" dimmed />\n          </MenuItem>\n        </Menu>\n      );\n    }\n\n    if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {\n      return (\n        <Menu ref={refMenu} maxHeight={maxMenuHeight}>\n          <MenuItem disabled key=\"message\">\n            <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>\n          </MenuItem>\n          <MenuItem link onClick={this.props.repeatRequest} key=\"retry\">\n            {errorNetworkButton}\n          </MenuItem>\n        </Menu>\n      );\n    }\n\n    if ((items == null || items.length === 0) && renderNotFound) {\n      const notFoundValue = renderNotFound();\n      if (renderAddButton) return <Menu ref={refMenu}>{renderAddButton}</Menu>;\n      if (notFoundValue)\n        return (\n          <Menu ref={refMenu}>\n            <MenuItem data-tid=\"ComboBoxMenu__notFound\" disabled>\n              {notFoundValue}\n            </MenuItem>\n          </Menu>\n        );\n      return null;\n    }\n\n    let total = null;\n    const renderedItems = items && items.map(this.renderItem);\n    const countItems = renderedItems?.filter((item) => isReactUINode('MenuItem', item)).length;\n\n    if (countItems && renderTotalCount && totalCount && countItems < totalCount) {\n      total = (\n        <MenuItem disabled key=\"total\">\n          <div style={{ fontSize: 12 }}>{renderTotalCount(countItems, totalCount)}</div>\n        </MenuItem>\n      );\n    }\n\n    return (\n      <Menu data-tid=\"ComboBoxMenu__items\" ref={refMenu} maxHeight={maxMenuHeight}>\n        {renderedItems}\n        {total}\n        {renderAddButton && [<MenuSeparator key=\"separator\" />, renderAddButton]}\n      </Menu>\n    );\n  }\n\n  private renderItem = (item: T, index: number): React.ReactNode => {\n    // NOTE this is undesireable feature, better\n    // to remove it from further versions\n    const { renderItem, onValueChange } = this.props;\n    if (typeof item === 'function' || React.isValidElement(item)) {\n      // @ts-ignore\n      const element = typeof item === 'function' ? item() : item;\n      const props = Object.assign(\n        {\n          key: index,\n          onClick: () => onValueChange(element.props),\n        },\n        element.props,\n      );\n      return React.cloneElement(element, props);\n    }\n\n    return (\n      <MenuItem data-tid=\"ComboBoxMenu__item\" onClick={() => onValueChange(item)} key={index}>\n        {(state) => renderItem(item, state)}\n      </MenuItem>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["ComboBoxMenu.tsx"],"names":["ComboBoxMenu","CustomComboBoxLocaleHelper","locale","renderItem","item","index","props","onValueChange","React","isValidElement","element","Object","assign","key","onClick","cloneElement","isMobile","state","render","opened","items","totalCount","loading","refMenu","renderNotFound","notFound","renderTotalCount","maxMenuHeight","requestStatus","errorNetworkButton","errorNetworkMessage","renderAddButton","maxHeight","length","ComboBoxRequestStatus","Failed","maxWidth","whiteSpace","repeatRequest","notFoundValue","total","renderedItems","map","countItems","filter","fontSize","Component","__KONTUR_REACT_UI__","defaultProps","undefined","Unknown"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { isReactUINode } from '../../lib/utils';\nimport { Menu } from '../Menu';\nimport { MenuItem, MenuItemState } from '../../components/MenuItem';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuSeparator } from '../../components/MenuSeparator';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { ComboBoxLocale, CustomComboBoxLocaleHelper } from './locale';\n\nexport interface ComboBoxMenuProps<T> {\n  opened?: boolean;\n  items?: Nullable<T[]>;\n  totalCount?: number;\n  loading?: boolean;\n  maxMenuHeight?: number | string;\n  refMenu?: (menu: Nullable<Menu>) => void;\n  renderNotFound?: () => React.ReactNode;\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n  renderItem: (item: T, state: MenuItemState) => React.ReactNode;\n  onValueChange: (value: T) => any;\n  renderAddButton?: () => React.ReactNode;\n  caption?: React.ReactNode;\n  repeatRequest?: () => void;\n  requestStatus?: ComboBoxRequestStatus;\n  isMobile?: boolean;\n}\n\n@locale('ComboBox', CustomComboBoxLocaleHelper)\nexport class ComboBoxMenu<T> extends Component<ComboBoxMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBoxMenu';\n\n  public static defaultProps = {\n    repeatRequest: () => undefined,\n    requestStatus: ComboBoxRequestStatus.Unknown,\n  };\n\n  private readonly locale!: ComboBoxLocale;\n\n  public render() {\n    const {\n      opened,\n      items,\n      totalCount,\n      loading,\n      refMenu,\n      renderNotFound = () => notFound,\n      renderTotalCount,\n      maxMenuHeight,\n      requestStatus,\n      isMobile,\n    } = this.props;\n\n    const { notFound, errorNetworkButton, errorNetworkMessage } = this.locale;\n\n    if (!opened) {\n      return null;\n    }\n\n    let renderAddButton = null;\n    if (this.props.renderAddButton) {\n      renderAddButton = this.props.renderAddButton();\n    }\n\n    const maxHeight = isMobile ? 'auto' : maxMenuHeight;\n\n    if (loading && (!items || !items.length)) {\n      return (\n        <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>\n          <MenuItem disabled isMobile={isMobile}>\n            <Spinner type=\"mini\" dimmed />\n          </MenuItem>\n        </Menu>\n      );\n    }\n\n    if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {\n      return (\n        <Menu ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>\n          <MenuItem disabled key=\"message\" isMobile={isMobile}>\n            <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>\n          </MenuItem>\n          <MenuItem link onClick={this.props.repeatRequest} key=\"retry\" isMobile={isMobile}>\n            {errorNetworkButton}\n          </MenuItem>\n        </Menu>\n      );\n    }\n\n    if ((items == null || items.length === 0) && renderNotFound) {\n      const notFoundValue = renderNotFound();\n      if (renderAddButton)\n        return (\n          <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>\n            {renderAddButton}\n          </Menu>\n        );\n      if (notFoundValue)\n        return (\n          <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>\n            <MenuItem data-tid=\"ComboBoxMenu__notFound\" disabled isMobile={isMobile}>\n              {notFoundValue}\n            </MenuItem>\n          </Menu>\n        );\n      return null;\n    }\n\n    let total = null;\n    const renderedItems = items && items.map(this.renderItem);\n    const countItems = renderedItems?.filter((item) => isReactUINode('MenuItem', item)).length;\n\n    if (countItems && renderTotalCount && totalCount && countItems < totalCount) {\n      total = (\n        <MenuItem disabled key=\"total\" isMobile={isMobile}>\n          <div style={{ fontSize: 12 }}>{renderTotalCount(countItems, totalCount)}</div>\n        </MenuItem>\n      );\n    }\n\n    return (\n      <Menu data-tid=\"ComboBoxMenu__items\" ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>\n        {renderedItems}\n        {total}\n        {renderAddButton && [<MenuSeparator key=\"separator\" />, renderAddButton]}\n      </Menu>\n    );\n  }\n\n  private renderItem = (item: T, index: number): React.ReactNode => {\n    // NOTE this is undesireable feature, better\n    // to remove it from further versions\n    const { renderItem, onValueChange } = this.props;\n    if (typeof item === 'function' || React.isValidElement(item)) {\n      // @ts-ignore\n      const element = typeof item === 'function' ? item() : item;\n      const props = Object.assign(\n        {\n          key: index,\n          onClick: () => onValueChange(element.props),\n        },\n        element.props,\n      );\n      return React.cloneElement(element, props);\n    }\n\n    return (\n      <MenuItem\n        data-tid=\"ComboBoxMenu__item\"\n        onClick={() => onValueChange(item)}\n        key={index}\n        isMobile={this.props.isMobile}\n      >\n        {(state) => renderItem(item, state)}\n      </MenuItem>\n    );\n  };\n}\n"]}

package/cjs/internal/CustomComboBox/ComboBoxView.d.ts

@@ -1,81 +1,94 @@
-import React from 'react';
-import { Input, InputIconType } from '../../components/Input';
-import { InputLikeText } from '../InputLikeText';
-import { Menu } from '../Menu';
-import { MenuItemState } from '../../components/MenuItem';
-import { Nullable } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
-interface ComboBoxViewProps<T> extends CommonProps {
-    align?: 'left' | 'center' | 'right';
-    autoFocus?: boolean;
-    borderless?: boolean;
-    disablePortal?: boolean;
-    disabled?: boolean;
-    editing?: boolean;
-    error?: boolean;
-    items?: Nullable<T[]>;
-    loading?: boolean;
-    menuAlign?: 'left' | 'right';
-    opened?: boolean;
-    drawArrow?: boolean;
-    placeholder?: string;
-    size?: 'small' | 'medium' | 'large';
-    textValue?: string;
-    totalCount?: number;
-    value?: Nullable<T>;
-    warning?: boolean;
-    width?: string | number;
-    maxLength?: number;
-    maxMenuHeight?: number | string;
-    leftIcon?: InputIconType;
-    rightIcon?: InputIconType;
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-    onValueChange?: (value: T) => void;
-    onClickOutside?: (e: Event) => void;
-    onFocus?: () => void;
-    onFocusOutside?: () => void;
-    onInputBlur?: () => void;
-    onInputValueChange?: (value: string) => void;
-    onInputFocus?: () => void;
-    onInputClick?: () => void;
-    onInputKeyDown?: (e: React.KeyboardEvent) => void;
-    onMouseEnter?: (e: React.MouseEvent) => void;
-    onMouseOver?: (e: React.MouseEvent) => void;
-    onMouseLeave?: (e: React.MouseEvent) => void;
-    renderItem?: (item: T, state: MenuItemState) => React.ReactNode;
-    renderNotFound?: () => React.ReactNode;
-    renderTotalCount?: (found: number, total: number) => React.ReactNode;
-    renderValue?: (item: T) => React.ReactNode;
-    renderAddButton: (query?: string) => React.ReactNode;
-    repeatRequest?: () => void;
-    requestStatus?: ComboBoxRequestStatus;
-    refInput?: (input: Nullable<Input>) => void;
-    refMenu?: (menu: Nullable<Menu>) => void;
-    refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;
-}
-export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        renderItem: (item: any) => any;
-        renderValue: (item: any) => any;
-        renderAddButton: () => null;
-        repeatRequest: () => undefined;
-        requestStatus: ComboBoxRequestStatus;
-        onClickOutside: () => void;
-        onFocusOutside: () => void;
-        size: string;
-        width: number;
-    };
-    private input;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ComboBoxViewProps<T>): void;
-    render(): JSX.Element;
-    private renderAddButton;
-    private renderInput;
-    private handleItemSelect;
-    private refInput;
-    private renderSpinner;
-    private getRightIcon;
-}
-export {};
+import React from 'react';
+import { Input, InputIconType } from '../../components/Input';
+import { InputLikeText } from '../InputLikeText';
+import { Menu } from '../Menu';
+import { MenuItemState } from '../../components/MenuItem';
+import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
+interface ComboBoxViewProps<T> extends CommonProps {
+    align?: 'left' | 'center' | 'right';
+    autoFocus?: boolean;
+    borderless?: boolean;
+    disablePortal?: boolean;
+    disabled?: boolean;
+    editing?: boolean;
+    error?: boolean;
+    items?: Nullable<T[]>;
+    loading?: boolean;
+    menuAlign?: 'left' | 'right';
+    opened?: boolean;
+    drawArrow?: boolean;
+    placeholder?: string;
+    size?: 'small' | 'medium' | 'large';
+    textValue?: string;
+    totalCount?: number;
+    value?: Nullable<T>;
+    warning?: boolean;
+    width?: string | number;
+    maxLength?: number;
+    maxMenuHeight?: number | string;
+    leftIcon?: InputIconType;
+    rightIcon?: InputIconType;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+    onValueChange?: (value: T) => void;
+    onClickOutside?: (e: Event) => void;
+    onFocus?: () => void;
+    onFocusOutside?: () => void;
+    onInputBlur?: () => void;
+    onInputValueChange?: (value: string) => void;
+    onInputFocus?: () => void;
+    onInputClick?: () => void;
+    onInputKeyDown?: (e: React.KeyboardEvent) => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseOver?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    renderItem?: (item: T, state: MenuItemState) => React.ReactNode;
+    renderNotFound?: () => React.ReactNode;
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    renderValue?: (item: T) => React.ReactNode;
+    renderAddButton: (query?: string) => React.ReactNode;
+    repeatRequest?: () => void;
+    requestStatus?: ComboBoxRequestStatus;
+    refInput?: (input: Nullable<Input>) => void;
+    refMenu?: (menu: Nullable<Menu>) => void;
+    refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;
+}
+interface ComboBoxViewState {
+    isMobileOpened: boolean;
+}
+export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        renderItem: (item: any) => any;
+        renderValue: (item: any) => any;
+        renderAddButton: () => null;
+        repeatRequest: () => undefined;
+        requestStatus: ComboBoxRequestStatus;
+        onClickOutside: () => void;
+        onFocusOutside: () => void;
+        size: string;
+        width: number;
+    };
+    private input;
+    private mobilePopup;
+    private theme;
+    private isMobileLayout;
+    componentDidMount(): void;
+    state: ComboBoxViewState;
+    componentDidUpdate(prevProps: ComboBoxViewProps<T>): void;
+    render(): JSX.Element;
+    private getComboBoxMenu;
+    private renderMenu;
+    private renderMobileMenu;
+    private handleCloseMobile;
+    private renderAddButton;
+    private renderInput;
+    private handleFocusMobile;
+    private handleItemSelect;
+    private refInput;
+    private refMobilePopup;
+    private renderSpinner;
+    private getRightIcon;
+}
+export {};

package/cjs/internal/CustomComboBox/ComboBoxView.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComboBoxView = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComboBoxView = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactDom = require("react-dom");
 
 var _utils = require("../../lib/utils");
@@ -12,12 +12,14 @@ var _Spinner = require("../../components/Spinner");
 
 var _px = require("../icons/16px");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _MobilePopup = require("../MobilePopup");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _ResponsiveLayout = require("../../components/ResponsiveLayout");
 
 var _ComboBoxMenu = require("./ComboBoxMenu");
 var _CustomComboBoxTypes = require("./CustomComboBoxTypes");
-var _CustomComboBox = require("./CustomComboBox.styles");var
-
-
+var _CustomComboBox = require("./CustomComboBox.styles");var _class, _class2, _temp;var
 
 
 
@@ -67,7 +69,6 @@ var _CustomComboBox = require("./CustomComboBox.styles");var
 
 
 
-ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ComboBoxView, _React$Component);function ComboBoxView() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -75,6 +76,7 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+ComboBoxView = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ComboBoxView, _React$Component);function ComboBoxView() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -86,8 +88,6 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
-    input = void 0;_this.
-
 
 
 
@@ -95,7 +95,11 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+    input = void 0;_this.
+    mobilePopup = void 0;_this.
 
+    theme = void 0;_this.
+    isMobileLayout = void 0;_this.
 
 
 
@@ -103,6 +107,8 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+    state = {
+      isMobileOpened: false };_this.
 
 
 
@@ -146,6 +152,7 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+    getComboBoxMenu = function () {var _this$props =
 
 
 
@@ -158,27 +165,88 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+      _this.props,items = _this$props.items,loading = _this$props.loading,opened = _this$props.opened,refMenu = _this$props.refMenu,maxMenuHeight = _this$props.maxMenuHeight,renderTotalCount = _this$props.renderTotalCount,renderItem = _this$props.renderItem,renderNotFound = _this$props.renderNotFound,repeatRequest = _this$props.repeatRequest,requestStatus = _this$props.requestStatus,totalCount = _this$props.totalCount;
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComboBoxMenu.ComboBoxMenu, {
+          items: items,
+          loading: loading,
+          maxMenuHeight: maxMenuHeight,
+          onValueChange: _this.handleItemSelect,
+          opened: opened,
+          refMenu: refMenu,
+          renderTotalCount: renderTotalCount,
+          renderItem: renderItem,
+          renderNotFound: renderNotFound,
+          renderAddButton: _this.renderAddButton,
+          repeatRequest: repeatRequest,
+          requestStatus: requestStatus,
+          totalCount: totalCount,
+          isMobile: _this.isMobileLayout }));
 
 
+    };_this.
 
+    renderMenu = function () {var _this$props2 =
+      _this.props,menuAlign = _this$props2.menuAlign,opened = _this$props2.opened;
 
+      return (
+        opened && /*#__PURE__*/
+        _react.default.createElement(_DropdownContainer.DropdownContainer, {
+          align: menuAlign,
+          getParent: function getParent() {return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));},
+          offsetY: 1,
+          disablePortal: _this.props.disablePortal },
 
+        _this.getComboBoxMenu()));
 
 
 
+    };_this.
 
+    renderMobileMenu = function () {
+      if (!_this.state.isMobileOpened) {
+        return null;
+      }
 
+      var rightIcon = null;var _this$props3 =
 
+      _this.props,loading = _this$props3.loading,items = _this$props3.items;
+      if (loading && items && !!items.length) {
+        rightIcon = _this.renderSpinner();
+      }
 
+      var inputProps = {
+        autoFocus: true,
+        width: '100%',
+        onFocus: _this.props.onFocus,
+        onValueChange: _this.props.onInputValueChange,
+        value: _this.props.textValue,
+        placeholder: _this.props.placeholder,
+        rightIcon: rightIcon };
 
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_MobilePopup.MobilePopup, {
+          headerChildComponent: /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps),
+          useFullHeight: true,
+          onClose: _this.handleCloseMobile,
+          ref: _this.refMobilePopup },
 
+        _this.getComboBoxMenu()));
 
 
+    };_this.
 
+    handleCloseMobile = function () {
+      _this.setState({
+        isMobileOpened: false });
 
 
+      if (_this.props.onInputBlur) {
+        _this.props.onInputBlur();
+      }
+    };_this.
 
     renderAddButton = function () {
       return _this.props.renderAddButton(_this.props.textValue);
@@ -255,11 +323,23 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
 
 
 
+
+
+
+    handleFocusMobile = function () {
+      _this.setState({
+        isMobileOpened: true });
+
+    };_this.
 
     handleItemSelect = function (item) {
       if (_this.props.onValueChange) {
         _this.props.onValueChange(item);
       }
+
+      if (_this.isMobileLayout) {var _this$mobilePopup;
+        (_this$mobilePopup = _this.mobilePopup) == null ? void 0 : _this$mobilePopup.close();
+      }
     };_this.
 
     refInput = function (input) {
@@ -269,14 +349,18 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
       _this.input = input;
     };_this.
 
+    refMobilePopup = function (mobilePopup) {
+      _this.mobilePopup = mobilePopup;
+    };_this.
+
     renderSpinner = function () {return /*#__PURE__*/(
         _react.default.createElement("span", { className: _CustomComboBox.styles.spinnerWrapper() }, /*#__PURE__*/
         _react.default.createElement(_Spinner.Spinner, { type: "mini", caption: "", dimmed: true })));};_this.
 
 
 
-    getRightIcon = function () {var _this$props =
-      _this.props,loading = _this$props.loading,items = _this$props.items,drawArrow = _this$props.drawArrow,rightIcon = _this$props.rightIcon;
+    getRightIcon = function () {var _this$props4 =
+      _this.props,loading = _this$props4.loading,items = _this$props4.items,drawArrow = _this$props4.drawArrow,rightIcon = _this$props4.rightIcon;
 
       if (loading && items && !!items.length) {
         return _this.renderSpinner();
@@ -287,4 +371,4 @@ ComboBoxView = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.def
       }
 
       return null;
-    };return _this;}var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,items = _this$props2.items,loading = _this$props2.loading,menuAlign = _this$props2.menuAlign,onClickOutside = _this$props2.onClickOutside,onFocusOutside = _this$props2.onFocusOutside,onMouseEnter = _this$props2.onMouseEnter,onMouseLeave = _this$props2.onMouseLeave,onMouseOver = _this$props2.onMouseOver,opened = _this$props2.opened,refMenu = _this$props2.refMenu,maxMenuHeight = _this$props2.maxMenuHeight,renderTotalCount = _this$props2.renderTotalCount,renderItem = _this$props2.renderItem,renderNotFound = _this$props2.renderNotFound,repeatRequest = _this$props2.repeatRequest,requestStatus = _this$props2.requestStatus,totalCount = _this$props2.totalCount,size = _this$props2.size,width = _this$props2.width;var input = this.renderInput();var topOffsets = { spinner: 6, arrow: 15 };if (size === 'medium') {topOffsets.spinner += 4;topOffsets.arrow += 4;}if (size === 'large') {topOffsets.spinner += 6;topOffsets.arrow += 6;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver }, input, opened && /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { align: menuAlign, getParent: function getParent() {return (0, _reactDom.findDOMNode)(_this2);}, offsetY: 1, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_ComboBoxMenu.ComboBoxMenu, { items: items, loading: loading, maxMenuHeight: maxMenuHeight, onValueChange: this.handleItemSelect, opened: opened, refMenu: refMenu, renderTotalCount: renderTotalCount, renderItem: renderItem, renderNotFound: renderNotFound, renderAddButton: this.renderAddButton, repeatRequest: repeatRequest, requestStatus: requestStatus, totalCount: totalCount })))));};_proto.renderInput = function renderInput() {var _this$props3 = this.props,align = _this$props3.align,borderless = _this$props3.borderless,disabled = _this$props3.disabled,editing = _this$props3.editing,error = _this$props3.error,onFocus = _this$props3.onFocus,onInputBlur = _this$props3.onInputBlur,onInputValueChange = _this$props3.onInputValueChange,onInputFocus = _this$props3.onInputFocus,onInputClick = _this$props3.onInputClick,onInputKeyDown = _this$props3.onInputKeyDown,placeholder = _this$props3.placeholder,renderValue = _this$props3.renderValue,size = _this$props3.size,textValue = _this$props3.textValue,value = _this$props3.value,warning = _this$props3.warning,refInputLikeText = _this$props3.refInputLikeText,leftIcon = _this$props3.leftIcon,inputMode = _this$props3.inputMode;var rightIcon = this.getRightIcon();if (editing) {return /*#__PURE__*/_react.default.createElement(_Input.Input, { align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: "100%", size: size, ref: this.refInput, warning: warning, inputMode: inputMode });}return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component);exports.ComboBoxView = ComboBoxView;ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView';ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250 };
+    };return _this;}var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;var _this$props5 = this.props,onClickOutside = _this$props5.onClickOutside,onFocusOutside = _this$props5.onFocusOutside,onMouseEnter = _this$props5.onMouseEnter,onMouseLeave = _this$props5.onMouseLeave,onMouseOver = _this$props5.onMouseOver,opened = _this$props5.opened,width = _this$props5.width;var isMobile = this.isMobileLayout;var input = this.renderInput();return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver }, input, isMobile ? _this2.renderMobileMenu() : _this2.renderMenu())));});};_proto.renderInput = function renderInput() {var isMobile = this.isMobileLayout;var _this$props6 = this.props,align = _this$props6.align,borderless = _this$props6.borderless,disabled = _this$props6.disabled,editing = _this$props6.editing,error = _this$props6.error,onFocus = _this$props6.onFocus,onInputBlur = _this$props6.onInputBlur,onInputValueChange = _this$props6.onInputValueChange,onInputFocus = _this$props6.onInputFocus,onInputClick = _this$props6.onInputClick,onInputKeyDown = _this$props6.onInputKeyDown,placeholder = _this$props6.placeholder,renderValue = _this$props6.renderValue,size = _this$props6.size,textValue = _this$props6.textValue,value = _this$props6.value,warning = _this$props6.warning,refInputLikeText = _this$props6.refInputLikeText,leftIcon = _this$props6.leftIcon,inputMode = _this$props6.inputMode;var rightIcon = this.getRightIcon();if (editing) {return /*#__PURE__*/_react.default.createElement(_Input.Input, { align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: isMobile ? undefined : onInputBlur, onValueChange: onInputValueChange, onFocus: isMobile ? this.handleFocusMobile : onInputFocus, onClick: isMobile ? this.handleFocusMobile : onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: "100%", size: size, ref: this.refInput, warning: warning, inputMode: inputMode });}return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxView', _class2.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250 }, _temp)) || _class;exports.ComboBoxView = ComboBoxView;