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

package/components/ScrollContainer/ScrollContainer.d.ts

@@ -1,87 +1,83 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { Nullable } from '../../typings/utility-types';
-export declare type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
-export declare type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
-export declare type ScrollContainerScrollState = ScrollContainerScrollStateY;
-export declare type ScrollBehaviour = 'auto' | 'smooth';
-export interface ScrollContainerProps extends CommonProps {
-    /**
-     * Инвертировать цвет скроллбара
-     * @default false
-     */
-    invert: boolean;
-    maxHeight?: React.CSSProperties['maxHeight'];
-    maxWidth?: React.CSSProperties['maxWidth'];
-    /**
-     * @default false
-     */
-    preventWindowScroll: boolean;
-    /**
-     * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
-     * @default 'auto'
-     */
-    scrollBehaviour?: ScrollBehaviour;
-    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
-    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
-    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
-    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-    /**
-     * Отключение кастомного скролла
-     */
-    disabled?: boolean;
-}
-export declare class ScrollContainer extends React.Component<ScrollContainerProps> {
-    static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        invert: PropTypes.Requireable<boolean>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        maxHeight: PropTypes.Requireable<string | number>;
-        scrollBehaviour: PropTypes.Requireable<string>;
-        preventWindowScroll: PropTypes.Requireable<boolean>;
-        onScrollStateChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        invert: boolean;
-        scrollBehaviour: string;
-        preventWindowScroll: boolean;
-    };
-    private scrollX;
-    private scrollY;
-    private inner;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ScrollContainerProps): void;
-    render: () => React.ReactNode;
-    /**
-     * @public
-     * @param {HTMLElement} element
-     */
-    scrollTo(element: Nullable<HTMLElement>): void;
-    /**
-     * @public
-     */
-    scrollToTop(): void;
-    /**
-     * @public
-     */
-    scrollToBottom(): void;
-    /**
-     * @public
-     */
-    scrollToLeft(): void;
-    /**
-     * @public
-     */
-    scrollToRight(): void;
-    private hasScrollBar;
-    private renderScrollbar;
-    private handleScrollStateChange;
-    private refScrollBarY;
-    private refScrollBarX;
-    private refInner;
-    private handleNativeScroll;
-    private handleInnerScrollWheel;
-    private handleMouseMove;
-    private handleMouseLeave;
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { Nullable } from '../../typings/utility-types';
+export declare type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
+export declare type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
+export declare type ScrollContainerScrollState = ScrollContainerScrollStateY;
+export declare type ScrollBehaviour = 'auto' | 'smooth';
+export interface ScrollContainerProps extends CommonProps {
+    /**
+     * Инвертировать цвет скроллбара
+     * @default false
+     */
+    invert: boolean;
+    maxHeight?: React.CSSProperties['maxHeight'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /**
+     * @default false
+     */
+    preventWindowScroll: boolean;
+    /**
+     * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
+     * @default 'auto'
+     */
+    scrollBehaviour?: ScrollBehaviour;
+    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
+    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
+    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+}
+export declare class ScrollContainer extends React.Component<ScrollContainerProps> {
+    static __KONTUR_REACT_UI__: string;
+    static propTypes: {
+        invert: PropTypes.Requireable<boolean>;
+        maxWidth: PropTypes.Requireable<string | number>;
+        maxHeight: PropTypes.Requireable<string | number>;
+        scrollBehaviour: PropTypes.Requireable<string>;
+        preventWindowScroll: PropTypes.Requireable<boolean>;
+        onScrollStateChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        invert: boolean;
+        scrollBehaviour: string;
+        preventWindowScroll: boolean;
+    };
+    private scrollX;
+    private scrollY;
+    private inner;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ScrollContainerProps): void;
+    render: () => JSX.Element;
+    /**
+     * @public
+     * @param {HTMLElement} element
+     */
+    scrollTo(element: Nullable<HTMLElement>): void;
+    /**
+     * @public
+     */
+    scrollToTop(): void;
+    /**
+     * @public
+     */
+    scrollToBottom(): void;
+    /**
+     * @public
+     */
+    scrollToLeft(): void;
+    /**
+     * @public
+     */
+    scrollToRight(): void;
+    private hasScrollBar;
+    private renderScrollbar;
+    private handleScrollStateChange;
+    private refScrollBarY;
+    private refScrollBarX;
+    private refInner;
+    private handleNativeScroll;
+    private handleInnerScrollWheel;
+    private handleMouseMove;
+    private handleMouseLeave;
+}

package/components/ScrollContainer/ScrollContainer.helpers.d.ts

