npm - @skbkontur/react-ui - Versions diffs - 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d - Mend

@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2409) hide show

package/internal/Popup/PopupPin/PopupPin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PopupPin.tsx"],"names":["React","PropTypes","PopupHelper","jsStyles","borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","render","props","popupElement","options","getPinOptions","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","wrapper","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","width","height","borderWitdth","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","Component","__KONTUR_REACT_UI__","propTypes","string","number","any"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Nullable } from '../../typings/utility-types';\r\n\r\nimport { PopupHelper, PositionObject, Rect } from './PopupHelper';\r\nimport { jsStyles } from './PopupPin.styles';\r\n\r\nconst borderStyles = {\r\n position: 'absolute',\r\n borderStyle: 'solid',\r\n borderTopColor: 'transparent',\r\n borderBottomColor: 'transparent',\r\n borderLeftColor: 'transparent',\r\n borderRightColor: 'transparent',\r\n};\r\n\r\ninterface Props {\r\n backgroundColor: string;\r\n borderColor: string;\r\n borderWidth: number;\r\n offset: number;\r\n popupElement: Nullable<HTMLElement>;\r\n popupPosition: string;\r\n size: number;\r\n}\r\n\r\nexport class PopupPin extends React.Component<Props> {\r\n public static __KONTUR_REACT_UI__ = 'PopupPin';\r\n\r\n public static propTypes = {\r\n /*\r\n Цвет фон пина\r\n /\r\n backgroundColor: PropTypes.string,\r\n\r\n /\r\n Цвет границы пина\r\n /\r\n borderColor: PropTypes.string,\r\n\r\n /\r\n Ширина границы пина\r\n /\r\n borderWidth: PropTypes.number,\r\n\r\n /\r\n Смещение пина от края попапа. Край задаётся в пропе position вторым словом\r\n /\r\n offset: PropTypes.number,\r\n\r\n /\r\n Ссылка на попап\r\n /\r\n popupElement: PropTypes.any,\r\n\r\n /\r\n Позиция поапа, по которой будет вычеслено положение пина\r\n /\r\n popupPosition: PropTypes.string,\r\n\r\n /\r\n Сторона пина без учёта границы.\r\n * Пин представляет собой равносторонний треугольник, высота от попапа\r\n * до \"носика\" пина будет соответствовать формуле (size* √3)/2\r\n /\r\n size: PropTypes.number,\r\n };\r\n\r\n public render() {\r\n if (!this.props.popupElement) {\r\n return null;\r\n }\r\n\r\n const options = this.getPinOptions(\r\n PopupHelper.getElementAbsoluteRect(this.props.popupElement),\r\n PopupHelper.getPositionObject(this.props.popupPosition),\r\n this.props.size,\r\n this.props.offset,\r\n this.props.borderWidth,\r\n );\r\n\r\n const styleOuter: React.CSSProperties = this.getOuterStyle(\r\n options.activeBorder,\r\n options.outerSize,\r\n this.props.borderColor,\r\n );\r\n\r\n const styleInner: React.CSSProperties = this.getInnerStyle(\r\n options.activeBorder,\r\n this.props.size,\r\n this.props.backgroundColor,\r\n );\r\n\r\n const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\r\n\r\n return (\r\n <div className={jsStyles.wrapper()} style={styleWrapper}>\r\n <div style={styleOuter}>\r\n <div style={styleInner} />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n private getPopupOppositeDirection(): 'bottom' \| 'top' \| 'left' \| 'right' {\r\n const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\r\n switch (popupDirection) {\r\n case 'top':\r\n return 'bottom';\r\n case 'bottom':\r\n return 'top';\r\n case 'left':\r\n return 'right';\r\n case 'right':\r\n return 'left';\r\n default:\r\n throw new TypeError('Unknown direction ' + popupDirection);\r\n }\r\n }\r\n\r\n private getWrapperStyle(left: number, top: number, borderWidth: number) {\r\n const direction = this.getPopupOppositeDirection();\r\n switch (direction) {\r\n case 'top':\r\n case 'bottom':\r\n return {\r\n [direction]: -borderWidth + 'px',\r\n left: left + 'px',\r\n width: borderWidth 2 + 'px',\r\n height: borderWidth + 'px',\r\n };\r\n case 'left':\r\n case 'right':\r\n return {\r\n [direction]: -borderWidth + 'px',\r\n top: top + 'px',\r\n height: borderWidth * 2 + 'px',\r\n width: borderWidth + 'px',\r\n };\r\n default:\r\n throw new TypeError('Unknown direction ' + direction);\r\n }\r\n }\r\n\r\n private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\r\n const direction = this.getPopupOppositeDirection();\r\n switch (direction) {\r\n case 'top':\r\n case 'bottom':\r\n return {\r\n ...borderStyles,\r\n [direction]: -borderWitdth + 'px',\r\n left: '0px',\r\n borderWidth: borderWitdth + 'px',\r\n ['border' + activeBorder + 'Color']: borderColor,\r\n } as React.CSSProperties;\r\n case 'left':\r\n case 'right':\r\n return {\r\n ...borderStyles,\r\n [direction]: -borderWitdth + 'px',\r\n top: '0px',\r\n borderWidth: borderWitdth + 'px',\r\n ['border' + activeBorder + 'Color']: borderColor,\r\n } as React.CSSProperties;\r\n default:\r\n throw new TypeError('Unknown direction ' + direction);\r\n }\r\n }\r\n\r\n private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\r\n const direction = this.getPopupOppositeDirection();\r\n switch (direction) {\r\n case 'top':\r\n case 'bottom':\r\n return {\r\n ...borderStyles,\r\n [direction]: -borderWitdth + 2 + 'px',\r\n left: -borderWitdth + 'px',\r\n borderWidth: borderWitdth + 'px',\r\n ['border' + activeBorder + 'Color']: borderColor,\r\n } as React.CSSProperties;\r\n case 'left':\r\n case 'right':\r\n return {\r\n ...borderStyles,\r\n [direction]: -borderWitdth + 2 + 'px',\r\n top: -borderWitdth + 'px',\r\n borderWidth: borderWitdth + 'px',\r\n ['border' + activeBorder + 'Color']: borderColor,\r\n } as React.CSSProperties;\r\n default:\r\n throw new TypeError('Unknown direction ' + direction);\r\n }\r\n }\r\n\r\n private getPinOptions(\r\n popupRect: Rect,\r\n popupPosition: PositionObject,\r\n pinSize: number,\r\n pinOffset: number,\r\n borderWidth: number,\r\n ) {\r\n const bordersDelta = 2 * borderWidth;\r\n const outerSize = pinSize + bordersDelta;\r\n\r\n switch (popupPosition.direction) {\r\n case 'top':\r\n return {\r\n outerTop: popupRect.height,\r\n outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\r\n innerTop: -outerSize,\r\n innerLeft: -outerSize + bordersDelta,\r\n activeBorder: 'Top',\r\n outerSize,\r\n };\r\n case 'bottom':\r\n return {\r\n outerTop: -2 * outerSize,\r\n outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\r\n innerTop: -outerSize + 2 * bordersDelta,\r\n innerLeft: -outerSize + bordersDelta,\r\n activeBorder: 'Bottom',\r\n outerSize,\r\n };\r\n case 'left':\r\n return {\r\n outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\r\n outerLeft: popupRect.width,\r\n innerTop: -outerSize + bordersDelta,\r\n innerLeft: -outerSize,\r\n activeBorder: 'Left',\r\n outerSize,\r\n };\r\n case 'right':\r\n return {\r\n outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\r\n outerLeft: -2 * outerSize,\r\n innerTop: -outerSize + bordersDelta,\r\n innerLeft: -outerSize + 2 * bordersDelta,\r\n activeBorder: 'Right',\r\n outerSize,\r\n };\r\n default:\r\n throw new Error('Direction must be one of top, right, bottom, left');\r\n }\r\n }\r\n\r\n private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\r\n switch (align) {\r\n case 'top':\r\n return pinOffset;\r\n case 'middle':\r\n return popupRect.height / 2 - pinHeight;\r\n case 'bottom':\r\n return popupRect.height - pinOffset - 2 * pinHeight;\r\n default:\r\n throw new Error(`Unexpected align '${align}'`);\r\n }\r\n }\r\n\r\n private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\r\n switch (align) {\r\n case 'left':\r\n return pinOffset;\r\n case 'center':\r\n return popupRect.width / 2 - pinHeight;\r\n case 'right':\r\n return popupRect.width - pinOffset - 2 * pinHeight;\r\n default:\r\n throw new Error(`Unexpected align '${align}'`);\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["PopupPin.tsx"],"names":["React","PropTypes","PopupHelper","styles","PopupDataTids","borderStyles","position","borderStyle","borderTopColor","borderBottomColor","borderLeftColor","borderRightColor","PopupPin","render","props","popupElement","options","getPinOptions","getElementAbsoluteRect","getPositionObject","popupPosition","size","offset","borderWidth","styleOuter","getOuterStyle","activeBorder","outerSize","borderColor","styleInner","getInnerStyle","backgroundColor","styleWrapper","getWrapperStyle","outerLeft","outerTop","popupPin","wrapper","getPopupOppositeDirection","popupDirection","direction","TypeError","left","top","width","height","borderWitdth","popupRect","pinSize","pinOffset","bordersDelta","getPinLeftCoordinate","align","innerTop","innerLeft","getPinTopCoordinate","Error","pinHeight","Component","__KONTUR_REACT_UI__","propTypes","string","number","any"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { PopupHelper, PositionObject, Rect } from './PopupHelper';\nimport { styles } from './PopupPin.styles';\nimport { PopupDataTids } from './Popup';\n\nconst borderStyles = {\n position: 'absolute',\n borderStyle: 'solid',\n borderTopColor: 'transparent',\n borderBottomColor: 'transparent',\n borderLeftColor: 'transparent',\n borderRightColor: 'transparent',\n};\n\ninterface Props {\n backgroundColor: string;\n borderColor: string;\n borderWidth: number;\n offset: number;\n popupElement: Nullable<Element>;\n popupPosition: string;\n size: number;\n}\n\nexport class PopupPin extends React.Component<Props> {\n public static __KONTUR_REACT_UI__ = 'PopupPin';\n\n public static propTypes = {\n /*\n Цвет фон пина\n /\n backgroundColor: PropTypes.string,\n\n /\n Цвет границы пина\n /\n borderColor: PropTypes.string,\n\n /\n Ширина границы пина\n /\n borderWidth: PropTypes.number,\n\n /\n Смещение пина от края попапа. Край задаётся в пропе position вторым словом\n /\n offset: PropTypes.number,\n\n /\n Ссылка на попап\n /\n popupElement: PropTypes.any,\n\n /\n Позиция поапа, по которой будет вычеслено положение пина\n /\n popupPosition: PropTypes.string,\n\n /\n Сторона пина без учёта границы.\n * Пин представляет собой равносторонний треугольник, высота от попапа\n * до \"носика\" пина будет соответствовать формуле (size* √3)/2\n /\n size: PropTypes.number,\n };\n\n public render() {\n if (!this.props.popupElement) {\n return null;\n }\n\n const options = this.getPinOptions(\n PopupHelper.getElementAbsoluteRect(this.props.popupElement),\n PopupHelper.getPositionObject(this.props.popupPosition),\n this.props.size,\n this.props.offset,\n this.props.borderWidth,\n );\n\n const styleOuter: React.CSSProperties = this.getOuterStyle(\n options.activeBorder,\n options.outerSize,\n this.props.borderColor,\n );\n\n const styleInner: React.CSSProperties = this.getInnerStyle(\n options.activeBorder,\n this.props.size,\n this.props.backgroundColor,\n );\n\n const styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);\n\n return (\n <div data-tid={PopupDataTids.popupPin} className={styles.wrapper()} style={styleWrapper}>\n <div style={styleOuter}>\n <div style={styleInner} />\n </div>\n </div>\n );\n }\n\n private getPopupOppositeDirection(): 'bottom' \| 'top' \| 'left' \| 'right' {\n const popupDirection = PopupHelper.getPositionObject(this.props.popupPosition).direction;\n switch (popupDirection) {\n case 'top':\n return 'bottom';\n case 'bottom':\n return 'top';\n case 'left':\n return 'right';\n case 'right':\n return 'left';\n default:\n throw new TypeError('Unknown direction ' + popupDirection);\n }\n }\n\n private getWrapperStyle(left: number, top: number, borderWidth: number) {\n const direction = this.getPopupOppositeDirection();\n switch (direction) {\n case 'top':\n case 'bottom':\n return {\n [direction]: -borderWidth + 'px',\n left: left + 'px',\n width: borderWidth 2 + 'px',\n height: borderWidth + 'px',\n };\n case 'left':\n case 'right':\n return {\n [direction]: -borderWidth + 'px',\n top: top + 'px',\n height: borderWidth * 2 + 'px',\n width: borderWidth + 'px',\n };\n default:\n throw new TypeError('Unknown direction ' + direction);\n }\n }\n\n private getOuterStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n const direction = this.getPopupOppositeDirection();\n switch (direction) {\n case 'top':\n case 'bottom':\n return {\n ...borderStyles,\n [direction]: -borderWitdth + 'px',\n left: '0px',\n borderWidth: borderWitdth + 'px',\n ['border' + activeBorder + 'Color']: borderColor,\n } as React.CSSProperties;\n case 'left':\n case 'right':\n return {\n ...borderStyles,\n [direction]: -borderWitdth + 'px',\n top: '0px',\n borderWidth: borderWitdth + 'px',\n ['border' + activeBorder + 'Color']: borderColor,\n } as React.CSSProperties;\n default:\n throw new TypeError('Unknown direction ' + direction);\n }\n }\n\n private getInnerStyle(activeBorder: string, borderWitdth: number, borderColor: string): React.CSSProperties {\n const direction = this.getPopupOppositeDirection();\n switch (direction) {\n case 'top':\n case 'bottom':\n return {\n ...borderStyles,\n [direction]: -borderWitdth + 2 + 'px',\n left: -borderWitdth + 'px',\n borderWidth: borderWitdth + 'px',\n ['border' + activeBorder + 'Color']: borderColor,\n } as React.CSSProperties;\n case 'left':\n case 'right':\n return {\n ...borderStyles,\n [direction]: -borderWitdth + 2 + 'px',\n top: -borderWitdth + 'px',\n borderWidth: borderWitdth + 'px',\n ['border' + activeBorder + 'Color']: borderColor,\n } as React.CSSProperties;\n default:\n throw new TypeError('Unknown direction ' + direction);\n }\n }\n\n private getPinOptions(\n popupRect: Rect,\n popupPosition: PositionObject,\n pinSize: number,\n pinOffset: number,\n borderWidth: number,\n ) {\n const bordersDelta = 2 * borderWidth;\n const outerSize = pinSize + bordersDelta;\n\n switch (popupPosition.direction) {\n case 'top':\n return {\n outerTop: popupRect.height,\n outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n innerTop: -outerSize,\n innerLeft: -outerSize + bordersDelta,\n activeBorder: 'Top',\n outerSize,\n };\n case 'bottom':\n return {\n outerTop: -2 * outerSize,\n outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n innerTop: -outerSize + 2 * bordersDelta,\n innerLeft: -outerSize + bordersDelta,\n activeBorder: 'Bottom',\n outerSize,\n };\n case 'left':\n return {\n outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n outerLeft: popupRect.width,\n innerTop: -outerSize + bordersDelta,\n innerLeft: -outerSize,\n activeBorder: 'Left',\n outerSize,\n };\n case 'right':\n return {\n outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) - bordersDelta,\n outerLeft: -2 * outerSize,\n innerTop: -outerSize + bordersDelta,\n innerLeft: -outerSize + 2 * bordersDelta,\n activeBorder: 'Right',\n outerSize,\n };\n default:\n throw new Error('Direction must be one of top, right, bottom, left');\n }\n }\n\n private getPinTopCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n switch (align) {\n case 'top':\n return pinOffset;\n case 'middle':\n return popupRect.height / 2 - pinHeight;\n case 'bottom':\n return popupRect.height - pinOffset - 2 * pinHeight;\n default:\n throw new Error(`Unexpected align '${align}'`);\n }\n }\n\n private getPinLeftCoordinate(popupRect: Rect, align: string, pinHeight: number, pinOffset: number) {\n switch (align) {\n case 'left':\n return pinOffset;\n case 'center':\n return popupRect.width / 2 - pinHeight;\n case 'right':\n return popupRect.width - pinOffset - 2 * pinHeight;\n default:\n throw new Error(`Unexpected align '${align}'`);\n }\n }\n}\n"]}

