@skbkontur/react-ui 5.5.2 → 5.6.1-85c65.0

package/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.styles.d.ts

@@ -1,8 +1,8 @@
 import type { Theme } from '../../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const getJsStyles: import("../../../lib/theming/Emotion").StylesGetter<{
     root(t: Theme): string;
     rootWithoutContent(): string;
     container(): string;
     caption(t: Theme): string;
     captionWithChildren(): string;
-};
+}>;

package/internal/NativeDateInput/NativeDateInput/NativeDateInput.js

@@ -1,10 +1,12 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class, _NativeDateInput;
 import React from 'react';
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
 import { getDateForNative, getDateForComponent } from "../utils";
-import { jsStyles } from "../NativeDateInput.styles";
+import { getJsStyles } from "../NativeDateInput.styles";
 var DEFAULT_MIN_DATE = '1900-01-01';
 var DEFAULT_MAX_DATE = '2099-12-31';
-export var NativeDateInput = /*#__PURE__*/function (_React$Component) {
+export var NativeDateInput = withRenderEnvironment(_class = (_NativeDateInput = /*#__PURE__*/function (_React$Component) {
   function NativeDateInput() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -38,6 +40,7 @@ export var NativeDateInput = /*#__PURE__*/function (_React$Component) {
   var _proto = NativeDateInput.prototype;
   _proto.render = function render() {
     var _this2 = this;
+    this.jsStyles = getJsStyles(this.emotion);
     return /*#__PURE__*/React.createElement("input", {
       type: 'date',
       max: this.props.maxDate ? getDateForNative(this.props.maxDate) : DEFAULT_MAX_DATE,
@@ -48,13 +51,11 @@ export var NativeDateInput = /*#__PURE__*/function (_React$Component) {
           _this2.props.onValueChange(getDateForComponent(e.target.value));
         }
       },
-      className: jsStyles.inputTypeDate(),
+      className: this.jsStyles.inputTypeDate(),
       ref: this.refInput,
       disabled: this.props.disabled,
       tabIndex: -1
     });
   };
   return NativeDateInput;
-}(React.Component);
-NativeDateInput.__KONTUR_REACT_UI__ = 'NativeDatePicker';
-NativeDateInput.displayName = 'NativeDatePicker';
+}(React.Component), _NativeDateInput.__KONTUR_REACT_UI__ = 'NativeDatePicker', _NativeDateInput.displayName = 'NativeDatePicker', _NativeDateInput)) || _class;

