@skbkontur/react-ui 3.9.4 → 3.10.0-fileuploader.3

package/internal/Menu/Menu.d.ts

@@ -1,62 +1,63 @@
-import React from 'react';
-export interface MenuProps {
-    children: React.ReactNode;
-    hasShadow?: boolean;
-    maxHeight?: number | string;
-    onItemClick?: () => void;
-    width?: number | string;
-    preventWindowScroll?: boolean;
-}
-export interface MenuState {
-    highlightedIndex: number;
-}
-export declare class Menu extends React.Component<MenuProps, MenuState> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        width: string;
-        maxHeight: number;
-        hasShadow: boolean;
-        preventWindowScroll: boolean;
-    };
-    state: {
-        highlightedIndex: number;
-    };
-    private theme;
-    private scrollContainer;
-    private highlighted;
-    private unmounted;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    up(): void;
-    /**
-     * @public
-     */
-    down(): void;
-    /**
-     * @public
-     */
-    enter(event: React.SyntheticEvent<HTMLElement>): boolean;
-    /**
-     * @public
-     */
-    reset(): void;
-    /**
-     * @public
-     */
-    hasHighlightedItem(): boolean;
-    highlightItem(index: number): void;
-    private renderMain;
-    private refScrollContainer;
-    private refHighlighted;
-    private scrollToSelected;
-    private scrollToTop;
-    private scrollToBottom;
-    private select;
-    private highlight;
-    private unhighlight;
-    private move;
-    private isEmpty;
-}
+import React from 'react';
+export interface MenuProps {
+    children: React.ReactNode;
+    hasShadow?: boolean;
+    maxHeight?: number | string;
+    onItemClick?: () => void;
+    width?: number | string;
+    preventWindowScroll?: boolean;
+}
+export interface MenuState {
+    highlightedIndex: number;
+}
+export declare class Menu extends React.Component<MenuProps, MenuState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: {
+        width: string;
+        maxHeight: number;
+        hasShadow: boolean;
+        preventWindowScroll: boolean;
+    };
+    state: {
+        highlightedIndex: number;
+    };
+    private theme;
+    private scrollContainer;
+    private highlighted;
+    private unmounted;
+    private setRootNode;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    /**
+     * @public
+     */
+    up(): void;
+    /**
+     * @public
+     */
+    down(): void;
+    /**
+     * @public
+     */
+    enter(event: React.SyntheticEvent<HTMLElement>): boolean;
+    /**
+     * @public
+     */
+    reset(): void;
+    /**
+     * @public
+     */
+    hasHighlightedItem(): boolean;
+    highlightItem(index: number): void;
+    private renderMain;
+    private refScrollContainer;
+    private refHighlighted;
+    private scrollToSelected;
+    private scrollToTop;
+    private scrollToBottom;
+    private select;
+    private highlight;
+    private unhighlight;
+    private move;
+    private isEmpty;
+}

package/internal/Menu/Menu.styles.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(t: Theme): string;
-    scrollContainer(t: Theme): string;
-    shadow(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    scrollContainer(t: Theme): string;
+    shadow(t: Theme): string;
+};

package/internal/Menu/index.d.ts

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

package/internal/Menu/isActiveElement.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { MenuItem, MenuItemProps } from '../../components/MenuItem';
-export declare function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem>;
+import React from 'react';
+import { MenuItem, MenuItemProps } from '../../components/MenuItem';
+export declare function isActiveElement(element: any): element is React.ComponentElement<MenuItemProps, MenuItem>;

package/internal/NativeDateInput/NativeDateInput.d.ts

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-export interface NativeDateInputProps {
-    onValueChange?: (value: string) => void;
-    value: Nullable<string>;
-    minDate?: Nullable<string>;
-    maxDate?: Nullable<string>;
-    disabled?: boolean;
-}
-export declare class NativeDateInput extends React.Component<NativeDateInputProps> {
-    static __KONTUR_REACT_UI__: string;
-    private input;
-    render(): JSX.Element;
-    /**
-     * @public
-     */
-    focus: () => void;
-    /**
-     * @public
-     */
-    click: () => void;
-    private refInput;
-}
+import React from 'react';
+import { Nullable } from '../../typings/utility-types';
+export interface NativeDateInputProps {
+    onValueChange?: (value: string) => void;
+    value: Nullable<string>;
+    minDate?: Nullable<string>;
+    maxDate?: Nullable<string>;
+    disabled?: boolean;
+}
+export declare class NativeDateInput extends React.Component<NativeDateInputProps> {
+    static __KONTUR_REACT_UI__: string;
+    private input;
+    render(): JSX.Element;
+    /**
+     * @public
+     */
+    focus: () => void;
+    /**
+     * @public
+     */
+    click: () => void;
+    private refInput;
+}

