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

package/cjs/components/TooltipMenu/TooltipMenu.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import { PopupMenuProps } from '../../internal/PopupMenu';
 import { MenuItemProps } from '../MenuItem';
 import { MenuHeaderProps } from '../MenuHeader';
-import { PopupPosition } from '../../internal/Popup';
+import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;
-export interface TooltipMenuProps extends CommonProps {
+export declare type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;
+export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
     children?: TooltipMenuChildType | TooltipMenuChildType[];
     /** Максимальная высота меню */
     menuMaxHeight?: number | string;
@@ -13,34 +13,57 @@ export interface TooltipMenuProps extends CommonProps {
     menuWidth?: number | string;
     /**
      * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо ```caption```,
+     * если передана, используется вместо `caption`,
      * в таком случае управлять открытием и закрытием меню
      * придется в этой функции
      */
     caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
     header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
     footer?: React.ReactNode;
-    /**  Массив разрешенных положений меню относительно caption'а. */
-    positions?: PopupPosition[];
+    /**  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
+     */
+    positions?: PopupPositionsType[];
     /**
      * Не показывать анимацию
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
 }
+export declare const TooltipMenuDataTids: {
+    readonly root: "TooltipMenu__root";
+};
+declare type DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
- * Положение зависит от переданного массива ```positions``` и работает так:
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
  */
 export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        disableAnimations: boolean;
-    };
+    private setRootNode;
+    static defaultProps: DefaultProps;
+    private getProps;
     constructor(props: TooltipMenuProps);
     render(): JSX.Element;
     renderMain(): JSX.Element | null;
 }
+export {};

package/cjs/components/TooltipMenu/TooltipMenu.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TooltipMenu = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TooltipMenuDataTids = exports.TooltipMenu = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -8,6 +8,8 @@ var _currentEnvironment = require("../../lib/currentEnvironment");
 
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");var _class, _class2, _temp;
 
 
 
@@ -34,22 +36,51 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 
-/**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
- * Положение зависит от переданного массива ```positions``` и работает так:
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var TooltipMenuDataTids = {
+  root: 'TooltipMenu__root' };exports.TooltipMenuDataTids = TooltipMenuDataTids;
+
+
+
+
+/**
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
  */var
-TooltipMenu = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TooltipMenu, _React$Component);
+
+TooltipMenu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TooltipMenu, _React$Component);
+
+
+
+
 
 
 
 
 
   function TooltipMenu(props) {var _this;
-    _this = _React$Component.call(this, props) || this;
+    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(TooltipMenu.defaultProps);
 
     if (!props.caption && !_currentEnvironment.isProductionEnv) {
       throw new Error('Prop "caption" is required!!!');
@@ -85,19 +116,22 @@ TooltipMenu = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defa
     }
 
     return /*#__PURE__*/(
-      _react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/
+      _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/
       _react.default.createElement(_PopupMenu.PopupMenu, {
+        "data-tid": TooltipMenuDataTids.root,
         menuMaxHeight: this.props.menuMaxHeight,
         menuWidth: this.props.menuWidth,
         caption: this.props.caption,
         header: this.props.header,
         footer: this.props.footer,
         positions: this.props.positions,
+        onOpen: this.props.onOpen,
+        onClose: this.props.onClose,
         popupHasPin: true,
-        disableAnimations: this.props.disableAnimations },
+        disableAnimations: this.getProps().disableAnimations },
 
       this.props.children)));
 
 
 
-  };return TooltipMenu;}(_react.default.Component);exports.TooltipMenu = TooltipMenu;TooltipMenu.__KONTUR_REACT_UI__ = 'TooltipMenu';TooltipMenu.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv };
+  };return TooltipMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'TooltipMenu', _class2.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.TooltipMenu = TooltipMenu;

