@skbkontur/react-ui 4.11.0 → 4.12.0-theme2022.6

package/components/ScrollContainer/ScrollContainer.d.ts

@@ -1,101 +1,101 @@
-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';
-declare type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
-declare type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
-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;
-    /**
-     * Смещение вертикального скроллбара
-     */
-    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
-    /**
-     * Смещение горизонтального скроллбара
-     */
-    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
-}
-export declare const ScrollContainerDataTids: {
-    readonly root: "ScrollContainer__root";
-    readonly inner: "ScrollContainer__inner";
-};
-declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll'>>;
-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: DefaultProps;
-    private getProps;
-    private scrollX;
-    private scrollY;
-    private inner;
-    private setRootNode;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ScrollContainerProps): void;
-    render: () => React.ReactNode;
-    /**
-     * @public
-     * @param {Element} 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;
-}
-export {};
+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';
+declare type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
+declare type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
+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;
+    /**
+     * Смещение вертикального скроллбара
+     */
+    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
+    /**
+     * Смещение горизонтального скроллбара
+     */
+    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
+}
+export declare const ScrollContainerDataTids: {
+    readonly root: "ScrollContainer__root";
+    readonly inner: "ScrollContainer__inner";
+};
+declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll'>>;
+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: DefaultProps;
+    private getProps;
+    private scrollX;
+    private scrollY;
+    private inner;
+    private setRootNode;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ScrollContainerProps): void;
+    render: () => React.ReactNode;
+    /**
+     * @public
+     * @param {Element} 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;
+}
+export {};

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,21 +1,21 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    scrollbarX: string;
-    scrollbarY: string;
-    scrollbarContainerX: string;
-    scrollbarContainerY: string;
-    inner: string;
-};
-export declare const styles: {
-    root(): string;
-    inner(): string;
-    innerIE11(): string;
-    scrollBar(t: Theme): string;
-    scrollBarInvert(t: Theme): string;
-    scrollBarContainerY(): string;
-    scrollBarY(t: Theme): string;
-    scrollBarYHover(t: Theme): string;
-    scrollBarContainerX(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;
+    scrollbarContainerX: string;
+    scrollbarContainerY: string;
+    inner: string;
+};
+export declare const styles: {
+    root(): string;
+    inner(): string;
+    innerIE11(): string;
+    scrollBar(t: Theme): string;
+    scrollBarInvert(t: Theme): string;
+    scrollBarContainerY(): string;
+    scrollBarY(t: Theme): string;
+    scrollBarYHover(t: Theme): string;
+    scrollBarContainerX(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/ArrowDownIcon/ArrowDownIcon.js

@@ -0,0 +1,23 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowCDownIcon16Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular";
+import { ArrowCDownIcon20Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular";
+import { ArrowCDownIcon24Regular } from "../../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var ArrowDownIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon16Regular, {
+      disableCompensation: false
+    });
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon20Regular, {
+      disableCompensation: false
+    });
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon24Regular, {
+      disableCompensation: false
+    });
+  }
+}, 'ArrowDownIcon');

package/components/Select/ArrowDownIcon/ArrowDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowDownIcon.tsx"],"names":["React","ArrowCDownIcon16Regular","ArrowCDownIcon20Regular","ArrowCDownIcon24Regular","iconSizer","ArrowDownIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,aAAa,GAAGD,SAAS;AACpC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,IAAyB,mBAAmB,EAAE,KAA9C,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,uBAAD,IAAyB,mBAAmB,EAAE,KAA9C,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,IAAyB,mBAAmB,EAAE,KAA9C,GAAN,EAHT,EADoC;;AAMpC,eANoC,CAA/B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowCDownIcon16Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular';\nimport { ArrowCDownIcon20Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular';\nimport { ArrowCDownIcon24Regular } from '../../internal/icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowDownIcon = iconSizer(\n  {\n    small: () => <ArrowCDownIcon16Regular disableCompensation={false} />,\n    medium: () => <ArrowCDownIcon20Regular disableCompensation={false} />,\n    large: () => <ArrowCDownIcon24Regular disableCompensation={false} />,\n  },\n  'ArrowDownIcon',\n);\n"]}

package/components/Select/ArrowDownIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Select/ArrowDownIcon.js",
+  "module": "ArrowDownIcon",
+  "types": "../ArrowDownIcon.d.ts",
+  "sideEffects": false
+}

package/components/Select/ArrowDownIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowDownIcon: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Select/Item.d.ts

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

package/components/Select/Select/Select.js

@@ -66,10 +66,13 @@ import { MobilePopup } from "../../../internal/MobilePopup";
 import { cx } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ArrowDownIcon } from "../ArrowDownIcon";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
 import { styles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
+import { relinkSelectTheme } from "../relinkSelectTheme";
 var PASS_BUTTON_PROPS = {
   disabled: true,
   error: true,
@@ -148,19 +151,27 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       return buttonParams;
     };
 
-    _this.getSearch = function (noMargin) {
-      var _cx;
-
+    _this.getSearch = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.search()] = !noMargin, _cx))
+        className: styles.search(),
+        onKeyDown: _this.handleKey
       }, /*#__PURE__*/React.createElement(Input, {
-        value: _this.state.searchPattern,
         ref: _this.focusInput,
         onValueChange: _this.handleSearch,
         width: "100%"
       }));
     };
 