package/internal/NativeDateInput/NativeDateInput/NativeDateInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getDateForNative","getDateForComponent","jsStyles","DEFAULT_MIN_DATE","DEFAULT_MAX_DATE","NativeDateInput","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","focus","input","click","refInput","element","_inheritsLoose","_proto","prototype","render","_this2","createElement","type","max","props","maxDate","min","minDate","value","onChange","e","onValueChange","target","className","inputTypeDate","ref","disabled","tabIndex","Component","__KONTUR_REACT_UI__","displayName"],"sources":["NativeDateInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport { getDateForNative, getDateForComponent } from './utils';\nimport { jsStyles } from './NativeDateInput.styles';\n\nexport interface NativeDateInputProps {\n  onValueChange?: (value: string) => void;\n  value: Nullable<string>;\n  minDate?: Nullable<string>;\n  maxDate?: Nullable<string>;\n  disabled?: boolean;\n}\n\nconst DEFAULT_MIN_DATE = '1900-01-01';\nconst DEFAULT_MAX_DATE = '2099-12-31';\n\nexport class NativeDateInput extends React.Component<NativeDateInputProps> {\n  public static __KONTUR_REACT_UI__ = 'NativeDatePicker';\n  public static displayName = 'NativeDatePicker';\n\n  private input: Nullable<HTMLInputElement>;\n\n  public render() {\n    return (\n      <input\n        type={'date'}\n        max={this.props.maxDate ? getDateForNative(this.props.maxDate) : DEFAULT_MAX_DATE}\n        min={this.props.minDate ? getDateForNative(this.props.minDate) : DEFAULT_MIN_DATE}\n        value={getDateForNative(this.props.value)}\n        onChange={(e) => {\n          if (this.props.onValueChange) {\n            this.props.onValueChange(getDateForComponent(e.target.value));\n          }\n        }}\n        className={jsStyles.inputTypeDate()}\n        ref={this.refInput}\n        disabled={this.props.disabled}\n        tabIndex={-1}\n      />\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public click = () => {\n    if (this.input) {\n      this.input.click();\n    }\n  };\n\n  private refInput = (element: Nullable<HTMLInputElement>) => {\n    this.input = element;\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;;;AAIzB,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,SAAS;AAC/D,SAASC,QAAQ,QAAQ,0BAA0B;;;;;;;;;;AAUnD,IAAMC,gBAAgB,GAAG,YAAY;AACrC,IAAMC,gBAAgB,GAAG,YAAY;;AAErC,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0B1B;AACF;AACA,OAFEJ,KAAA;IAGOU,KAAK,GAAG,YAAM;MACnB,IAAIV,KAAA,CAAKW,KAAK,EAAE;QACdX,KAAA,CAAKW,KAAK,CAACD,KAAK,CAAC,CAAC;MACpB;IACF,CAAC;;IAED;AACF;AACA,OAFEV,KAAA;IAGOY,KAAK,GAAG,YAAM;MACnB,IAAIZ,KAAA,CAAKW,KAAK,EAAE;QACdX,KAAA,CAAKW,KAAK,CAACC,KAAK,CAAC,CAAC;MACpB;IACF,CAAC,CAAAZ,KAAA;;IAEOa,QAAQ,GAAG,UAACC,OAAmC,EAAK;MAC1Dd,KAAA,CAAKW,KAAK,GAAGG,OAAO;IACtB,CAAC,QAAAd,KAAA,EAAAe,cAAA,CAAAjB,eAAA,EAAAC,gBAAA,MAAAiB,MAAA,GAAAlB,eAAA,CAAAmB,SAAA,CAAAD,MAAA,CAxCME,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACE3B,KAAA,CAAA4B,aAAA,YACEC,IAAI,EAAE,MAAO,EACbC,GAAG,EAAE,IAAI,CAACC,KAAK,CAACC,OAAO,GAAG/B,gBAAgB,CAAC,IAAI,CAAC8B,KAAK,CAACC,OAAO,CAAC,GAAG3B,gBAAiB,EAClF4B,GAAG,EAAE,IAAI,CAACF,KAAK,CAACG,OAAO,GAAGjC,gBAAgB,CAAC,IAAI,CAAC8B,KAAK,CAACG,OAAO,CAAC,GAAG9B,gBAAiB,EAClF+B,KAAK,EAAElC,gBAAgB,CAAC,IAAI,CAAC8B,KAAK,CAACI,KAAK,CAAE,EAC1CC,QAAQ,EAAE,SAAAA,SAACC,CAAC,EAAK,CACf,IAAIV,MAAI,CAACI,KAAK,CAACO,aAAa,EAAE,CAC5BX,MAAI,CAACI,KAAK,CAACO,aAAa,CAACpC,mBAAmB,CAACmC,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC,CAAC,CAC/D,CACF,CAAE,EACFK,SAAS,EAAErC,QAAQ,CAACsC,aAAa,CAAC,CAAE,EACpCC,GAAG,EAAE,IAAI,CAACrB,QAAS,EACnBsB,QAAQ,EAAE,IAAI,CAACZ,KAAK,CAACY,QAAS,EAC9BC,QAAQ,EAAE,CAAC,CAAE,EACd,CAAC,CAEN,CAAC,QAAAtC,eAAA,GAxBkCN,KAAK,CAAC6C,SAAS,EAAvCvC,eAAe,CACZwC,mBAAmB,GAAG,kBAAkB,CAD3CxC,eAAe,CAEZyC,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["React","withRenderEnvironment","getDateForNative","getDateForComponent","getJsStyles","DEFAULT_MIN_DATE","DEFAULT_MAX_DATE","NativeDateInput","_class","_NativeDateInput","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","focus","input","click","refInput","element","_inheritsLoose","_proto","prototype","render","_this2","jsStyles","emotion","createElement","type","max","props","maxDate","min","minDate","value","onChange","e","onValueChange","target","className","inputTypeDate","ref","disabled","tabIndex","Component","__KONTUR_REACT_UI__","displayName"],"sources":["NativeDateInput.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getDateForNative, getDateForComponent } from './utils';\nimport { getJsStyles } from './NativeDateInput.styles';\n\nexport interface NativeDateInputProps {\n  onValueChange?: (value: string) => void;\n  value: Nullable<string>;\n  minDate?: Nullable<string>;\n  maxDate?: Nullable<string>;\n  disabled?: boolean;\n}\n\nconst DEFAULT_MIN_DATE = '1900-01-01';\nconst DEFAULT_MAX_DATE = '2099-12-31';\n\n@withRenderEnvironment\nexport class NativeDateInput extends React.Component<NativeDateInputProps> {\n  public static __KONTUR_REACT_UI__ = 'NativeDatePicker';\n  public static displayName = 'NativeDatePicker';\n\n  private emotion!: Emotion;\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private input: Nullable<HTMLInputElement>;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\n\n    return (\n      <input\n        type={'date'}\n        max={this.props.maxDate ? getDateForNative(this.props.maxDate) : DEFAULT_MAX_DATE}\n        min={this.props.minDate ? getDateForNative(this.props.minDate) : DEFAULT_MIN_DATE}\n        value={getDateForNative(this.props.value)}\n        onChange={(e) => {\n          if (this.props.onValueChange) {\n            this.props.onValueChange(getDateForComponent(e.target.value));\n          }\n        }}\n        className={this.jsStyles.inputTypeDate()}\n        ref={this.refInput}\n        disabled={this.props.disabled}\n        tabIndex={-1}\n      />\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public click = () => {\n    if (this.input) {\n      this.input.click();\n    }\n  };\n\n  private refInput = (element: Nullable<HTMLInputElement>) => {\n    this.input = element;\n  };\n}\n"],"mappings":"mGAAA,OAAOA,KAAK,MAAM,OAAO;;;;AAIzB,SAASC,qBAAqB,QAAQ,6BAA6B;;AAEnE,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,SAAS;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;;;;;;;;;;AAUtD,IAAMC,gBAAgB,GAAG,YAAY;AACrC,IAAMC,gBAAgB,GAAG,YAAY;;AAErC;AACaC,eAAe,GAD3BN,qBAAqB,CAAAO,MAAA,IAAAC,gBAAA,0BAAAC,gBAAA,YAAAH,gBAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BpB;AACF;AACA,OAFEJ,KAAA;IAGOU,KAAK,GAAG,YAAY;MACzB,IAAIV,KAAA,CAAKW,KAAK,EAAE;QACdX,KAAA,CAAKW,KAAK,CAACD,KAAK,CAAC,CAAC;MACpB;IACF,CAAC;;IAED;AACF;AACA,OAFEV,KAAA;IAGOY,KAAK,GAAG,YAAM;MACnB,IAAIZ,KAAA,CAAKW,KAAK,EAAE;QACdX,KAAA,CAAKW,KAAK,CAACC,KAAK,CAAC,CAAC;MACpB;IACF,CAAC,CAAAZ,KAAA;;IAEOa,QAAQ,GAAG,UAACC,OAAmC,EAAK;MAC1Dd,KAAA,CAAKW,KAAK,GAAGG,OAAO;IACtB,CAAC,QAAAd,KAAA,EAAAe,cAAA,CAAAnB,eAAA,EAAAG,gBAAA,MAAAiB,MAAA,GAAApB,eAAA,CAAAqB,SAAA,CAAAD,MAAA,CA1CME,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,IAAI,CAACC,QAAQ,GAAG3B,WAAW,CAAC,IAAI,CAAC4B,OAAO,CAAC,CAEzC,oBACEhC,KAAA,CAAAiC,aAAA,YACEC,IAAI,EAAE,MAAO,EACbC,GAAG,EAAE,IAAI,CAACC,KAAK,CAACC,OAAO,GAAGnC,gBAAgB,CAAC,IAAI,CAACkC,KAAK,CAACC,OAAO,CAAC,GAAG/B,gBAAiB,EAClFgC,GAAG,EAAE,IAAI,CAACF,KAAK,CAACG,OAAO,GAAGrC,gBAAgB,CAAC,IAAI,CAACkC,KAAK,CAACG,OAAO,CAAC,GAAGlC,gBAAiB,EAClFmC,KAAK,EAAEtC,gBAAgB,CAAC,IAAI,CAACkC,KAAK,CAACI,KAAK,CAAE,EAC1CC,QAAQ,EAAE,SAAAA,SAACC,CAAC,EAAK,CACf,IAAIZ,MAAI,CAACM,KAAK,CAACO,aAAa,EAAE,CAC5Bb,MAAI,CAACM,KAAK,CAACO,aAAa,CAACxC,mBAAmB,CAACuC,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC,CAAC,CAC/D,CACF,CAAE,EACFK,SAAS,EAAE,IAAI,CAACd,QAAQ,CAACe,aAAa,CAAC,CAAE,EACzCC,GAAG,EAAE,IAAI,CAACvB,QAAS,EACnBwB,QAAQ,EAAE,IAAI,CAACZ,KAAK,CAACY,QAAS,EAC9BC,QAAQ,EAAE,CAAC,CAAE,EACd,CAAC,CAEN,CAAC,QAAA1C,eAAA,GA5BkCP,KAAK,CAACkD,SAAS,GAAAzC,gBAAA,CACpC0C,mBAAmB,GAAG,kBAAkB,EAAA1C,gBAAA,CACxC2C,WAAW,GAAG,kBAAkB,EAAA3C,gBAAA,MAAAD,MAAA","ignoreList":[]}

package/internal/NativeDateInput/NativeDateInput.d.ts

@@ -10,6 +10,8 @@ export interface NativeDateInputProps {
 export declare class NativeDateInput extends React.Component<NativeDateInputProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    private emotion;
+    private jsStyles;
     private input;
     render(): React.JSX.Element;
     /**

package/internal/NativeDateInput/NativeDateInput.styles/NativeDateInput.styles.js

@@ -1,9 +1,11 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  inputTypeDate: function inputTypeDate() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    "])));
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getJsStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    inputTypeDate: function inputTypeDate() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    "])));
+    }
+  };
+});

package/internal/NativeDateInput/NativeDateInput.styles/NativeDateInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","inputTypeDate","_templateObject","_taggedTemplateLiteralLoose","jsStyles"],"sources":["NativeDateInput.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nconst styles = {\n  inputTypeDate() {\n    return css`\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"oHAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,IAAMC,MAAM,GAAG;EACbC,aAAa,WAAAA,cAAA,EAAG;IACd,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;;EAWZ;AACF,CAAC;;AAED,OAAO,IAAMC,QAAQ,GAAGL,YAAY,CAACC,MAAM,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","getJsStyles","_ref","css","inputTypeDate","_templateObject","_taggedTemplateLiteralLoose"],"sources":["NativeDateInput.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  inputTypeDate() {\n    return css`\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    `;\n  },\n}));\n"],"mappings":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;AAE5D,OAAO,IAAMC,WAAW,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IACjEC,aAAa,WAAAA,cAAA,EAAG;MACd,OAAOD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;;IAWZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

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

@@ -1,3 +1,3 @@
-export declare const jsStyles: {
+export declare const getJsStyles: import("../../lib/theming/Emotion").StylesGetter<{
     inputTypeDate(): string;
-};
+}>;

package/internal/Popup/Popup/Popup.js

@@ -5,31 +5,27 @@ var _class, _Popup;
 import React from 'react';
 import { Transition } from 'react-transition-group';
 import warning from 'warning';
-import { globalObject } from '@skbkontur/global-object';
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
 import { getRandomID, isFunction, isNonNullable, isNullable, isRefableElement } from "../../../lib/utils";
-import { isIE11, isEdge } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
 import { MobilePopup } from "../../MobilePopup";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { isInstanceWithAnchorElement } from "../../../lib/InstanceWithAnchorElement";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
-import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
 import { mergeRefs } from "../../../lib/mergeRefs";
 import { getVisualStateDataAttributes } from "../../CommonWrapper/utils/getVisualStateDataAttributes";
-import { PopupPinNew } from "../PopupPinNew";
-import { PopupHelper } from "../PopupHelper";
-import { styles } from "../Popup.styles";
+import { getElementRef } from "../../../lib/getElementRef";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
 import { PopupPin } from "../PopupPin";
-var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
+import { PopupHelper } from "../PopupHelper";
+import { getStyles } from "../Popup.styles";
 var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
@@ -55,7 +51,7 @@ export var PopupDataTids = {
 export var PopupIds = {
   root: PopupDataTids.root
 };
-export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PURE__*/function (_React$Component) {
+export var Popup = withRenderEnvironment(_class = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PURE__*/function (_React$Component) {
   function Popup() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -89,7 +85,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
         }, anchor, location && /*#__PURE__*/
         React.createElement("div", {
           ref: _this.updateAbsoluteElement,
-          className: styles.absoluteParent()
+          className: _this.styles.absoluteParent()
         }, _this.renderContent(location)))
       );
     };
@@ -146,13 +142,13 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
         minWidth = _this$getProps.minWidth;
       return /*#__PURE__*/(
         React.createElement("div", {
-          className: styles.content(_this.theme),
+          className: _this.styles.content(_this.theme),
           "data-tid": PopupDataTids.content,
           ref: mergeRefs(_this.refForTransition, _this.refPopupContentElement)
         }, /*#__PURE__*/
 
         React.createElement("div", {
-          className: styles.contentInner(_this.theme),
+          className: _this.styles.contentInner(_this.theme),
           style: {
             backgroundColor: backgroundColor,
             width: _this.calculateWidth(width),
@@ -223,7 +219,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
   var _proto = Popup.prototype;
   _proto.componentDidMount = function componentDidMount() {
     this.updateLocation();
-    this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+    this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent, this.globalObject);
     if (!this.hasAnchorElementListeners) {
       this.addEventListeners(this.anchorElement);
     }
@@ -279,12 +275,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
   };
   _proto.render = function render() {
     var _this3 = this;
-    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
-      _this3.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this3.theme = theme;
-        return _this3.renderMain();
-      });
+    this.styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this3.theme = theme;
+      return _this3.renderMain();
     });
   };
   _proto.renderMobile = function renderMobile() {
@@ -299,11 +293,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     }, this.content(children))) : null;
   };
   _proto.renderMain = function renderMain() {
-    var _anchor;
     var anchorElement = this.props.anchorElement;
     var useWrapper = this.getProps().useWrapper;
     var anchor = null;
-    if (isInstanceOf(anchorElement, globalObject.Element)) {
+    if (isInstanceOf(anchorElement, this.globalObject.Element)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
       anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
@@ -311,19 +304,19 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
       anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
     }
     var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
-      ref: mergeRefs((_anchor = anchor) == null ? void 0 : _anchor.ref, this.updateAnchorElement)
+      ref: mergeRefs(getElementRef(anchor), this.updateAnchorElement)
     }) : 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 within updateAnchorElement
     // in the case when the anchor is not refable