package/internal/Popup/PopupPin.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ interface Props {
     borderColor: string;
     borderWidth: number;
     offset: number;
-    popupElement: Nullable<HTMLElement>;
+    popupElement: Nullable<Element>;
     popupPosition: string;
     size: number;
 }

package/internal/Popup/PopupPin.styles/PopupPin.styles.js CHANGED Viewed

@@ -3,9 +3,8 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   wrapper: function wrapper() {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      position: absolute;\n      pointer-events: none;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/internal/Popup/PopupPin.styles/PopupPin.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PopupPin.styles.ts"],"names":["css","memoizeStyle","styles","wrapper"~~,"jsStyles"~~],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,~~GAAG~~;~~AACbC~~,EAAAA,~~OADa~~,~~qBACH~~;AACR,WAAOH,GAAP;;;;;AAKD,~~GAPY~~,~~EAAf;;;AAUA~~,~~OAAO,IAAMI,QAAQ,GAAGH,YAAY,CAACC,MAAD,CAA7B~~","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\~~r\nconst~~ styles = {\r\n wrapper() {\r\n return css`\r\n overflow: hidden;\r\n position: absolute;\r\n pointer-events: none;\r\n `;\r\n },\r\n}~~;\r\n\r\nexport const jsStyles = memoizeStyle(styles~~);\r\n"]}
1	+ {"version":3,"sources":["PopupPin.styles.ts"],"names":["css","memoizeStyle","styles","wrapper"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,qBACvB;AACR,WAAOH,GAAP;;;;;AAKD,GAPgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n wrapper() {\n return css`\n overflow: hidden;\n position: absolute;\n pointer-events: none;\n `;\n },\n});\n"]}