package/internal/NativeDateInput/NativeDateInput.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const jsStyles: {
-    inputTypeDate(): string;
-};
+export declare const jsStyles: {
+    inputTypeDate(): string;
+};

package/internal/NativeDateInput/index.d.ts

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

package/internal/NativeDateInput/utils.d.ts

@@ -1,7 +1,7 @@
-import { Nullable } from '../../typings/utility-types';
-import { CalendarDateShape } from '../Calendar';
-export declare const getDateForNative: (componentDate: Nullable<string>) => string | undefined;
-export declare const getDateForComponent: (nativeDate: Nullable<string>) => string;
-export declare const getNativeDateFromShape: (componentDate: CalendarDateShape | undefined | null) => string | undefined;
-export declare const upMonthOfShape: (DateShape: CalendarDateShape | undefined) => CalendarDateShape | undefined;
-export declare const getShapeFromNativeDate: (nativeDate: Nullable<string>) => CalendarDateShape | undefined;
+import { Nullable } from '../../typings/utility-types';
+import { CalendarDateShape } from '../Calendar';
+export declare const getDateForNative: (componentDate: Nullable<string>) => string | undefined;
+export declare const getDateForComponent: (nativeDate: Nullable<string>) => string;
+export declare const getNativeDateFromShape: (componentDate: CalendarDateShape | undefined | null) => string | undefined;
+export declare const upMonthOfShape: (DateShape: CalendarDateShape | undefined) => CalendarDateShape | undefined;
+export declare const getShapeFromNativeDate: (nativeDate: Nullable<string>) => CalendarDateShape | undefined;

package/internal/PerformanceMetrics/PerformanceMetrics.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-interface PerformanceMetricsProps {
-    componentsA: React.ReactElement<any>;
-    componentsB: React.ReactElement<any>;
-}
-export declare function PerformanceMetrics(props: PerformanceMetricsProps): JSX.Element;
-export {};
+import React from 'react';
+interface PerformanceMetricsProps {
+    componentsA: React.ReactElement<any>;
+    componentsB: React.ReactElement<any>;
+}
+export declare function PerformanceMetrics(props: PerformanceMetricsProps): JSX.Element;
+export {};

package/internal/Popup/Popup/Popup.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
+var _class, _class2, _temp;
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it;
 
@@ -46,7 +48,6 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import raf from 'raf';
@@ -54,13 +55,15 @@ import warning from 'warning';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction, isNonNullable } from "../../../lib/utils";
+import { isFunction, isNonNullable, isRefableElement } from "../../../lib/utils";
 import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
 import { styles } from "../Popup.styles";
@@ -69,15 +72,16 @@ var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
 };
