@skbkontur/react-ui 4.15.5 → 4.15.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.15.6](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.15.5...@skbkontur/react-ui@4.15.6) (2023-08-02)
+
+**Note:** Version bump only for package @skbkontur/react-ui
+
+
+
+
+
 ## [4.15.5](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.15.4...@skbkontur/react-ui@4.15.5) (2023-08-02)
 
 

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputProps } from '../Input';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
+import { Nullable, Override } from '../../typings/utility-types';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+export interface AutocompleteProps extends CommonProps, Pick<DropdownContainerProps, 'menuPos'>, Override<InputProps, {
+    /** Функция отрисовки элемента меню */
+    renderItem?: (item: string) => React.ReactNode;
+    /** Промис, резолвящий элементы меню */
+    source?: string[] | ((patter: string) => Promise<string[]>);
+    /** Отключает использование портала */
+    disablePortal?: boolean;
+    /** Отрисовка тени у выпадающего меню */
+    hasShadow?: boolean;
+    /** Выравнивание выпадающего меню */
+    menuAlign?: 'left' | 'right';
+    /** Максимальная высота меню */
+    menuMaxHeight?: number | string;
+    /** Ширина меню */
+    menuWidth?: number | string;
+    /** Отключить скролл окна, когда меню открыто */
+    preventWindowScroll?: boolean;
+    /** Вызывается при изменении `value` */
+    onValueChange: (value: string) => void;
+    /** onBlur */
+    onBlur?: () => void;
+    /** Размер инпута */
+    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'>>;
+/**
+ * Стандартный инпут с подсказками.
+ *
+ * Все свойства передаются во внутренний *Input*.
+ */
+export declare class Autocomplete extends React.Component<AutocompleteProps, AutocompleteState> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        /**
+         * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
+         * — *item*.
+         */
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Если передан массив, то совпадения ищутся по этому массиву.
+         *
+         * Если передается функция, то она должна возвращать thenable, который
+         * резолвится уже отфильтрованным массивом. Возвращенный thenable может
+         * иметь метод cancel, который будет вызван при отмене поиска (пользователь
+         * изменил строку поиска, автокомплит потерял фокус).
+         * ```
+         * function(pattern) {
+         *   return service.findAll(pattern);
+         * }
+         * ```
+         */
+        source: PropTypes.Requireable<any[] | ((...args: any[]) => any)>;
+    };
+    static defaultProps: DefaultProps;
+    state: AutocompleteState;
+    private theme;
+    private readonly locale;
+    private isMobileLayout;
+    private opened;
+    private input;
+    private menu;
+    private rootSpan;
+    private mobilePopup;
+    private requestId;
+    private getProps;
+    private setRootNode;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    componentDidUpdate(prevProps: AutocompleteProps): void;
+    render(): JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<AutocompleteProps>) => JSX.Element;
+    private renderHints;
+    private renderMenu;
+    private renderMobileMenu;
+    private getItems;
+    private handleValueChange;
+    private handleCloseMobile;
+    private handleKeyPressMobile;
+    private handleFocus;
+    private handleBlur;
+    private handleClickOutside;
+    private handleKeyDown;
+    private handleMenuItemClick;
+    private getAnchor;
+    private handleItemClick;
+    private choose;
+    private updateItems;
+    private fireChange;
+    private refInput;
+    private refMenu;
+    private refRootSpan;
+    private refMobilePopup;
+}
+export {};