-    var canGetAnchorNode = !!anchorWithRef || isInstanceOf(anchorElement, globalObject.Element);
+    var canGetAnchorNode = !!anchorWithRef || isInstanceOf(anchorElement, this.globalObject.Element);
     var renderRef = canGetAnchorNode ? null : this.updateAnchorElement;
     var renderAnchor = anchorWithRef || anchor;
     return this.props.disablePortal ? this.renderWithoutPortal(renderAnchor, renderRef) : this.renderInPortal(renderAnchor, renderRef);
   };
   _proto.addEventListeners = function addEventListeners(element) {
-    if (element && isInstanceOf(element, globalObject.Element)) {
+    if (element && isInstanceOf(element, this.globalObject.Element)) {
       // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
       element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
       element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
@@ -334,7 +327,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     }
   };
   _proto.removeEventListeners = function removeEventListeners(element) {
-    if (element && isInstanceOf(element, globalObject.Element)) {
+    if (element && isInstanceOf(element, this.globalObject.Element)) {
       // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
       element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
       element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
@@ -380,7 +373,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
         id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId,
         "data-tid": PopupDataTids.root,
         priority: _this4.props.priority,
-        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow, _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))),
+        className: _this4.cx(_extends((_extends2 = {}, _extends2[_this4.styles.popup(_this4.theme)] = true, _extends2[_this4.styles.shadow(_this4.theme)] = hasShadow, _extends2[_this4.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_this4.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_this4.styles.transitionEnter()] = state === 'entering', _ref[_this4.styles.transitionEnterActive()] = state === 'entered', _ref[_this4.styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
         onMouseEnter: _this4.handleMouseEnter,
         onMouseLeave: _this4.handleMouseLeave
@@ -391,39 +384,29 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     return isFunction(this.props.children) ? this.props.children() : this.props.children;
   };
   _proto.renderPin = function renderPin(positionName) {
-    var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
-    var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
     var _this$props2 = this.props,
       pinSize = _this$props2.pinSize,
-      backgroundColor = _this$props2.backgroundColor,
-      borderColor = _this$props2.borderColor;
+      backgroundColor = _this$props2.backgroundColor;
     var _this$getProps3 = this.getProps(),
-      hasShadow = _this$getProps3.hasShadow,
       hasPin = _this$getProps3.hasPin;
     var position = PopupHelper.getPositionObject(positionName);
-    return hasPin && !PopupNonPinnablePositions.includes(positionName) && (this.featureFlags.popupFixPinTearing ? /*#__PURE__*/React.createElement(PopupPinNew, {
+    return hasPin && !PopupNonPinnablePositions.includes(positionName) && /*#__PURE__*/React.createElement(PopupPin, {
       popupElement: this.lastPopupContentElement,
       popupPosition: positionName,
       size: pinSize || parseInt(this.theme.popupPinSize),
       offset: this.getPinOffset(position.align),
       backgroundColor: backgroundColor || this.theme.popupBackground
-    }) : /*#__PURE__*/React.createElement(PopupPin, {
-      popupElement: this.lastPopupContentElement,
-      popupPosition: positionName,
-      size: pinSize || parseInt(this.theme.popupPinSize),
-      offset: this.getPinOffset(position.align),
-      borderWidth: hasShadow ? 1 : 0,
-      backgroundColor: backgroundColor || this.theme.popupBackground,
-      borderColor: borderColor || pinBorder
-    }));
+    });
   };
   _proto.delayUpdateLocation = function delayUpdateLocation() {
+    var _this$globalObject$re, _this$globalObject;
     this.cancelDelayedUpdateLocation();
-    this.locationUpdateId = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(this.updateLocation);
+    this.locationUpdateId = (_this$globalObject$re = (_this$globalObject = this.globalObject).requestAnimationFrame) == null ? void 0 : _this$globalObject$re.call(_this$globalObject, this.updateLocation);
   };
   _proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {
     if (this.locationUpdateId) {
-      globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(this.locationUpdateId);
+      var _this$globalObject$ca, _this$globalObject2;
+      (_this$globalObject$ca = (_this$globalObject2 = this.globalObject).cancelAnimationFrame) == null || _this$globalObject$ca.call(_this$globalObject2, this.locationUpdateId);
       this.locationUpdateId = null;
     }
   };
@@ -434,11 +417,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     if (isNullable(x) || isNullable(y)) {
       return false;
     }
-    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;
+    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
   };
   _proto.reorderPropsPositionsWithPriorityPos = function reorderPropsPositionsWithPriorityPos() {
     var positions = this.props.positions ? this.props.positions : PopupPinnablePositions;
@@ -462,8 +441,8 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
       tryPreserveFirstRenderedPosition = _this$getProps4.tryPreserveFirstRenderedPosition;
     var positions = this.reorderPropsPositionsWithPriorityPos();
     var anchorElement = this.anchorElement;
-    warning(anchorElement && isInstanceOf(anchorElement, globalObject.Element), 'Anchor element is not defined or not instance of Element');
-    if (!(anchorElement && isInstanceOf(anchorElement, globalObject.Element))) {
+    warning(anchorElement && isInstanceOf(anchorElement, this.globalObject.Element), 'Anchor element is not defined or not instance of Element');
+    if (!(anchorElement && isInstanceOf(anchorElement, this.globalObject.Element))) {
       return location;
     }
     var anchorRect = PopupHelper.getElementAbsoluteRect(anchorElement);
@@ -473,8 +452,8 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     if (location && location !== DUMMY_LOCATION && location.position) {
       position = location.position;
       coordinates = this.getCoordinates(anchorRect, popupRect, position);
-      var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect);
-      var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates);
+      var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject);
+      var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates, this.globalObject);
       if (
       // если нужно сохранить первоначальную позицию и Попап целиком
       // находится в пределах вьюпорта (или может быть проскроллен в него)
@@ -493,7 +472,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     for (var _iterator = _createForOfIteratorHelperLoose(positions), _step; !(_step = _iterator()).done;) {
       position = _step.value;
       coordinates = this.getCoordinates(anchorRect, popupRect, position);
-      if (PopupHelper.isFullyVisible(coordinates, popupRect)) {
+      if (PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject)) {
         return {
           coordinates: coordinates,
           position: position,
@@ -522,12 +501,13 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
     var margin = isNonNullable(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;
     var position = PopupHelper.getPositionObject(positionName);
     var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+    var defaultCoordinates = {
+      top: anchorRect.top - popupRect.height - margin,
+      left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
+    };
     switch (position.direction) {
       case 'top':
-        return {
-          top: anchorRect.top - popupRect.height - margin,
-          left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset)
-        };
+        return defaultCoordinates;
       case 'middle':
         return {
           top: anchorRect.top + anchorRect.height / 2 - popupRect.height / 2,
@@ -549,15 +529,17 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
           left: anchorRect.left + anchorRect.width + margin
         };
       default:
-        throw new Error("Unexpected direction '" + position.direction + "'");
+        warning(false, "Unexpected align '" + position.direction + "'. Must be one of - 'top', 'bottom', 'left', 'right', 'center', 'middle'. Returning default value.");
+        return defaultCoordinates;
     }
   };
   _proto.getPinOffset = function getPinOffset(align) {
     var pinOffset = this.props.pinOffset;
+    var defaultPinOffset = pinOffset || parseInt(this.theme.popupPinOffsetY);
     switch (align) {
       case 'top':
       case 'bottom':
-        return pinOffset || parseInt(this.theme.popupPinOffsetY);
+        return defaultPinOffset;
       case 'left':
       case 'right':
         return pinOffset || parseInt(this.theme.popupPinOffsetX);
@@ -565,31 +547,36 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
       case 'middle':
         return 0;
       default:
-        throw new Error("Unexpected align '" + align + "'");
+        warning(false, "Unexpected align '" + align + "'. Must be one of - 'top', 'bottom', 'left', 'right', 'center', 'middle'. Returning default value.");
+        return defaultPinOffset;
     }
   };
   _proto.getHorizontalPosition = function getHorizontalPosition(anchorRect, popupRect, align, popupOffset) {
+    var defaultHorizontalPosition = anchorRect.left - (popupRect.width - anchorRect.width) / 2;
     switch (align) {
       case 'left':
         return anchorRect.left - popupOffset;
       case 'center':
-        return anchorRect.left - (popupRect.width - anchorRect.width) / 2;
+        return defaultHorizontalPosition;
       case 'right':
         return anchorRect.left - (popupRect.width - anchorRect.width) + popupOffset;
       default:
-        throw new Error("Unexpected align '" + align + "'");
+        warning(false, "Unexpected align '" + align + "'. Must be one of - 'left', 'center', 'right'. Returning default value.");
+        return defaultHorizontalPosition;
     }
   };
   _proto.getVerticalPosition = function getVerticalPosition(anchorRect, popupRect, align, popupOffset) {
+    var defaultVerticalPosition = anchorRect.top - popupOffset;
     switch (align) {
       case 'top':
-        return anchorRect.top - popupOffset;
+        return defaultVerticalPosition;
       case 'middle':
         return anchorRect.top - (popupRect.height - anchorRect.height) / 2;
       case 'bottom':
         return anchorRect.top - (popupRect.height - anchorRect.height) + popupOffset;
       default:
-        throw new Error("Unexpected align '" + align + "'");
+        warning(false, "Unexpected align '" + align + "'. Must be one of - 'top', 'middle', 'bottom'. Returning default value.");
+        return defaultVerticalPosition;
     }
   };
   return Popup;
@@ -603,7 +590,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_Popup = /*#__PU
   disablePortal: false,
   width: 'auto',
   priority: ZIndex.priorities.Popup
-}, _Popup.defaultRootNode = null, _Popup)) || _class) || _class;
+}, _Popup.defaultRootNode = null, _Popup)) || _class) || _class) || _class;
 
 // Нужно, чтобы получать по рефу dom-элемент, в который зарендерится anchor
 var EmptyWrapper = /*#__PURE__*/function (_React$Component2) {