+export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
+export var DefaultPosition = PopupPositions[0];
 var DUMMY_LOCATION = {
-  position: 'top left',
+  position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
-export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
-export var Popup = /*#__PURE__*/function (_React$Component) {
+export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
   function Popup() {
@@ -96,16 +100,11 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     _this.locationUpdateId = null;
     _this.lastPopupElement = void 0;
     _this.anchorElement = null;
-    _this.anchorInstance = void 0;
-
-    _this.refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
-
-      var element = _this.extractElement(instance);
+    _this.setRootNode = void 0;
+    _this.refForTransition = /*#__PURE__*/React.createRef();
 
-      _this.updateAnchorElement(element);
-
-      _this.anchorElement = element;
+    _this.renderContainerRef = function (childInstance) {
+      _this.updateAnchorElement(childInstance);
     };
 
     _this.handleMouseEnter = function (event) {
@@ -149,15 +148,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     _this.resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
 
-      _this.setState({
+      _this.state.location !== null && _this.setState({
         location: null
       });
     };
 
-    _this.refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && findDOMNode(zIndex);
-      }
+    _this.refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };
 
     _this.handleLayoutEvent = function () {
@@ -165,10 +162,6 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
-
       _this.updateLocation();
     };
 
@@ -198,23 +191,23 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
   };
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+  Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     /**
     * Delaying updateLocation to ensure it happens after props update
     */
-    if (nextProps.opened) {
-      if (!this.state.location) {
-        this.setState({
+    if (props.opened) {
+      if (!state.location) {
+        return {
           location: DUMMY_LOCATION
-        });
+        };
       }
-
-      this.delayUpdateLocation();
-    } else if (this.state.location) {
-      this.setState({
+    } else if (state.location) {
+      return {
         location: DUMMY_LOCATION
-      });
+      };
     }
+
+    return state;
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
@@ -229,6 +222,10 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     if (wasClosed && !hasLocation && this.props.onClose) {
       this.props.onClose();
     }
+
+    if (this.props.opened) {
+      this.delayUpdateLocation();
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -255,42 +252,52 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
     var location = this.state.location;
     var _this$props = this.props,
         anchorElement = _this$props.anchorElement,
         useWrapper = _this$props.useWrapper;
-    var child = null;
+    var anchor = null;
 
     if (isHTMLElement(anchorElement)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
-      child = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
+      anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
     } else {
-      child = /*#__PURE__*/React.createElement("span", null, anchorElement);
+      anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
     }
 
-    return /*#__PURE__*/React.createElement(RenderContainer, {
-      anchor: child,
-      ref: child ? this.refAnchorElement : undefined
-    }, location && this.renderContent(location));
-  };
+    var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
+      ref: function ref(instance) {
+        var _anchor;
 
-  _proto.extractElement = function extractElement(instance) {
-    if (!instance) {
-      return null;
-    }
+        _this3.updateAnchorElement(instance);
 
-    var element = findDOMNode(instance);
-    return isHTMLElement(element) ? element : null;
+        var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;
+        originalRef && callChildRef(originalRef, instance);
+      }
+    }) : null; // we need to get anchor's DOM node
+    // so we either set our own ref on it via cloning
+    // or relay on findDOMNode (inside getRootNode)
+    // which should be called with RenderContainer's ref
+    // in the case when the anchor is not refable
+
+    return /*#__PURE__*/React.createElement(RenderContainer, {
+      anchor: anchorWithRef || anchor,
+      ref: anchorWithRef ? null : this.renderContainerRef
+    }, location && this.renderContent(location));
   };
 
-  _proto.updateAnchorElement = function updateAnchorElement(element) {
+  _proto.updateAnchorElement = function updateAnchorElement(childInstance) {
+    var childDomNode = getRootNode(childInstance);
     var anchorElement = this.anchorElement;
 
-    if (element !== anchorElement) {
+    if (childDomNode !== anchorElement) {
       this.removeEventListeners(anchorElement);
-      this.anchorElement = element;
-      this.addEventListeners(element);
+      this.anchorElement = childDomNode;
+      this.addEventListeners(childDomNode);
+      this.setRootNode(childDomNode);
     }
   };
 
@@ -315,7 +322,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderContent = function renderContent(location) {
-    var _this3 = this;
+    var _this4 = this;
 
     var _this$props2 = this.props,
         backgroundColor = _this$props2.backgroundColor,
@@ -343,28 +350,30 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       unmountOnExit: true,
       enter: !disableAnimations,
       exit: !disableAnimations,
-      onExited: this.resetLocation
+      onExited: this.resetLocation,
+      nodeRef: this.refForTransition
     }, function (state) {
       var _extends2, _ref;
 
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, /*#__PURE__*/React.createElement(ZIndex, {
-        ref: _this3.refPopupElement,
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this4.props, /*#__PURE__*/React.createElement(ZIndex, {
+        wrapperRef: _this4.refPopupElement,
         priority: 'Popup',
-        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this3.theme)] = true, _extends2[styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this3.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
+        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this4.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
-        onMouseEnter: _this3.handleMouseEnter,
-        onMouseLeave: _this3.handleMouseLeave
+        onMouseEnter: _this4.handleMouseEnter,
+        onMouseLeave: _this4.handleMouseLeave
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.content(_this3.theme),
-        "data-tid": 'PopupContent'
+        className: styles.content(_this4.theme),
+        "data-tid": 'PopupContent',
+        ref: _this4.refForTransition
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.contentInner(_this3.theme),
+        className: styles.contentInner(_this4.theme),
         style: {
           backgroundColor: backgroundColor,
-          width: _this3.calculateWidth(width)
+          width: _this4.calculateWidth(width)
         },
         "data-tid": 'PopupContentInner'
-      }, children)), _this3.renderPin(location.position)));
+      }, children)), _this4.renderPin(location.position)));
     });
   };
 
@@ -418,7 +427,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       return false;
     }
 
-    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    if (!isIE11 && !isEdge) {
+      return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    } // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
+
+    return x.position === y.position && Math.abs(x.coordinates.top - y.coordinates.top) <= 1 && Math.abs(x.coordinates.left - y.coordinates.left) <= 1;
   };
 
   _proto.getLocation = function getLocation(popupElement, location) {
@@ -576,9 +591,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   return Popup;
-}(React.Component);
-Popup.__KONTUR_REACT_UI__ = 'Popup';
-Popup.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = {
   /**
   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
   */
@@ -639,8 +652,7 @@ Popup.propTypes = {
   * Игнорировать ли события hover/click
   */
   ignoreHover: PropTypes.bool
-};
-Popup.defaultProps = {
+}, _class2.defaultProps = {
   popupOffset: 0,
   hasPin: false,
   hasShadow: false,
@@ -648,4 +660,4 @@ Popup.defaultProps = {
   useWrapper: false,
   ignoreHover: false,
   width: 'auto'
-};
+}, _temp)) || _class;