@@ -1,10 +1,10 @@
-import { ScrollBarScrollState } from './ScrollBar';
-import { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';
-export declare const getScrollSizeParams: (inner: HTMLElement, axis: 'x' | 'y') => {
-    scrollActive: boolean;
-    scrollSize: number;
-    scrollPos: number;
-};
-export declare const getScrollYOffset: (element: HTMLElement, container: HTMLElement) => number;
-export declare const convertScrollbarXScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateX;
-export declare const convertScrollbarYScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateY;
+import { ScrollBarScrollState } from './ScrollBar';
+import { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';
+export declare const getScrollSizeParams: (inner: HTMLElement, axis: 'x' | 'y') => {
+    scrollActive: boolean;
+    scrollSize: number;
+    scrollPos: number;
+};
+export declare const getScrollYOffset: (element: HTMLElement, container: HTMLElement) => number;
+export declare const convertScrollbarXScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateX;
+export declare const convertScrollbarYScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateY;

package/components/ScrollContainer/ScrollContainer.styles.d.ts

@@ -1,16 +1,16 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    scrollbarX: string;
-    scrollbarY: string;
-    inner: string;
-};
-export declare const styles: {
-    root(): string;
-    inner(): string;
-    scrollBar(t: Theme): string;
-    scrollBarInvert(t: Theme): string;
-    scrollBarY(t: Theme): string;
-    scrollBarYHover(t: Theme): string;
-    scrollBarX(t: Theme): string;
-    scrollBarXHover(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    scrollbarX: string;
+    scrollbarY: string;
+    inner: string;
+};
+export declare const styles: {
+    root(): string;
+    inner(): string;
+    scrollBar(t: Theme): string;
+    scrollBarInvert(t: Theme): string;
+    scrollBarY(t: Theme): string;
+    scrollBarYHover(t: Theme): string;
+    scrollBarX(t: Theme): string;
+    scrollBarXHover(t: Theme): string;
+};

package/components/ScrollContainer/index.d.ts

@@ -1 +1 @@
-export * from './ScrollContainer';
+export * from './ScrollContainer';

package/components/Select/Item.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-export declare class Item extends React.Component<{
-    children?: React.ReactNode;
-}> {
-    static __KONTUR_REACT_UI__: string;
-    render(): JSX.Element;
-}
+import React from 'react';
+export declare class Item extends React.Component<{
+    children?: React.ReactNode;
+}> {
+    static __KONTUR_REACT_UI__: string;
+    render(): JSX.Element;
+}

package/components/Select/Select/Select.js

@@ -68,9 +68,7 @@ import { isFunction } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ArrowChevronDownIcon } from "../../../internal/icons/16px";
-import { MobilePopup } from "../../../internal/MobilePopup";
 import { cx } from "../../../lib/theming/Emotion";
-import { responsiveLayout } from "../../ResponsiveLayout";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
 import { styles } from "../Select.styles";
@@ -85,7 +83,7 @@ var PASS_BUTTON_PROPS = {
   onMouseLeave: true,
   onMouseOver: true
 };
-export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayout(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Select, _React$Component);
 
   function Select() {
@@ -102,7 +100,6 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       searchPattern: ''
     };
     _this.theme = void 0;
-    _this.isMobileLayout = void 0;
     _this.locale = void 0;
     _this.menu = void 0;
     _this.buttonElement = null;
@@ -139,65 +136,6 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       }
     };
 
-    _this.getDefaultButtonParams = function () {
-      var _this$renderLabel = _this.renderLabel(),
-          label = _this$renderLabel.label,
-          isPlaceholder = _this$renderLabel.isPlaceholder;
-
-      var buttonParams = {
-        opened: _this.state.opened,
-        label: label,
-        isPlaceholder: isPlaceholder,
-        onClick: _this.toggle,
-        onKeyDown: _this.handleKey
-      };
-      return buttonParams;
-    };
-
-    _this.getSearch = function (noMargin) {
-      var _cx;
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.search()] = noMargin ? false : true, _cx))
-      }, /*#__PURE__*/React.createElement(Input, {
-        value: _this.state.searchPattern,
-        ref: _this.focusInput,
-        onValueChange: _this.handleSearch,
-        width: "100%"
-      }));
-    };
-
-    _this.getMenuItems = function (value) {
-      var isMobile = _this.isMobileLayout;
-      return _this.mapItems(function (iValue, item, i, comment) {
-        if (isFunction(item)) {
-          var element = item();
-
-          if ( /*#__PURE__*/React.isValidElement(element)) {
-            return /*#__PURE__*/React.cloneElement(element, {
-              key: i
-            });
-          }
-
-          return null;
-        }
-
-        if ( /*#__PURE__*/React.isValidElement(item)) {
-          return /*#__PURE__*/React.cloneElement(item, {
-            key: i
-          });
-        }
-
-        return /*#__PURE__*/React.createElement(MenuItem, {
-          key: i,
-          state: _this.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
-          onClick: _this.select.bind(_assertThisInitialized(_this), iValue),
-          comment: comment,
-          isMobile: isMobile
-        }, _this.getProps().renderItem(iValue, item));
-      });
-    };
-
     _this.dropdownContainerGetParent = function () {
       return ReactDOM.findDOMNode(_assertThisInitialized(_this));
     };
@@ -321,38 +259,34 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   */
   ;
 