package/cjs/components/TooltipMenu/TooltipMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenu","props","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"uPAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,W;;;;;;AAMX,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACC,mCAAvB,EAAwC;AACtC,YAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAAAC,KAAK,EAAI;AACR;AACE,uCAAC,0BAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEC,2BAAaC,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEH,KAAK,CAACI,oBADxB;AAEEC,cAAAA,WAAW,EAAEL,KAAK,CAACM,iBAFrB;AAGEC,cAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB,EADK;;AAMLR,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACS,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAI,CAAC,KAAKd,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,mCAAC,4BAAD,EAAmB,KAAKD,KAAxB;AACE,mCAAC,oBAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWe,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKf,KAAL,CAAWgB,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKhB,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWiB,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKjB,KAAL,CAAWkB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKlB,KAAL,CAAWmB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKnB,KAAL,CAAWoB,iBARhC;;AAUG,WAAKpB,KAAL,CAAWqB,QAVd,CADF,CADF;;;;AAgBD,G,sBA1D8BC,eAAMC,S,oCAA1BxB,W,CACGyB,mB,GAAsB,a,CADzBzB,W,CAGG0B,Y,GAAe,EAC3BL,iBAAiB,EAAEM,6BADQ,E","sourcesContent":["import React from 'react';\r\n\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\r\nimport { MenuItemProps } from '../MenuItem';\r\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\r\nimport { MenuHeaderProps } from '../MenuHeader';\r\nimport { PopupPosition } from '../../internal/Popup';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\r\n\r\nexport interface TooltipMenuProps extends CommonProps {\r\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\r\n  /** Максимальная высота меню */\r\n  menuMaxHeight?: number | string;\r\n  /** Ширина меню */\r\n  menuWidth?: number | string;\r\n  /**\r\n   * Элемент или функция возвращающая элемент,\r\n   * если передана, используется вместо ```caption```,\r\n   * в таком случае управлять открытием и закрытием меню\r\n   * придется в этой функции\r\n   */\r\n  caption: PopupMenuProps['caption'];\r\n  header?: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  /**  Массив разрешенных положений меню относительно caption'а. */\r\n  positions?: PopupPosition[];\r\n  /**\r\n   * Не показывать анимацию\r\n   */\r\n  disableAnimations: boolean;\r\n}\r\n\r\n/**\r\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.\r\n * Положение зависит от переданного массива ```positions``` и работает так:\r\n * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,\r\n * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.\r\n * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.\r\n * Если ```positions``` передан или передан пустой массив, используются все возможные положения.\r\n */\r\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\r\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\r\n\r\n  public static defaultProps = {\r\n    disableAnimations: isTestEnv,\r\n  };\r\n  constructor(props: TooltipMenuProps) {\r\n    super(props);\r\n\r\n    if (!props.caption && !isProductionEnv) {\r\n      throw new Error('Prop \"caption\" is required!!!');\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupPinOffset: theme.tooltipMenuPinOffset,\r\n                  popupMargin: theme.tooltipMenuMargin,\r\n                  popupPinSize: theme.tooltipMenuPinSize,\r\n                },\r\n                theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public renderMain() {\r\n    if (!this.props.caption) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <PopupMenu\r\n          menuMaxHeight={this.props.menuMaxHeight}\r\n          menuWidth={this.props.menuWidth}\r\n          caption={this.props.caption}\r\n          header={this.props.header}\r\n          footer={this.props.footer}\r\n          positions={this.props.positions}\r\n          popupHasPin={true}\r\n          disableAnimations={this.props.disableAnimations}\r\n        >\r\n          {this.props.children}\r\n        </PopupMenu>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenuDataTids","root","TooltipMenu","rootNode","props","getProps","defaultProps","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","setRootNode","menuMaxHeight","menuWidth","header","footer","positions","onOpen","onClose","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"uWAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B,C;;;;;AAMP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;;AAEaC,W,OADZC,kB;;;;;;;;;;AAWC,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN,UADmC,MAF7BC,QAE6B,GAFlB,0CAAkBH,WAAW,CAACI,YAA9B,CAEkB;;AAGnC,QAAI,CAACF,KAAK,CAACG,OAAP,IAAkB,CAACC,mCAAvB,EAAwC;AACtC,YAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,0BAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEC,2BAAaC,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEH,KAAK,CAACI,oBADxB;AAEEC,cAAAA,WAAW,EAAEL,KAAK,CAACM,iBAFrB;AAGEC,cAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB,EADK;;AAMLR,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACS,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAI,CAAC,KAAKhB,KAAL,CAAWG,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,mCAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKc,WAAjC,IAAkD,KAAKjB,KAAvD;AACE,mCAAC,oBAAD;AACE,oBAAUJ,mBAAmB,CAACC,IADhC;AAEE,QAAA,aAAa,EAAE,KAAKG,KAAL,CAAWkB,aAF5B;AAGE,QAAA,SAAS,EAAE,KAAKlB,KAAL,CAAWmB,SAHxB;AAIE,QAAA,OAAO,EAAE,KAAKnB,KAAL,CAAWG,OAJtB;AAKE,QAAA,MAAM,EAAE,KAAKH,KAAL,CAAWoB,MALrB;AAME,QAAA,MAAM,EAAE,KAAKpB,KAAL,CAAWqB,MANrB;AAOE,QAAA,SAAS,EAAE,KAAKrB,KAAL,CAAWsB,SAPxB;AAQE,QAAA,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MARrB;AASE,QAAA,OAAO,EAAE,KAAKvB,KAAL,CAAWwB,OATtB;AAUE,QAAA,WAAW,MAVb;AAWE,QAAA,iBAAiB,EAAE,KAAKvB,QAAL,GAAgBwB,iBAXrC;;AAaG,WAAKzB,KAAL,CAAW0B,QAbd,CADF,CADF;;;;AAmBD,G,sBAjE8BC,eAAMC,S,WACvBC,mB,GAAsB,a,UAGtB3B,Y,GAA6B,EACzCuB,iBAAiB,EAAEK,6BADsB,E","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.tooltipMenuPinOffset,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={this.getProps().disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/TooltipMenu/TooltipMenu.md

@@ -1,115 +1,183 @@
-Простой пример
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
-
-С указанием ширины меню
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
-
-С указанием максимальной высоты меню
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
-
-В `caption` можно передать любой элемент
-
-```jsx harmony
-import { MenuItem } from '@skbkontur/react-ui';
-import MenuIcon from '@skbkontur/react-icons/Menu';
-
-<TooltipMenu
-  caption={
-    <span style={{ display: 'inline-block' }} tabIndex="0">
-      <MenuIcon size={32} />
-    </span>
-  }
-  menuWidth="300px"
->
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
-
-Только справа
-
-```jsx harmony
-import { MenuItem } from '@skbkontur/react-ui';
-import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
-
-<TooltipMenu
-  caption={
-    <span style={{ display: 'inline-block' }} tabIndex="0">
-      <LightbulbIcon size={32} />
-    </span>
-  }
-  menuWidth="300px"
-  positions={['right top', 'right middle', 'right bottom']}
->
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
-
-Меню только сверху выравненное по правому краю `caption`
-
-```jsx harmony
-import { MenuItem } from '@skbkontur/react-ui';
-import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
-
-<TooltipMenu
-  caption={
-    <span style={{ display: 'inline-block' }} tabIndex="0">
-      <LightbulbIcon size={32} />
-    </span>
-  }
-  menuWidth="300px"
-  positions={['top right']}
->
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</TooltipMenu>;
-```
+Базовый пример тултип-меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню с заданной шириной.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
+  menuWidth={350}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню с заданной максимальной высотой.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
+  menuMaxHeight={150}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню с отключенной анимацией.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import MenuIcon from '@skbkontur/react-icons/Menu';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <MenuIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню всегда всплывающее справа от `caption`.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['right top', 'right middle', 'right bottom']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['top right']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Тултип-меню c шапкой и подвалом.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Условный рендер элементов тултип-меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </TooltipMenu>
+</Gapped>
+```

package/cjs/components/TooltipMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './TooltipMenu';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './TooltipMenu';\n"]}

package/cjs/hooks/useDrop.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+interface IUseDropProps {
+    onDrop?: (event: Event) => void;
+}
+declare type IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;
+interface IUseDropResult<TElement extends IElementWithListener> {
+    isDraggable: boolean;
+    ref: MutableRefObject<TElement | null>;
+}
+export declare const useDrop: <TElement extends IElementWithListener>(props?: IUseDropProps) => IUseDropResult<TElement>;
+export {};

package/cjs/hooks/useDrop.js

@@ -0,0 +1,77 @@
+"use strict";exports.__esModule = true;exports.useDrop = void 0;var _react = require("react");
+
+
+
+
+
+
+
+
+
+
+
+
+var useDrop = function useDrop(props) {if (props === void 0) {props = {};}
+  var _props = props,onDrop = _props.onDrop;
+
+  var droppableRef = (0, _react.useRef)(null);
+  var overRef = (0, _react.useRef)(false);
+  var timerId = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(false),isDraggable = _useState[0],setIsDraggable = _useState[1];
+
+  var clearTimer = (0, _react.useCallback)(function () {
+    timerId.current && clearTimeout(timerId.current);
+  }, []);
+
+  var handleDragOver = (0, _react.useCallback)(
+  function (event) {
+    event.preventDefault();
+    setIsDraggable(true);
+
+    clearTimer();
+    timerId.current = setTimeout(function () {
+      overRef.current = false;
+      setIsDraggable(false);
+    }, 200);
+  },
+  [clearTimer]);
+
+
+  var preventDefault = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  var handleDrop = (0, _react.useCallback)(
+  function (event) {
+    preventDefault(event);
+    setIsDraggable(false);
+    overRef.current = false;
+
+    onDrop == null ? void 0 : onDrop(event);
+  },
+  [preventDefault, onDrop]);
+
+
+  (0, _react.useEffect)(function () {
+    var ref = droppableRef.current;
+
+    if (!ref) {
+      return;
+    }
+
+    ref.addEventListener('dragenter', preventDefault);
+    ref.addEventListener('dragleave', preventDefault);
+    ref.addEventListener('dragover', handleDragOver);
+    ref.addEventListener('drop', handleDrop);
+
+    return function () {
+      ref.removeEventListener('dragenter', preventDefault);
+      ref.removeEventListener('dragleave', preventDefault);
+      ref.removeEventListener('dragover', handleDragOver);
+      ref.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDrop, handleDragOver, preventDefault]);
+
+  return { isDraggable: isDraggable, ref: droppableRef };
+};exports.useDrop = useDrop;

package/cjs/hooks/useDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrop.ts"],"names":["useDrop","props","onDrop","droppableRef","overRef","timerId","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"mappings":"gEAAA;;;;;;;;;;;;;AAaO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAAwCC,KAAxC,EAAgG,KAAxDA,KAAwD,cAAxDA,KAAwD,GAAjC,EAAiC;AACrH,eAAmBA,KAAnB,CAAQC,MAAR,UAAQA,MAAR;;AAEA,MAAMC,YAAY,GAAG,mBAAiB,IAAjB,CAArB;AACA,MAAMC,OAAO,GAAG,mBAAgB,KAAhB,CAAhB;AACA,MAAMC,OAAO,GAAG,oBAAhB;AACA,kBAAsC,qBAAkB,KAAlB,CAAtC,CAAOC,WAAP,gBAAoBC,cAApB;;AAEA,MAAMC,UAAU,GAAG,wBAAY,YAAM;AACnCH,IAAAA,OAAO,CAACI,OAAR,IAAmBC,YAAY,CAACL,OAAO,CAACI,OAAT,CAA/B;AACD,GAFkB,EAEhB,EAFgB,CAAnB;;AAIA,MAAME,cAAc,GAAG;AACrB,YAACC,KAAD,EAAW;AACTA,IAAAA,KAAK,CAACC,cAAN;AACAN,IAAAA,cAAc,CAAC,IAAD,CAAd;;AAEAC,IAAAA,UAAU;AACVH,IAAAA,OAAO,CAACI,OAAR,GAAkBK,UAAU,CAAC,YAAM;AACjCV,MAAAA,OAAO,CAACK,OAAR,GAAkB,KAAlB;AACAF,MAAAA,cAAc,CAAC,KAAD,CAAd;AACD,KAH2B,EAGzB,GAHyB,CAA5B;AAID,GAVoB;AAWrB,GAACC,UAAD,CAXqB,CAAvB;;;AAcA,MAAMK,cAAc,GAAG,wBAAY,UAACD,KAAD,EAAW;AAC5CA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACG,eAAN;AACD,GAHsB,EAGpB,EAHoB,CAAvB;;AAKA,MAAMC,UAAU,GAAG;AACjB,YAACJ,KAAD,EAAkB;AAChBC,IAAAA,cAAc,CAACD,KAAD,CAAd;AACAL,IAAAA,cAAc,CAAC,KAAD,CAAd;AACAH,IAAAA,OAAO,CAACK,OAAR,GAAkB,KAAlB;;AAEAP,IAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGU,KAAH,CAAN;AACD,GAPgB;AAQjB,GAACC,cAAD,EAAiBX,MAAjB,CARiB,CAAnB;;;AAWA,wBAAU,YAAM;AACd,QAAMe,GAAG,GAAGd,YAAY,CAACM,OAAzB;;AAEA,QAAI,CAACQ,GAAL,EAAU;AACR;AACD;;AAEDA,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,WAArB,EAAkCL,cAAlC;AACAI,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,WAArB,EAAkCL,cAAlC;AACAI,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,UAArB,EAAiCP,cAAjC;AACAM,IAAAA,GAAG,CAACC,gBAAJ,CAAqB,MAArB,EAA6BF,UAA7B;;AAEA,WAAO,YAAM;AACXC,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,WAAxB,EAAqCN,cAArC;AACAI,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,WAAxB,EAAqCN,cAArC;AACAI,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,UAAxB,EAAoCR,cAApC;AACAM,MAAAA,GAAG,CAACE,mBAAJ,CAAwB,MAAxB,EAAgCH,UAAhC;AACD,KALD;AAMD,GAlBD,EAkBG,CAACA,UAAD,EAAaL,cAAb,EAA6BE,cAA7B,CAlBH;;AAoBA,SAAO,EAAEP,WAAW,EAAXA,WAAF,EAAeW,GAAG,EAAEd,YAApB,EAAP;AACD,CA/DM,C","sourcesContent":["import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';\n\ninterface IUseDropProps {\n  onDrop?: (event: Event) => void;\n}\n\ntype IElementWithListener = Pick<HTMLElement, 'addEventListener' | 'removeEventListener'>;\n\ninterface IUseDropResult<TElement extends IElementWithListener> {\n  isDraggable: boolean;\n  ref: MutableRefObject<TElement | null>;\n}\n\nexport const useDrop = <TElement extends IElementWithListener>(props: IUseDropProps = {}): IUseDropResult<TElement> => {\n  const { onDrop } = props;\n\n  const droppableRef = useRef<TElement>(null);\n  const overRef = useRef<boolean>(false);\n  const timerId = useRef<NodeJS.Timeout>();\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = setTimeout(() => {\n        overRef.current = false;\n        setIsDraggable(false);\n      }, 200);\n    },\n    [clearTimer],\n  );\n\n  const preventDefault = useCallback((event) => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: Event) => {\n      preventDefault(event);\n      setIsDraggable(false);\n      overRef.current = false;\n\n      onDrop?.(event);\n    },\n    [preventDefault, onDrop],\n  );\n\n  useEffect(() => {\n    const ref = droppableRef.current;\n\n    if (!ref) {\n      return;\n    }\n\n    ref.addEventListener('dragenter', preventDefault);\n    ref.addEventListener('dragleave', preventDefault);\n    ref.addEventListener('dragover', handleDragOver);\n    ref.addEventListener('drop', handleDrop);\n\n    return () => {\n      ref.removeEventListener('dragenter', preventDefault);\n      ref.removeEventListener('dragleave', preventDefault);\n      ref.removeEventListener('dragover', handleDragOver);\n      ref.removeEventListener('drop', handleDrop);\n    };\n  }, [handleDrop, handleDragOver, preventDefault]);\n\n  return { isDraggable, ref: droppableRef };\n};\n"]}

package/cjs/hooks/useEffectWithoutInitCall.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useEffectWithoutInitCall: (effect: () => void, deps: DependencyList) => void;