package/cjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,523 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.AutocompleteDataTids = exports.Autocomplete = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuMessage = require("../../internal/MenuMessage");
+var _decorators = require("../../lib/locale/decorators");
+var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+var _Input = require("../Input");
+var _DropdownContainer = require("../../internal/DropdownContainer");
+var _Menu = require("../../internal/Menu");
+var _MenuItem = require("../MenuItem");
+var _RenderLayer = require("../../internal/RenderLayer");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _fixClickFocusIE = require("../../lib/events/fixClickFocusIE");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _MobilePopup = require("../../internal/MobilePopup");
+var _decorator = require("../ResponsiveLayout/decorator");
+var _rootNode = require("../../lib/rootNode");
+var _getDOMRect = require("../../lib/dom/getDOMRect");
+
+var _Autocomplete = require("./Autocomplete.styles");
+var _locale = require("./locale");
+var _getAutocompleteTheme = require("./getAutocompleteTheme");var _excluded = ["onValueChange", "onKeyDown", "onFocus", "onBlur", "renderItem", "disablePortal", "hasShadow", "menuAlign", "menuMaxHeight", "preventWindowScroll", "source", "width", "mobileMenuHeaderText"];var _dec, _class, _class2, _temp;
+
+function match(pattern, items) {
+  if (!pattern || !items) {
+    return Promise.resolve([]);
+  }
+
+  var lowerCasedPattern = pattern.toLowerCase();
+  var itemsMatchingPattern = items.filter(function (item) {
+    return item.toLowerCase().includes(lowerCasedPattern);
+  });
+
+  return Promise.resolve(itemsMatchingPattern);
+}
+
+function renderItem(item) {
+  return item;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var AutocompleteDataTids = {
+  root: 'Autocomplete__root' };exports.AutocompleteDataTids = AutocompleteDataTids;
+
+
+
+
+
+
+
+
+
+/**
+ * Стандартный инпут с подсказками.
+ *
+ * Все свойства передаются во внутренний *Input*.
+ */var
+
+
+
+Autocomplete = (_dec = (0, _decorators.locale)('Autocomplete', _locale.AutocompleteLocaleHelper), (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Autocomplete, _React$Component);function Autocomplete() {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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    state = {
+      items: null,
+      selected: -1,
+      focused: false,
+      isMobileOpened: false };_this.
+
+
+
+
+
+    opened = false;_this.
+    input = null;_this.
+
+
+
+
+    requestId = 0;_this.
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Autocomplete.defaultProps);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderMain = function (props) {
+      var focused = _this.state.focused;
+
+      var isMobile = _this.isMobileLayout;
+
+      var
+      onValueChange =
+
+
+
+
+
+
+
+
+
+
+
+
+
+      props.onValueChange,onKeyDown = props.onKeyDown,onFocus = props.onFocus,onBlur = props.onBlur,_renderItem = props.renderItem,disablePortal = props.disablePortal,hasShadow = props.hasShadow,menuAlign = props.menuAlign,menuMaxHeight = props.menuMaxHeight,preventWindowScroll = props.preventWindowScroll,source = props.source,_props$width = props.width,width = _props$width === void 0 ? _this.theme.inputWidth : _props$width,mobileMenuHeaderText = props.mobileMenuHeaderText,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        width: '100%',
+        onValueChange: _this.handleValueChange,
+        onKeyDown: _this.handleKeyDown,
+        onFocus: _this.handleFocus,
+        ref: _this.refInput });
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_RenderLayer.RenderLayer, { onFocusOutside: _this.handleBlur, onClickOutside: _this.handleClickOutside, active: focused }, /*#__PURE__*/
+        _react.default.createElement("span", {
+          "data-tid": AutocompleteDataTids.root,
+          className: _Autocomplete.styles.root(_this.theme),
+          style: { width: width },
+          ref: _this.refRootSpan }, /*#__PURE__*/
+
+        _react.default.createElement(_Input.Input, inputProps),
+        isMobile ? _this.renderMobileMenu() : _this.renderMenu())));
+
+
+
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderMobileMenu = function () {var _this$mobilePopup;
+      var inputProps = {
+        autoFocus: true,
+        width: '100%',
+        onValueChange: _this.handleValueChange,
+        onKeyPress: _this.handleKeyPressMobile,
+        value: _this.props.value,
+        placeholder: _this.locale.enterValue };
+
+
+      var items = _this.state.items;
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_MobilePopup.MobilePopup, {
+          headerChildComponent: /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps),
+          caption: _this.props.mobileMenuHeaderText,
+          opened: _this.state.isMobileOpened,
+          onCloseRequest: _this.handleCloseMobile,
+          ref: _this.refMobilePopup }, /*#__PURE__*/
+
+        _react.default.createElement(_Menu.Menu, { ref: _this.refMenu, onItemClick: (_this$mobilePopup = _this.mobilePopup) == null ? void 0 : _this$mobilePopup.close, disableScrollContainer: true, maxHeight: 'auto' },
+        items && items.length > 0 && _this.getItems(),
+        _this.renderHints())));
+
+
+
+    };_this.
+
+    getItems = function () {
+      var items = _this.state.items;
+      var isMobile = _this.isMobileLayout;
+
+      return items ?
+      items.map(function (item, i) {
+        return /*#__PURE__*/(
+          _react.default.createElement(_MenuItem.MenuItem, { onClick: _this.handleMenuItemClick(i), key: i, isMobile: isMobile },
+          _this.getProps().renderItem(item)));
+
+
+      }) :
+      null;
+    };_this.
+
+    handleValueChange = function (value) {
+      _this.opened = true;
+
+      _this.fireChange(value);
+    };_this.
+
+    handleCloseMobile = function () {
+      _this.setState({
+        isMobileOpened: false });
+
+
+      _this.handleBlur();
+    };_this.
+
+    handleKeyPressMobile = function (e) {
+      if (e.key === 'Enter') {var _this$mobilePopup2;
+        (_this$mobilePopup2 = _this.mobilePopup) == null ? void 0 : _this$mobilePopup2.close();
+      }
+    };_this.
+
+    handleFocus = function (event) {
+      if (_this.isMobileLayout) {
+        _this.setState({ isMobileOpened: true });
+      }
+
+      if (_this.state.focused) {
+        return;
+      }
+
+      _this.setState({ focused: true });
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    };_this.
+
+    handleBlur = function () {
+      if (!_this.state.focused) {
+        return;
+      }
+
+      _this.opened = false;
+      _this.setState({ items: null, focused: false });
+
+      if (_this.input) {
+        _this.input.blur();
+      }
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur();
+      }
+    };_this.
+
+    handleClickOutside = function (e) {
+      (0, _fixClickFocusIE.fixClickFocusIE)(e);
+      _this.handleBlur();
+    };_this.
+
+    handleKeyDown = function (e) {
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+      switch (true) {
+        case (0, _identifiers.isKeyEscape)(e):
+          e.preventDefault();
+          _this.setState({ items: null });
+          return;
+        case (0, _identifiers.isKeyArrowUp)(e):
+          e.preventDefault();
+          if (_this.menu) {
+            _this.menu.up();
+          }
+          return;
+        case (0, _identifiers.isKeyArrowDown)(e):
+          e.preventDefault();
+          if (_this.menu) {
+            _this.menu.down();
+          }
+          return;
+        case (0, _identifiers.isKeyEnter)(e):
+          e.preventDefault(); // To prevent form submission.
+          if (_this.menu) {
+            _this.menu.enter(e);
+          }
+          return;}
+
+    };_this.
+
+
+
+
+
+    getAnchor = function () {
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    refInput = function (el) {
+      _this.input = el;
+    };_this.
+
+    refMenu = function (menu) {
+      _this.menu = menu;
+    };_this.
+
+    refRootSpan = function (span) {
+      _this.rootSpan = span;
+    };_this.
+
+    refMobilePopup = function (mobilePopup) {
+      _this.mobilePopup = mobilePopup;
+    };return _this;}var _proto = Autocomplete.prototype; /**
+   * @public
+   */_proto.focus = function focus() {if (this.input) {this.input.focus();}} /**
+   * @public
+   */;_proto.blur = function blur() {this.handleBlur();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.value !== this.props.value) {this.updateItems(this.props.value || '');}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getAutocompleteTheme.getAutocompleteTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain));});};_proto.renderHints = function renderHints() {var items = this.state.items;if (!this.props.value) {return /*#__PURE__*/_react.default.createElement(_MenuMessage.MenuMessage, null, this.locale.enterValue);}if ((items == null ? void 0 : items.length) === 0 && this.props.value) {return /*#__PURE__*/_react.default.createElement(_MenuMessage.MenuMessage, null, this.locale.notFound);}if ((0, _utils.isNullable)(items) && this.props.value) {return /*#__PURE__*/_react.default.createElement(_MenuMessage.MenuMessage, null, this.locale.updateValue);}return null;};_proto.renderMenu = function renderMenu() {var items = this.state.items;var _this$getProps = this.getProps(),menuMaxHeight = _this$getProps.menuMaxHeight,hasShadow = _this$getProps.hasShadow,menuWidth = _this$getProps.menuWidth,width = _this$getProps.width,preventWindowScroll = _this$getProps.preventWindowScroll,menuAlign = _this$getProps.menuAlign,disablePortal = _this$getProps.disablePortal,menuPos = _this$getProps.menuPos;var menuProps = { ref: this.refMenu, maxHeight: menuMaxHeight, hasShadow: hasShadow, width: menuWidth || width && (0, _getDOMRect.getDOMRect)(this.rootSpan).width, preventWindowScroll: preventWindowScroll };if (!items || items.length === 0) {return null;}return /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.getAnchor, align: menuAlign, disablePortal: disablePortal, menuPos: menuPos }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, menuProps, this.getItems()));};_proto.handleMenuItemClick = function handleMenuItemClick(i) {var _this3 = this;return function (event) {return _this3.handleItemClick(event, i);};};_proto.handleItemClick = function handleItemClick(event, index) {if (event.button) {return;}event.preventDefault();this.choose(index);};_proto.choose = function choose(index) {if (!this.state.items) {return;}var value = this.state.items[index];this.opened = false;this.setState({ selected: -1, items: null });this.fireChange(value);this.blur();};_proto.updateItems = function updateItems(value) {var _this4 = this;if (!this.opened) {return;}var pattern = value.trim();var source = this.props.source;if (!source) {return;}var promise;this.requestId += 1;var expectingId = this.requestId;if (typeof source === 'function') {promise = source(pattern);} else {promise = match(pattern, source);}promise.then(function (items) {if (_this4.opened && expectingId === _this4.requestId) {_this4.setState({ items: items, selected: -1 });}});};_proto.fireChange = function fireChange(value) {if (this.props.onValueChange) {this.props.onValueChange(value);}};return Autocomplete;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Autocomplete', _class2.propTypes = { /**
+   * Функция для отрисовки элемента в выпадающем списке. Единственный аргумент
+   * — *item*.
+   */renderItem: _propTypes.default.func, /**
+   * Если передан массив, то совпадения ищутся по этому массиву.
+   *
+   * Если передается функция, то она должна возвращать thenable, который
+   * резолвится уже отфильтрованным массивом. Возвращенный thenable может
+   * иметь метод cancel, который будет вызван при отмене поиска (пользователь
+   * изменил строку поиска, автокомплит потерял фокус).
+   * ```
+   * function(pattern) {
+   *   return service.findAll(pattern);
+   * }
+   * ```
+   */source: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func]) }, _class2.defaultProps = { renderItem: renderItem, size: 'small', disablePortal: false, hasShadow: true, menuMaxHeight: 300, menuAlign: 'left', preventWindowScroll: true }, _temp)) || _class) || _class) || _class);exports.Autocomplete = Autocomplete;