@skbkontur/react-ui 3.9.2 → 3.9.3-sidepagefix

package/components/Button/Button.d.ts

@@ -1,157 +1,160 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
-export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps extends CommonProps {
-    /** @ignore */
-    _noPadding?: boolean;
-    /** @ignore */
-    _noRightPadding?: boolean;
-    /**
-     * Применяет к кнопке стили псевдокласса `:active`.
-     */
-    active?: boolean;
-    /**
-     * CSS-свойство `text-align`.
-     */
-    align?: React.CSSProperties['textAlign'];
-    /**
-     * Превращает обычную кнопку в кнопку со стрелкой.
-     */
-    arrow?: boolean | 'left';
-    /**
-     * Даёт кнопке фокус после окончания загрузки страницы.
-     */
-    autoFocus?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
-    borderless?: boolean;
-    /**
-     * @ignore
-     */
-    checked?: boolean;
-    children?: React.ReactNode;
-    /** @ignore */
-    corners?: number;
-    /**
-     * Отключенное состояние кнопки.
-     */
-    disabled?: boolean;
-    /** @ignore */
-    disableFocus?: boolean;
-    /**
-     * Cостояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
-    icon?: React.ReactElement<any>;
-    /**
-     * Переводит кнопку в состояние загрузки.
-     */
-    loading?: boolean;
-    /**
-     * Сужает кнопку.
-     */
-    narrow?: boolean;
-    /**
-     * HTML-событие `onblur`.
-     */
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onclick`.
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onfocus`.
-     */
-    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `keydown`.
-     */
-    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseenter`.
-     */
-    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `mouseleave`.
-     */
-    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseover`.
-     */
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Задаёт размер кнопки.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
-    size?: ButtonSize;
-    /**
-     * HTML-атрибут `type`.
-     */
-    type?: ButtonType;
-    /**
-     * HTML-атрибут `title`.
-     */
-    title?: string;
-    /**
-     * Стиль кнопки.
-     *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
-     */
-    use?: ButtonUse;
-    /** @ignore */
-    visuallyFocused?: boolean;
-    /**
-     * Cостояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    /**
-     * CSS-свойство `width`.
-     */
-    width?: number | string;
-}
-export interface ButtonState {
-    focusedByTab: boolean;
-}
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    static __KONTUR_REACT_UI__: string;
-    static __BUTTON__: boolean;
-    static TOP_LEFT: number;
-    static TOP_RIGHT: number;
-    static BOTTOM_RIGHT: number;
-    static BOTTOM_LEFT: number;
-    static defaultProps: {
-        use: ButtonUse;
-        size: ButtonSize;
-        type: ButtonType;
-    };
-    state: {
-        focusedByTab: boolean;
-    };
-    private theme;
-    private node;
-    componentDidMount(): void;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private getLoadingSpinner;
-    private getSizeClassName;
-    private getSizeIconClassName;
-    private handleFocus;
-    private handleBlur;
-    private _ref;
-}
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
+export interface ButtonProps extends CommonProps {
+    /** @ignore */
+    _noPadding?: boolean;
+    /** @ignore */
+    _noRightPadding?: boolean;
+    /**
+     * Применяет к кнопке стили псевдокласса `:active`.
+     */
+    active?: boolean;
+    /**
+     * CSS-свойство `text-align`.
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Превращает обычную кнопку в кнопку со стрелкой.
+     */
+    arrow?: boolean | 'left';
+    /**
+     * Даёт кнопке фокус после окончания загрузки страницы.
+     */
+    autoFocus?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
+    borderless?: boolean;
+    /**
+     * @ignore
+     */
+    checked?: boolean;
+    children?: React.ReactNode;
+    /** @ignore */
+    corners?: number;
+    /**
+     * Отключенное состояние кнопки.
+     */
+    disabled?: boolean;
+    /** @ignore */
+    disableFocus?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Иконка слева от текста кнопки.
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Переводит кнопку в состояние загрузки.
+     */
+    loading?: boolean;
+    /**
+     * Сужает кнопку.
+     */
+    narrow?: boolean;
+    /**
+     * HTML-событие `onblur`.
+     */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onclick`.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onfocus`.
+     */
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `keydown`.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseenter`.
+     */
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `mouseleave`.
+     */
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseover`.
+     */
+    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Задаёт размер кнопки.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: ButtonSize;
+    /**
+     * HTML-атрибут `type`.
+     */
+    type?: ButtonType;
+    /**
+     * HTML-атрибут `title`.
+     */
+    title?: string;
+    /**
+     * Стиль кнопки.
+     *
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
+     */
+    use?: ButtonUse;
+    /** @ignore */
+    visuallyFocused?: boolean;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    /**
+     * CSS-свойство `width`.
+     */
+    width?: number | string;
+}
+export interface ButtonState {
+    focusedByTab: boolean;
+}
+export declare class Button extends React.Component<ButtonProps, ButtonState> {
+    static __KONTUR_REACT_UI__: string;
+    static __BUTTON__: boolean;
+    static TOP_LEFT: number;
+    static TOP_RIGHT: number;
+    static BOTTOM_RIGHT: number;
+    static BOTTOM_LEFT: number;
+    static defaultProps: {
+        use: ButtonUse;
+        size: ButtonSize;
+        type: ButtonType;
+    };
+    state: {
+        focusedByTab: boolean;
+    };
+    private theme;
+    private node;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: ButtonProps): {
+        focusedByTab: boolean;
+    } | null;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private getLoadingSpinner;
+    private getSizeClassName;
+    private getSizeIconClassName;
+    private handleFocus;
+    private handleBlur;
+    private _ref;
+}
+export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;