package/internal/Popup/PopupPin.styles.d.ts CHANGED Viewed

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

package/internal/Popup/index/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Popup';\r\n"]}
1	+ {"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Popup';\n"]}

package/internal/Popup/types/package.json ADDED Viewed

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

package/internal/Popup/types/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/internal/Popup/types/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/internal/Popup/types.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { PopupPositionsType as Type } from './Popup';
2	+ export declare type PopupPositionsType = Type;

package/internal/PopupMenu/PopupMenu/PopupMenu.js CHANGED Viewed

@@ -1,18 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class, _class2, _temp;
 import React from 'react';
 import { isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace, someKeys } from "../../../lib/events/keyboard/identifiers";
 import { InternalMenu } from "../../InternalMenu";
 import { Popup } from "../../Popup";
 import { RenderLayer } from "../../RenderLayer";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { PopupMenuPositions } from "../PopupMenuPositions";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isValidPositions } from "../validatePositions";
-import { jsStyles } from "../PopupMenu.styles";
+import { styles } from "../PopupMenu.styles";
 export var PopupMenuType = {
   Dropdown: 'dropdown',
   Tooltip: 'tooltip'
 };
-export var PopupMenu = /*#__PURE__*/function (_React$Component) {
+export var PopupMenuDataTids = {
+  root: 'PopupMenu__root',
+  caption: 'PopupMenu__caption'
+};
+var Positions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'];
+export var PopupMenu = rootNode(_class = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(PopupMenu, _React$Component);
   function PopupMenu() {
@@ -23,6 +34,7 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(PopupMenu.defaultProps);
     _this.state = {
       menuVisible: false,
       firstItemShouldBeSelected: false
@@ -59,8 +71,8 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
         });
         return /*#__PURE__*/React.createElement("span", {
-          "data-tid": "PopupMenu__caption",
-          className: jsStyles.caption(),
+          "data-tid": PopupMenuDataTids.caption,
+          className: styles.caption(),
           ref: function ref(element) {
             return _this.captionWrapper = element;
           }
@@ -68,13 +80,13 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/React.createElement("span", {
-        "data-tid": "PopupMenu__caption",
+        "data-tid": PopupMenuDataTids.caption,
         onClick: _this.handleCaptionClick,
         onKeyDown: _this.handleCaptionKeyDown,
         ref: function ref(element) {
           return _this.captionWrapper = element;
         },
-        className: jsStyles.caption()
+        className: styles.caption()
       }, _this.props.caption);
     };
@@ -145,6 +157,14 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
         _this.restoreFocus();
       }
+      if (_this.state.menuVisible && _this.props.onOpen) {
+        _this.props.onOpen();
+      }
+      if (!_this.state.menuVisible && _this.props.onClose) {
+        _this.props.onClose();
+      }
       if (typeof _this.props.onChangeMenuState === 'function') {
         _this.props.onChangeMenuState(_this.state.menuVisible, focusShouldBeRestored);
       }
@@ -170,12 +190,19 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
   var _proto = PopupMenu.prototype;
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
+    var _this$getProps = this.getProps(),
+        popupHasPin = _this$getProps.popupHasPin,
+        disableAnimations = _this$getProps.disableAnimations;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.hideMenuWithoutFocusing,
       onFocusOutside: this.hideMenuWithoutFocusing,
       active: this.state.menuVisible
     }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.container(),
+      "data-tid": PopupMenuDataTids.root,
+      className: styles.container(),
       style: {
         width: this.props.width
       }
@@ -184,16 +211,17 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
       opened: this.state.menuVisible,
       hasShadow: true,
       margin: this.props.popupMargin,
-      hasPin: this.props.popupHasPin,
+      hasPin: popupHasPin,
       pinOffset: this.props.popupPinOffset,
       positions: this.getPositions(),
-      disableAnimations: this.props.disableAnimations,
-      onOpen: this.handleOpen
+      disableAnimations: disableAnimations,
+      onOpen: this.handleOpen,
+      mobileOnCloseRequest: this.hideMenu,
+      width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'
     }, /*#__PURE__*/React.createElement(InternalMenu, {
       hasShadow: false,
-      maxHeight: this.props.menuMaxHeight || 'none',
+      maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none',
       onKeyDown: this.handleKeyDown,
-      width: this.props.menuWidth || 'auto',
       onItemClick: this.handleItemSelection,
       cyclicSelection: false,
       ref: this.refInternalMenu,
@@ -204,21 +232,19 @@ export var PopupMenu = /*#__PURE__*/function (_React$Component) {
   };
   _proto.getPositions = function getPositions() {
-    if (this.props.positions && isValidPositions(this.props.positions)) {
-      return this.props.positions;
+    var positions = this.getProps().positions;
+    if (positions && isValidPositions(positions)) {
+      return positions;
     }
-    return PopupMenuPositions;
+    return Positions;
   };
   return PopupMenu;
-}(React.Component);
-PopupMenu.__KONTUR_REACT_UI__ = 'PopupMenu';
-PopupMenu.defaultProps = {
-  positions: PopupMenuPositions,
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.defaultProps = {
+  positions: Positions,
   type: PopupMenuType.Tooltip,
   popupHasPin: true,
-  popupMargin: 0,
   disableAnimations: false
-};
-PopupMenu.Type = PopupMenuType;
+}, _class2.Type = PopupMenuType, _temp)) || _class) || _class;