+    _this.getMobileSearch = function () {
+      return /*#__PURE__*/React.createElement(Input, {
+        autoFocus: true,
+        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) {
@@ -316,7 +327,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this2.theme = relinkSelectTheme(theme);
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
         value: _this2.theme
       }, _this2.renderMain());
@@ -344,7 +355,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx2;
+    var _cx;
 
     var buttonParams = this.getDefaultButtonParams();
     var button = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
@@ -357,7 +368,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     };
     var root = /*#__PURE__*/React.createElement("span", {
       "data-tid": SelectDataTids.root,
-      className: cx((_cx2 = {}, _cx2[styles.root()] = true, _cx2[styles.rootMobile(this.theme)] = isMobile, _cx2)),
+      className: cx((_cx = {}, _cx[styles.root()] = true, _cx[styles.rootMobile(this.theme)] = isMobile, _cx)),
       style: style
     }, button, this.getMenuRenderer());
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
@@ -407,7 +418,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cx3, _cx4;
+    var _cx2, _cx3;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -420,19 +431,22 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
 
     var use = this.getProps().use;
     var labelProps = {
-      className: cx((_cx3 = {}, _cx3[styles.label()] = use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
+      className: cx((_cx2 = {}, _cx2[styles.label()] = use !== 'link', _cx2[styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)),
       style: {
         paddingRight: this.getSelectIconGap()
       }
     };
     var useIsCustom = use !== 'default';
+    var icon = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      size: this.props.size
+    }) : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null);
     return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
       className: styles.selectButtonContainer()
     }, 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))
-    }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null))));
+      className: cx(styles.arrowWrap(this.theme), (_cx3 = {}, _cx3[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx3[styles.customUseArrow()] = useIsCustom, _cx3))
+    }, icon)));
   };
 
   _proto.getSelectIconGap = function getSelectIconGap() {
@@ -457,19 +471,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMenu = function renderMenu() {
-    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
-      className: styles.search(),
-      onKeyDown: this.handleKey
-    }, /*#__PURE__*/React.createElement(Input, {
-      ref: this.focusInput,
-      onValueChange: this.handleSearch,
-      width: "100%"
-    })) : null;
+    var search = this.props.search ? this.getSearch() : null;
     var value = this.getValue();
     var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';
     return /*#__PURE__*/React.createElement(DropdownContainer, {
       getParent: this.dropdownContainerGetParent,
-      offsetY: -1,
       align: this.props.menuAlign,
       disablePortal: this.props.disablePortal,
       hasFixedWidth: hasFixedWidth,
@@ -484,13 +490,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMobileMenu = function renderMobileMenu() {
-    var search = this.props.search ? this.getSearch(true) : null;
+    var search = this.props.search ? this.getMobileSearch() : null;
     var value = this.getValue();
-    var isWithSearch = Boolean(search);
     return /*#__PURE__*/React.createElement(MobilePopup, {
       headerChildComponent: search,
       caption: this.props.mobileMenuHeaderText,
-      useFullHeight: isWithSearch,
       onCloseRequest: this.close,
       opened: this.state.opened
     }, /*#__PURE__*/React.createElement(Menu, {