package/components/Button/Button.mixins.d.ts

@@ -1,6 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, height: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
-export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
-export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, height: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;

package/components/Button/Button.styles.d.ts

@@ -1,67 +1,67 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    arrowHelper: string;
-    arrowHelperTop: string;
-    arrowHelperBottom: string;
-    caption: string;
-};
-export declare const styles: {
-    root(t: Theme): string;
-    outline(): string;
-    outlineWarning(t: Theme): string;
-    outlineError(t: Theme): string;
-    outlineLink(): string;
-    outlineLinkWarning(t: Theme): string;
-    outlineLinkError(t: Theme): string;
-    sizeSmall(t: Theme): string;
-    sizeSmallIE11(t: Theme): string;
-    sizeMedium(t: Theme): string;
-    sizeMediumIE11(t: Theme): string;
-    sizeLarge(t: Theme): string;
-    sizeLargeIE11(t: Theme): string;
-    link(t: Theme): string;
-    linkFocus(t: Theme): string;
-    linkDisabled(t: Theme): string;
-    focus(t: Theme): string;
-    disabled(t: Theme): string;
-    arrowWarning(t: Theme): string;
-    arrowError(t: Theme): string;
-    arrowFocus(t: Theme): string;
-    arrow(): string;
-    arrowLeft(): string;
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    checked(t: Theme): string;
-    checkedDisabled(t: Theme): string;
-    caption(): string;
-    captionLink(): string;
-    captionTranslated(): string;
-    captionDisabled(): string;
-    wrap(): string;
-    narrow(): string;
-    noPadding(): string;
-    noRightPadding(): string;
-    iconNoRightPadding(): string;
-    iconLink(t: Theme): string;
-    wrapLink(): string;
-    wrapArrow(): string;
-    wrapArrowLeft(): string;
-    icon(): string;
-    iconSmall(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconLarge(t: Theme): string;
-    borderless(): string;
-    loading(): string;
-    visibilityHidden(): string;
-};
-export declare const activeStyles: {
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    link(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    arrowHelper: string;
+    arrowHelperTop: string;
+    arrowHelperBottom: string;
+    caption: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    outline(): string;
+    outlineWarning(t: Theme): string;
+    outlineError(t: Theme): string;
+    outlineLink(): string;
+    outlineLinkWarning(t: Theme): string;
+    outlineLinkError(t: Theme): string;
+    sizeSmall(t: Theme): string;
+    sizeSmallIE11(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    sizeMediumIE11(t: Theme): string;
+    sizeLarge(t: Theme): string;
+    sizeLargeIE11(t: Theme): string;
+    link(t: Theme): string;
+    linkFocus(t: Theme): string;
+    linkDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    arrowWarning(t: Theme): string;
+    arrowError(t: Theme): string;
+    arrowFocus(t: Theme): string;
+    arrow(): string;
+    arrowLeft(): string;
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    checked(t: Theme): string;
+    checkedDisabled(t: Theme): string;
+    caption(): string;
+    captionLink(): string;
+    captionTranslated(): string;
+    captionDisabled(): string;
+    wrap(): string;
+    narrow(): string;
+    noPadding(): string;
+    noRightPadding(): string;
+    iconNoRightPadding(): string;
+    iconLink(t: Theme): string;
+    wrapLink(): string;
+    wrapArrow(): string;
+    wrapArrowLeft(): string;
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    borderless(): string;
+    loading(): string;
+    visibilityHidden(): string;
+};
+export declare const activeStyles: {
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    link(t: Theme): string;
+};

package/components/Button/Corners.d.ts

@@ -1,6 +1,6 @@
-export declare const Corners: {
-    TOP_LEFT: number;
-    TOP_RIGHT: number;
-    BOTTOM_RIGHT: number;
-    BOTTOM_LEFT: number;
-};
+export declare const Corners: {
+    TOP_LEFT: number;
+    TOP_RIGHT: number;
+    BOTTOM_RIGHT: number;
+    BOTTOM_LEFT: number;
+};

package/components/Button/index.d.ts

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

package/components/Center/Center.d.ts

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Override } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type HorizontalAlign = 'left' | 'center' | 'right';
-export interface CenterProps extends CommonProps, Override<React.HTMLAttributes<HTMLDivElement>, {
-    /**
-     * Определяет, как контент будет выровнен по горизонтали.
-     *
-     * **Допустимые значения**: `"left"`, `"center"`, `"right"`.
-     */
-    align?: HorizontalAlign;
-}> {
-}
-/**
- * Контейнер, который центрирует элементы внутри себя.
- */
-export declare class Center extends React.Component<CenterProps> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        align: string;
-    };
-    render(): JSX.Element;
-    private renderMain;
-}
+import React from 'react';
+import { Override } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type HorizontalAlign = 'left' | 'center' | 'right';
+export interface CenterProps extends CommonProps, Override<React.HTMLAttributes<HTMLDivElement>, {
+    /**
+     * Определяет, как контент будет выровнен по горизонтали.
+     *
+     * **Допустимые значения**: `"left"`, `"center"`, `"right"`.
+     */
+    align?: HorizontalAlign;
+}> {
+}
+/**
+ * Контейнер, который центрирует элементы внутри себя.
+ */
+export declare class Center extends React.Component<CenterProps> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        align: string;
+    };
+    render(): JSX.Element;
+    private renderMain;
+}