package/internal/PopupMenu/PopupMenu/PopupMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PopupMenu.tsx"],"names":["React","isKeyArrowVertical","isKeyEnter","isKeyEscape","isKeySpace","someKeys","InternalMenu","Popup","RenderLayer","CommonWrapper","PopupMenuPositions","isValidPositions","jsStyles","PopupMenuType","Dropdown","Tooltip","PopupMenu","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","caption","opened","openMenu","closeMenu","toggleMenu","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","container","width","children","popupMargin","popupHasPin","popupPinOffset","getPositions","disableAnimations","menuMaxHeight","menuWidth","header","footer","positions","Component","__KONTUR_REACT_UI__","defaultProps","Type"],"mappings":"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","sourcesContent":["import React from 'react';\r\n\r\nimport {\r\n isKeyArrowVertical,\r\n isKeyEnter,\r\n isKeyEscape,\r\n isKeySpace,\r\n someKeys,\r\n} from '../../lib/events/keyboard/identifiers';\r\nimport { InternalMenu } from '../InternalMenu';\r\nimport { Popup, PopupPosition } from '../Popup';\r\nimport { RenderLayer } from '../RenderLayer';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { PopupMenuPositions } from './PopupMenuPositions';\r\nimport { isValidPositions } from './validatePositions';\r\nimport { jsStyles } from './PopupMenu.styles';\r\n\r\nexport interface PopupMenuCaptionProps {\r\n opened: boolean;\r\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\r\n closeMenu: (restoreFocus?: boolean) => void;\r\n toggleMenu: () => void;\r\n}\r\n\r\nexport interface PopupMenuProps extends CommonProps {\r\n children?: React.ReactNode;\r\n /** Максимальная высота меню /\r\n menuMaxHeight?: number \| string;\r\n /* Ширина меню /\r\n menuWidth?: number \| string;\r\n /* Ширина контейнера и caption /\r\n width?: React.CSSProperties['width'];\r\n\r\n /\r\n Элемент или функция возвращающая элемент,\r\n * если передана, используется вместо ```caption```,\r\n * в таком случае управлять открытием и закрытием меню\r\n * придется в этой функции\r\n /\r\n caption: React.ReactNode \| ((props: PopupMenuCaptionProps) => React.ReactNode);\r\n\r\n header?: React.ReactNode;\r\n footer?: React.ReactNode;\r\n\r\n /* Массив разрешенных положений меню относительно caption'а. /\r\n positions?: PopupPosition[];\r\n /* Колбэк, вызываемый после открытия/закрытия меню /\r\n onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\r\n /* Пропсы, передающиеся в Popup */\r\n popupHasPin?: boolean;\r\n popupMargin?: number;\r\n popupPinOffset?: number;\r\n type?: 'dropdown' \| 'tooltip';\r\n disableAnimations: boolean;\r\n}\r\n\r\ninterface PopupMenuState {\r\n menuVisible: boolean;\r\n firstItemShouldBeSelected?: boolean;\r\n}\r\n\r\nexport const PopupMenuType = {\r\n Dropdown: 'dropdown',\r\n Tooltip: 'tooltip',\r\n};\r\n\r\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\r\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\r\n\r\n public static defaultProps = {\r\n positions: PopupMenuPositions,\r\n type: PopupMenuType.Tooltip,\r\n popupHasPin: true,\r\n popupMargin: 0,\r\n disableAnimations: false,\r\n };\r\n\r\n public static Type = PopupMenuType;\r\n\r\n public state = {\r\n menuVisible: false,\r\n firstItemShouldBeSelected: false,\r\n };\r\n\r\n private captionWrapper: HTMLSpanElement \| null = null;\r\n private savedFocusableElement: HTMLElement \| null = null;\r\n private menu: Nullable<InternalMenu> = null;\r\n\r\n public render() {\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <RenderLayer\r\n onClickOutside={this.hideMenuWithoutFocusing}\r\n onFocusOutside={this.hideMenuWithoutFocusing}\r\n active={this.state.menuVisible}\r\n >\r\n <div className={jsStyles.container()} style={{ width: this.props.width }}>\r\n {this.renderCaption()}\r\n {this.captionWrapper && this.props.children && (\r\n <Popup\r\n anchorElement={this.captionWrapper}\r\n opened={this.state.menuVisible}\r\n hasShadow\r\n margin={this.props.popupMargin}\r\n hasPin={this.props.popupHasPin}\r\n pinOffset={this.props.popupPinOffset}\r\n positions={this.getPositions()}\r\n disableAnimations={this.props.disableAnimations}\r\n onOpen={this.handleOpen}\r\n >\r\n <InternalMenu\r\n hasShadow={false}\r\n maxHeight={this.props.menuMaxHeight \|\| 'none'}\r\n onKeyDown={this.handleKeyDown}\r\n width={this.props.menuWidth \|\| 'auto'}\r\n onItemClick={this.handleItemSelection}\r\n cyclicSelection={false}\r\n ref={this.refInternalMenu}\r\n initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\r\n header={this.props.header}\r\n footer={this.props.footer}\r\n >\r\n {this.props.children}\r\n </InternalMenu>\r\n </Popup>\r\n )}\r\n </div>\r\n </RenderLayer>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n public open = (): void => this.showMenu();\r\n public close = (): void => this.hideMenu();\r\n\r\n private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\r\n\r\n private handleOpen = () => {\r\n if (this.menu) {\r\n this.menu.focus();\r\n }\r\n };\r\n\r\n private renderCaption = () => {\r\n if (typeof this.props.caption === 'function') {\r\n const caption = this.props.caption({\r\n opened: this.state.menuVisible,\r\n openMenu: this.showMenu,\r\n closeMenu: this.hideMenu,\r\n toggleMenu: this.toggleMenu,\r\n });\r\n\r\n return (\r\n <span\r\n data-tid=\"PopupMenu__caption\"\r\n className={jsStyles.caption()}\r\n ref={element => (this.captionWrapper = element)}\r\n >\r\n {caption}\r\n </span>\r\n );\r\n }\r\n\r\n return (\r\n <span\r\n data-tid=\"PopupMenu__caption\"\r\n onClick={this.handleCaptionClick}\r\n onKeyDown={this.handleCaptionKeyDown}\r\n ref={element => (this.captionWrapper = element)}\r\n className={jsStyles.caption()}\r\n >\r\n {this.props.caption}\r\n </span>\r\n );\r\n };\r\n\r\n private hideMenuWithoutFocusing = () => this.hideMenu();\r\n\r\n private getPositions() {\r\n if (this.props.positions && isValidPositions(this.props.positions)) {\r\n return this.props.positions;\r\n }\r\n\r\n return PopupMenuPositions;\r\n }\r\n\r\n private showMenu = (firstItemShouldBeSelected?: boolean): void => {\r\n this.saveFocus();\r\n this.setState(\r\n {\r\n menuVisible: true,\r\n firstItemShouldBeSelected,\r\n },\r\n () => {\r\n this.handleChangeMenuVisible(false);\r\n },\r\n );\r\n };\r\n\r\n private hideMenu = (restoreFocus?: boolean): void => {\r\n this.setState(\r\n {\r\n menuVisible: false,\r\n firstItemShouldBeSelected: false,\r\n },\r\n () => {\r\n this.handleChangeMenuVisible(!!restoreFocus);\r\n },\r\n );\r\n };\r\n\r\n private toggleMenu = (): void => {\r\n this.state.menuVisible ? this.hideMenu() : this.showMenu();\r\n };\r\n\r\n private handleCaptionClick = (): void => {\r\n this.toggleMenu();\r\n };\r\n\r\n private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\r\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\r\n e.preventDefault();\r\n this.showMenu(true);\r\n }\r\n };\r\n\r\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\r\n if (isKeyEscape(e)) {\r\n const restoreFocus = true;\r\n this.hideMenu(restoreFocus);\r\n }\r\n };\r\n\r\n private saveFocus = (): void => {\r\n if (document) {\r\n this.savedFocusableElement = document.activeElement as HTMLElement;\r\n }\r\n };\r\n\r\n private restoreFocus = (): void => {\r\n if (this.savedFocusableElement) {\r\n this.savedFocusableElement.focus();\r\n this.savedFocusableElement = null;\r\n }\r\n };\r\n\r\n private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\r\n if (focusShouldBeRestored) {\r\n this.restoreFocus();\r\n }\r\n if (typeof this.props.onChangeMenuState === 'function') {\r\n this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\r\n }\r\n };\r\n\r\n private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\r\n if (event.isDefaultPrevented()) {\r\n return;\r\n }\r\n\r\n if (event.type === 'keydown') {\r\n event.preventDefault();\r\n }\r\n\r\n const restoreFocus = event.type === 'keydown';\r\n this.hideMenu(restoreFocus);\r\n };\r\n}\r\n"]}
1	+ {"version":3,"sources":["PopupMenu.tsx"],"names":["React","isKeyArrowVertical","isKeyEnter","isKeyEscape","isKeySpace","someKeys","InternalMenu","Popup","RenderLayer","CommonWrapper","responsiveLayout","rootNode","createPropsGetter","isValidPositions","styles","PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","getProps","defaultProps","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","opened","openMenu","closeMenu","toggleMenu","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","popupHasPin","disableAnimations","setRootNode","container","width","children","popupMargin","popupPinOffset","getPositions","isMobileLayout","menuWidth","menuMaxHeight","header","footer","positions","Component","__KONTUR_REACT_UI__","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n isKeyArrowVertical,\n isKeyEnter,\n isKeyEscape,\n isKeySpace,\n someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n opened: boolean;\n openMenu: (firstItemShouldBeSelected?: boolean) => void;\n closeMenu: (restoreFocus?: boolean) => void;\n toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n children?: React.ReactNode;\n /** Максимальная высота меню /\n menuMaxHeight?: number \| string;\n /* Ширина меню /\n menuWidth?: number \| string;\n /* Ширина контейнера и caption /\n width?: React.CSSProperties['width'];\n\n /\n Элемент или функция возвращающая элемент,\n * если передана, используется вместо ```caption```,\n * в таком случае управлять открытием и закрытием меню\n * придется в этой функции\n /\n caption: React.ReactNode \| ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n header?: React.ReactNode;\n footer?: React.ReactNode;\n\n /* Массив разрешенных положений меню относительно caption'а. /\n positions?: PopupPositionsType[];\n /* Колбэк, вызываемый после открытия/закрытия меню /\n onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n /* Пропсы, передающиеся в Popup /\n popupHasPin?: boolean;\n popupMargin?: number;\n popupPinOffset?: number;\n type?: 'dropdown' \| 'tooltip';\n disableAnimations?: boolean;\n /* Действие при открытии меню /\n onOpen?: () => void;\n /* Действие при закрытии меню */\n onClose?: () => void;\n}\n\ninterface PopupMenuState {\n menuVisible: boolean;\n firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n Dropdown: 'dropdown',\n Tooltip: 'tooltip',\n} as const;\n\nexport const PopupMenuDataTids = {\n root: 'PopupMenu__root',\n caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n 'top left',\n 'top center',\n 'top right',\n 'right top',\n 'right middle',\n 'right bottom',\n 'bottom left',\n 'bottom center',\n 'bottom right',\n 'left top',\n 'left middle',\n 'left bottom',\n];\n\ntype DefaultProps = Required<Pick<PopupMenuProps, 'positions' \| 'type' \| 'popupHasPin' \| 'disableAnimations'>>;\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n private isMobileLayout!: boolean;\n\n public static defaultProps: DefaultProps = {\n positions: Positions,\n type: PopupMenuType.Tooltip,\n popupHasPin: true,\n disableAnimations: false,\n };\n\n private getProps = createPropsGetter(PopupMenu.defaultProps);\n\n public static Type = PopupMenuType;\n\n public state = {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n };\n\n private captionWrapper: HTMLSpanElement \| null = null;\n private savedFocusableElement: HTMLElement \| null = null;\n private menu: Nullable<InternalMenu> = null;\n private setRootNode!: TSetRootNode;\n\n public render() {\n const { popupHasPin, disableAnimations } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <RenderLayer\n onClickOutside={this.hideMenuWithoutFocusing}\n onFocusOutside={this.hideMenuWithoutFocusing}\n active={this.state.menuVisible}\n >\n <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n {this.renderCaption()}\n {this.captionWrapper && this.props.children && (\n <Popup\n anchorElement={this.captionWrapper}\n opened={this.state.menuVisible}\n hasShadow\n margin={this.props.popupMargin}\n hasPin={popupHasPin}\n pinOffset={this.props.popupPinOffset}\n positions={this.getPositions()}\n disableAnimations={disableAnimations}\n onOpen={this.handleOpen}\n mobileOnCloseRequest={this.hideMenu}\n width={this.isMobileLayout ? 'auto' : this.props.menuWidth \|\| 'auto'}\n >\n <InternalMenu\n hasShadow={false}\n maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight \|\| 'none'}\n onKeyDown={this.handleKeyDown}\n onItemClick={this.handleItemSelection}\n cyclicSelection={false}\n ref={this.refInternalMenu}\n initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n header={this.props.header}\n footer={this.props.footer}\n >\n {this.props.children}\n </InternalMenu>\n </Popup>\n )}\n </div>\n </RenderLayer>\n </CommonWrapper>\n );\n }\n\n public open = (): void => this.showMenu();\n public close = (): void => this.hideMenu();\n\n private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n private handleOpen = () => {\n if (this.menu) {\n this.menu.focus();\n }\n };\n\n private renderCaption = () => {\n if (typeof this.props.caption === 'function') {\n const caption = this.props.caption({\n opened: this.state.menuVisible,\n openMenu: this.showMenu,\n closeMenu: this.hideMenu,\n toggleMenu: this.toggleMenu,\n });\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n className={styles.caption()}\n ref={(element) => (this.captionWrapper = element)}\n >\n {caption}\n </span>\n );\n }\n\n return (\n <span\n data-tid={PopupMenuDataTids.caption}\n onClick={this.handleCaptionClick}\n onKeyDown={this.handleCaptionKeyDown}\n ref={(element) => (this.captionWrapper = element)}\n className={styles.caption()}\n >\n {this.props.caption}\n </span>\n );\n };\n\n private hideMenuWithoutFocusing = () => this.hideMenu();\n\n private getPositions(): Readonly<PopupPositionsType[]> {\n const positions = this.getProps().positions;\n if (positions && isValidPositions(positions)) {\n return positions;\n }\n\n return Positions;\n }\n\n private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n this.saveFocus();\n this.setState(\n {\n menuVisible: true,\n firstItemShouldBeSelected,\n },\n () => {\n this.handleChangeMenuVisible(false);\n },\n );\n };\n\n private hideMenu = (restoreFocus?: boolean): void => {\n this.setState(\n {\n menuVisible: false,\n firstItemShouldBeSelected: false,\n },\n () => {\n this.handleChangeMenuVisible(!!restoreFocus);\n },\n );\n };\n\n private toggleMenu = (): void => {\n this.state.menuVisible ? this.hideMenu() : this.showMenu();\n };\n\n private handleCaptionClick = (): void => {\n this.toggleMenu();\n };\n\n private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n this.showMenu(true);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEscape(e)) {\n const restoreFocus = true;\n this.hideMenu(restoreFocus);\n }\n };\n\n private saveFocus = (): void => {\n if (document) {\n this.savedFocusableElement = document.activeElement as HTMLElement;\n }\n };\n\n private restoreFocus = (): void => {\n if (this.savedFocusableElement) {\n this.savedFocusableElement.focus();\n this.savedFocusableElement = null;\n }\n };\n\n private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n if (focusShouldBeRestored) {\n this.restoreFocus();\n }\n\n if (this.state.menuVisible && this.props.onOpen) {\n this.props.onOpen();\n }\n\n if (!this.state.menuVisible && this.props.onClose) {\n this.props.onClose();\n }\n\n if (typeof this.props.onChangeMenuState === 'function') {\n this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n }\n };\n\n private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.type === 'keydown') {\n event.preventDefault();\n }\n\n const restoreFocus = event.type === 'keydown';\n this.hideMenu(restoreFocus);\n };\n}\n"]}

package/internal/PopupMenu/PopupMenu.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopupPosition } from '../Popup';
+import { PopupPositionsType } from '../Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface PopupMenuCaptionProps {
     opened: boolean;
@@ -25,7 +25,7 @@ export interface PopupMenuProps extends CommonProps {
     header?: React.ReactNode;
     footer?: React.ReactNode;
     /**  Массив разрешенных положений меню относительно caption'а. */
-    positions?: PopupPosition[];
+    positions?: PopupPositionsType[];
     /** Колбэк, вызываемый после открытия/закрытия меню */
     onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;
     /** Пропсы, передающиеся в Popup */
@@ -33,28 +33,33 @@ export interface PopupMenuProps extends CommonProps {
     popupMargin?: number;
     popupPinOffset?: number;
     type?: 'dropdown' | 'tooltip';
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
+    /** Действие при открытии меню */
+    onOpen?: () => void;
+    /** Действие при закрытии меню */
+    onClose?: () => void;
 }
 interface PopupMenuState {
     menuVisible: boolean;
     firstItemShouldBeSelected?: boolean;
 }
 export declare const PopupMenuType: {
-    Dropdown: string;
-    Tooltip: string;
+    readonly Dropdown: "dropdown";
+    readonly Tooltip: "tooltip";
 };
+export declare const PopupMenuDataTids: {
+    readonly root: "PopupMenu__root";
+    readonly caption: "PopupMenu__caption";
+};
+declare type DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' | 'popupHasPin' | 'disableAnimations'>>;
 export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        positions: PopupPosition[];
-        type: string;
-        popupHasPin: boolean;
-        popupMargin: number;
-        disableAnimations: boolean;
-    };
+    private isMobileLayout;
+    static defaultProps: DefaultProps;
+    private getProps;
     static Type: {
-        Dropdown: string;
-        Tooltip: string;
+        readonly Dropdown: "dropdown";
+        readonly Tooltip: "tooltip";
     };
     state: {
         menuVisible: boolean;
@@ -63,6 +68,7 @@ export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenu
     private captionWrapper;
     private savedFocusableElement;
     private menu;
+    private setRootNode;
     render(): JSX.Element;
     open: () => void;
     close: () => void;

package/internal/PopupMenu/PopupMenu.styles/PopupMenu.styles.js CHANGED Viewed

@@ -3,12 +3,11 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   caption: function caption() {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      width: 100%;\n    "])));
   },
   container: function container() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      line-height: normal;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/internal/PopupMenu/PopupMenu.styles/PopupMenu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["PopupMenu.styles.ts"],"names":["css","memoizeStyle","styles","caption","container"~~,"jsStyles"~~],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,~~GAAG~~;~~AACbC~~,EAAAA,~~OADa~~,~~qBACH~~;AACR,WAAOH,GAAP;;;;AAID,~~GANY~~;~~AAObI~~,EAAAA,~~SAPa~~,~~uBAOD~~;AACV,WAAOJ,GAAP~~;;;AAGD~~,~~GAXY~~,~~EAAf;;;AAcA~~,~~OAAO,IAAMK,QAAQ,GAAGJ,YAAY,CAACC,MAAD,CAA7B~~","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\~~r\nconst~~ styles = {\r\n caption() {\r\n return css`\r\n display: inline-block;\r\n width: 100%;\r\n `;\r\n },\r\n container() {\r\n return css`\r\n display: inline-block;\r\n `;\r\n },\r\n}~~;\r\n\r\nexport const jsStyles = memoizeStyle(styles~~);\r\n"]}
1	+ {"version":3,"sources":["PopupMenu.styles.ts"],"names":["css","memoizeStyle","styles","caption","container"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,qBACvB;AACR,WAAOH,GAAP;;;;AAID,GANgC;AAOjCI,EAAAA,SAPiC,uBAOrB;AACV,WAAOJ,GAAP;;;;AAID,GAZgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n caption() {\n return css`\n display: inline-block;\n width: 100%;\n `;\n },\n container() {\n return css`\n display: inline-block;\n line-height: normal;\n `;\n },\n});\n"]}

package/internal/PopupMenu/PopupMenu.styles.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const styles: {
     caption(): string;
     container(): string;
 };

package/internal/PopupMenu/index/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAd","sourcesContent":["export * from './PopupMenu';\r\n"]}
1	+ {"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAd","sourcesContent":["export * from './PopupMenu';\n"]}

package/internal/PopupMenu/validatePositions/validatePositions.js CHANGED Viewed

@@ -1,20 +1,20 @@
 import { isProductionEnv } from "../../../lib/currentEnvironment";
-import { PopupMenuPositions } from "../PopupMenuPositions";
+import { PopupPositions } from "../../Popup";
 var isValidPosition = function isValidPosition(position) {
-  return PopupMenuPositions.includes(position);
+  return PopupPositions.includes(position);
 };
 export var isValidPositions = function isValidPositions(positions) {
   return positions.every(function (item) {
     if (isProductionEnv) {
       return isValidPosition(item);
-    } else {
-      if (isValidPosition(item)) {
-        return true;
-      } else {
-        throw new Error("Unxpected position \"" + item + "\"");
-      }
     }
+    if (isValidPosition(item)) {
+      return true;
+    }
+    throw new Error("Unxpected position \"" + item + "\"");
   });
 };

package/internal/PopupMenu/validatePositions/validatePositions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["validatePositions.~~tsx~~"],"names":["isProductionEnv","~~PopupMenuPositions~~","isValidPosition","position","includes","isValidPositions","positions","every","item","Error"],"mappings":"AAAA,SAASA,eAAT,QAAgC,8BAAhC~~;;;AAGA~~,~~SAASC~~,~~kBAAT~~,~~QAAmC~~,~~sBAAnC~~;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,QAAD,~~EAAsC~~;~~AAC5D~~,SAAOF,~~kBAAkB~~,CAACG,~~QAAnB~~,~~CAA4BD~~,~~QAA5B~~,CAAP;AACD,CAFD;;AAIA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,SAAD,~~EAAyC~~;~~AACvE~~,SAAOA,SAAS,CAACC,KAAV,CAAgB,~~UAAAC~~,~~IAAI~~,~~EAAI~~;~~AAC7B~~,QAAIR,eAAJ,EAAqB;AACnB,aAAOE,eAAe,CAACM,IAAD,CAAtB;AACD,~~KAFD~~,~~MAEO;AACL,UAAIN,~~eAAe,CAACM,IAAD,CAAnB,EAA2B;AACzB,~~eAAO~~,IAAP;AACD,~~OAFD~~,~~MAEO;AACL,cAAM,~~IAAIC,KAAJ,2BAAiCD,IAAjC,QAAN;AACD~~;AACF;AACF~~,GAVM,CAAP;AAWD,CAZM","sourcesContent":["import { isProductionEnv } from '../../lib/currentEnvironment';\r\nimport { ~~PopupPosition~~ } from '../Popup';\r\n\~~r\nimport { PopupMenuPositions } from './PopupMenuPositions';\r\n\r\~~nconst isValidPosition = (position: ~~PopupPosition~~): boolean => {\r\n return ~~PopupMenuPositions~~.includes(position);\r\n};\r\n\r\nexport const isValidPositions = (positions: ~~PopupPosition~~[]): boolean => {\r\n return positions.every(item => {\r\n if (isProductionEnv) {\r\n return isValidPosition(item);\r\n } ~~else {~~\r\n if (isValidPosition(item)) {\r\n return true;\r\n } ~~else {~~\r\n throw new Error(`Unxpected position \"${item}\"`);\r\n ~~}\r\n }\r\n~~ });\r\n};\r\n"]}
1	+ {"version":3,"sources":["validatePositions.ts"],"names":["isProductionEnv","PopupPositions","isValidPosition","position","includes","isValidPositions","positions","every","item","Error"],"mappings":"AAAA,SAASA,eAAT,QAAgC,8BAAhC;AACA,SAA6BC,cAA7B,QAAmD,UAAnD;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,QAAD,EAA2C;AACjE,SAAOF,cAAc,CAACG,QAAf,CAAwBD,QAAxB,CAAP;AACD,CAFD;;AAIA,OAAO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,SAAD,EAA8C;AAC5E,SAAOA,SAAS,CAACC,KAAV,CAAgB,UAACC,IAAD,EAAU;AAC/B,QAAIR,eAAJ,EAAqB;AACnB,aAAOE,eAAe,CAACM,IAAD,CAAtB;AACD;;AAED,QAAIN,eAAe,CAACM,IAAD,CAAnB,EAA2B;AACzB,aAAO,IAAP;AACD;;AAED,UAAM,IAAIC,KAAJ,2BAAiCD,IAAjC,QAAN;AACD,GAVM,CAAP;AAWD,CAZM","sourcesContent":["import { isProductionEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType, PopupPositions } from '../Popup';\n\nconst isValidPosition = (position: PopupPositionsType): boolean => {\n return PopupPositions.includes(position);\n};\n\nexport const isValidPositions = (positions: PopupPositionsType[]): boolean => {\n return positions.every((item) => {\n if (isProductionEnv) {\n return isValidPosition(item);\n }\n\n if (isValidPosition(item)) {\n return true;\n }\n\n throw new Error(`Unxpected position \"${item}\"`);\n });\n};\n"]}

package/internal/PopupMenu/validatePositions.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { PopupPosition } from '../Popup';
-export declare const isValidPositions: (positions: PopupPosition[]) => boolean;
+import { PopupPositionsType } from '../Popup';
+export declare const isValidPositions: (positions: PopupPositionsType[]) => boolean;

package/internal/RenderContainer/RenderContainer/RenderContainer.js CHANGED Viewed

@@ -3,6 +3,8 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import { canUseDOM, isBrowser } from "../../../lib/client";
 import { getRandomID } from "../../../lib/utils";
+import { Upgrade } from "../../../lib/Upgrades";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { RenderInnerContainer } from "../RenderInnerContainer";
 export var RenderContainer = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(RenderContainer, _React$Component);
@@ -23,7 +25,7 @@ export var RenderContainer = /*#__PURE__*/function (_React$Component) {
   var _proto = RenderContainer.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (!this.props.children && nextProps.children) {
       this.mountContainer();
     }
@@ -31,6 +33,8 @@ export var RenderContainer = /*#__PURE__*/function (_React$Component) {
     if (this.props.children && !nextProps.children) {
       this.unmountContainer();
     }
+    return true;
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -47,7 +51,7 @@ export var RenderContainer = /*#__PURE__*/function (_React$Component) {
   _proto.createContainer = function createContainer() {
     if (canUseDOM) {
       var domContainer = document.createElement('div');
-      domContainer.setAttribute('class', 'react-ui');
+      domContainer.setAttribute('class', Upgrade.getSpecificityClassName());
       domContainer.setAttribute('data-rendered-container-id', "" + this.rootId);
       this.domContainer = domContainer;
     }
@@ -61,6 +65,10 @@ export var RenderContainer = /*#__PURE__*/function (_React$Component) {
     if (this.domContainer && this.domContainer.parentNode !== document.body) {
       document.body.appendChild(this.domContainer);
+      if (this.props.containerRef) {
+        callChildRef(this.props.containerRef, this.domContainer);
+      }
       if (window.ReactTesting) {
         window.ReactTesting.addRenderContainer(this.rootId, this);
       }
@@ -78,6 +86,10 @@ export var RenderContainer = /*#__PURE__*/function (_React$Component) {
     if (this.domContainer && this.domContainer.parentNode) {
       this.domContainer.parentNode.removeChild(this.domContainer);
+      if (this.props.containerRef) {
+        callChildRef(this.props.containerRef, null);
+      }
       if (window.ReactTesting) {
         window.ReactTesting.removeRenderContainer(this.rootId);
       }