-  _proto.getMenuRenderer = function getMenuRenderer() {
-    if (this.isMobileLayout) {
-      return this.renderMobileMenu();
-    }
-
-    return this.renderMenu();
-  };
-
   _proto.renderMain = function renderMain() {
-    var _cx2;
-
-    var buttonParams = this.getDefaultButtonParams();
-    var button = this.getButton(buttonParams);
-    var isMobile = this.isMobileLayout;
+    var _this$renderLabel = this.renderLabel(),
+        label = _this$renderLabel.label,
+        isPlaceholder = _this$renderLabel.isPlaceholder;
+
+    var buttonParams = {
+      opened: this.state.opened,
+      label: label,
+      isPlaceholder: isPlaceholder,
+      onClick: this.toggle,
+      onKeyDown: this.handleKey
+    };
     var style = {
       width: this.props.width,
       maxWidth: this.props.maxWidth || undefined
     };
-    var root = /*#__PURE__*/React.createElement("span", {
-      className: cx((_cx2 = {}, _cx2[styles.root()] = true, _cx2[styles.rootMobile(this.theme)] = isMobile, _cx2)),
-      style: style
-    }, button, !this.props.disabled && this.state.opened && this.getMenuRenderer());
+    var button = this.getButton(buttonParams);
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.close,
       onFocusOutside: this.close,
-      active: isMobile ? false : this.state.opened
-    }, root));
+      active: this.state.opened
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.root(),
+      style: style
+    }, button, !this.props.disabled && this.state.opened && this.renderMenu())));
   };
 
   _proto.renderLabel = function renderLabel() {
-    var _this$locale;
-
     var value = this.getValue();
     var item = this.getItemByValue(value);
 
@@ -364,7 +298,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     }
 
     return {
-      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)),
+      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || this.locale.placeholder),
       isPlaceholder: true
     };
   };
@@ -388,7 +322,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cx3, _cx4;
+    var _cx, _cx2;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -400,7 +334,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     });
 
     var labelProps = {
-      className: cx((_cx3 = {}, _cx3[styles.label()] = this.props.use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
+      className: cx((_cx = {}, _cx[styles.label()] = this.props.use !== 'link', _cx[styles.placeholder(this.theme)] = params.isPlaceholder, _cx[styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx)),
       style: {
         paddingRight: this.getSelectIconGap()
       }
@@ -411,7 +345,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     }, this.props._icon && /*#__PURE__*/React.createElement("div", {
       className: this.getLeftIconClass(this.props.size)
     }, this.props._icon), /*#__PURE__*/React.createElement("span", labelProps, params.label), /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[styles.customUseArrow()] = useIsCustom, _cx4))
+      className: cx(styles.arrowWrap(this.theme), (_cx2 = {}, _cx2[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx2[styles.customUseArrow()] = useIsCustom, _cx2))
     }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null))));
   };
 
@@ -437,7 +371,15 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMenu = function renderMenu() {
-    var search = this.props.search ? this.getSearch() : null;
+    var _this4 = this;
+
+    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
+      className: styles.search()
+    }, /*#__PURE__*/React.createElement(Input, {
+      ref: this.focusInput,
+      onValueChange: this.handleSearch,
+      width: "100%"
+    })) : null;
     var value = this.getValue();
     return /*#__PURE__*/React.createElement(DropdownContainer, {
       getParent: this.dropdownContainerGetParent,
@@ -449,23 +391,32 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       width: this.props.menuWidth,
       onItemClick: this.close,
       maxHeight: this.props.maxMenuHeight
-    }, search, this.getMenuItems(value)));
-  };
+    }, search, this.mapItems(function (iValue, item, i, comment) {
+      if (isFunction(item)) {
+        var element = item();
 
-  _proto.renderMobileMenu = function renderMobileMenu() {
-    var search = this.props.search ? this.getSearch(true) : null;
-    var value = this.getValue();
-    var isWithSearch = Boolean(search);
-    return /*#__PURE__*/React.createElement(MobilePopup, {
-      onClose: this.close,
-      headerChildComponent: search,
-      caption: this.props.mobileMenuHeaderText,
-      useFullHeight: isWithSearch
-    }, /*#__PURE__*/React.createElement(Menu, {
-      onItemClick: this.close,
-      disableScrollContainer: true,
-      maxHeight: 'auto'
-    }, this.getMenuItems(value)));
+        if ( /*#__PURE__*/React.isValidElement(element)) {
+          return /*#__PURE__*/React.cloneElement(element, {
+            key: i
+          });
+        }
+
+        return null;
+      }
+
+      if ( /*#__PURE__*/React.isValidElement(item)) {
+        return /*#__PURE__*/React.cloneElement(item, {
+          key: i
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        key: i,
+        state: _this4.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
+        onClick: _this4.select.bind(_this4, iValue),
+        comment: comment
+      }, _this4.getProps().renderItem(iValue, item));
+    })));
   };
 
   _proto.select = function select(value) {
@@ -571,7 +522,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
 }, _class2["static"] = function (element) {
   invariant( /*#__PURE__*/React.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');
   return element;
-}, _temp)) || _class) || _class);
+}, _temp)) || _class);
 
 function renderValue(value, item) {
   return item;