package/components/Center/Center.styles.d.ts

@@ -1,7 +1,7 @@
-export declare const styles: {
-    root(): string;
-    rootAlignLeft(): string;
-    rootAlignRight(): string;
-    spring(): string;
-    container(): string;
-};
+export declare const styles: {
+    root(): string;
+    rootAlignLeft(): string;
+    rootAlignRight(): string;
+    spring(): string;
+    container(): string;
+};

package/components/Center/index.d.ts

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

package/components/Checkbox/Checkbox/Checkbox.js

@@ -9,6 +9,7 @@ import { OkIcon, SquareIcon } from "../../../internal/icons/16px";
 import { isEdge, isFirefox, isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { fixFirefoxModifiedClickOnLabel } from "../../../lib/events/fixFirefoxModifiedClickOnLabel";
 import { styles, globalClasses } from "../Checkbox.styles";
 export var Checkbox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Checkbox, _React$Component);
@@ -26,11 +27,11 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
       indeterminate: _this.props.initialIndeterminate || false
     };
     _this.theme = void 0;
-    _this.input = void 0;
+    _this.input = /*#__PURE__*/React.createRef();
 
     _this.componentDidMount = function () {
-      if (_this.state.indeterminate && _this.input) {
-        _this.input.indeterminate = true;
+      if (_this.state.indeterminate && _this.input.current) {
+        _this.input.current.indeterminate = true;
       }
     };
 
@@ -39,8 +40,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
         indeterminate: true
       });
 
-      if (_this.input) {
-        _this.input.indeterminate = true;
+      if (_this.input.current) {
+        _this.input.current.indeterminate = true;
       }
     };
 
@@ -49,8 +50,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
         indeterminate: false
       });
 
-      if (_this.input) {
-        _this.input.indeterminate = false;
+      if (_this.input.current) {
+        _this.input.current.indeterminate = false;
       }
     };
 
@@ -77,7 +78,7 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
         onClick: _this.handleClick,
-        ref: _this.inputRef
+        ref: _this.input
       });
 
       var caption = null;
@@ -103,7 +104,8 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
         className: rootClass,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
-        onMouseOver: onMouseOver
+        onMouseOver: onMouseOver,
+        onClick: fixFirefoxModifiedClickOnLabel(_this.input)
       }, /*#__PURE__*/React.createElement("input", inputProps), box, caption);
     };
 
@@ -133,10 +135,6 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.inputRef = function (ref) {
-      _this.input = ref;
-    };
-
     _this.handleChange = function (event) {
       var checked = event.currentTarget.checked;
       _this.props.onValueChange == null ? void 0 : _this.props.onValueChange(checked);
@@ -155,12 +153,12 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
         // because we cant simulate real native onChange event
 
 
-        if (_this.props.onValueChange && _this.input) {
-          var checked = !_this.input.checked;
+        if (_this.props.onValueChange && _this.input.current) {
+          var checked = !_this.input.current.checked;
 
           if (_this.props.checked === undefined) {
             // in case of uncontrolled mode
-            _this.input.checked = checked;
+            _this.input.current.checked = checked;
           }
 
           _this.props.onValueChange(checked);
@@ -194,10 +192,10 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
   ;
 
   _proto.focus = function focus() {
-    var _this$input;
+    var _this$input$current;
 
     keyListener.isTabPressed = true;
-    (_this$input = this.input) == null ? void 0 : _this$input.focus();
+    (_this$input$current = this.input.current) == null ? void 0 : _this$input$current.focus();
   }
   /**
   * Программное снятие фокуса с чекбокса.
@@ -206,9 +204,9 @@ export var Checkbox = /*#__PURE__*/function (_React$Component) {
   ;
 
   _proto.blur = function blur() {
-    var _this$input2;
+    var _this$input$current2;
 
-    (_this$input2 = this.input) == null ? void 0 : _this$input2.blur();
+    (_this$input$current2 = this.input.current) == null ? void 0 : _this$input$current2.blur();
   }
   /**
   * Устанавливает чекбокс в HTML-состояние `indeterminate`.