@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2d059f9369

package/components/Tooltip/Tooltip.md

@@ -291,3 +291,27 @@ class AnchorTooltipExample extends React.Component {
 
 <AnchorTooltipExample />;
 ```
+
+У тултипа можно переопределить задержку перед его появлением. Скрытие же происходит с задержкой по умолчанию.
+
+```jsx harmony
+import HelpDotIcon from '@skbkontur/react-icons/HelpDot';
+import { Input, Gapped, Tooltip } from '@skbkontur/react-ui';
+
+const [delay, setDelay] = React.useState(100);
+
+const render = () => (
+  <div>
+    {`Showed with ${delay}ms delay`}
+  </div>
+);
+
+<div>
+  <Gapped vertical>
+    <Gapped>Show delay: <Input value={delay} onValueChange={setDelay} /></Gapped>
+    <Tooltip render={render} delayBeforeShow={delay} pos="right top">
+      <HelpDotIcon />
+    </Tooltip>
+  </Gapped>
+</div>;
+```

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   cross: function cross(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      height: 8px;\n      line-height: 0;\n      padding: ", ";\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 8px;\n      box-sizing: content-box;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnColor, t.tooltipCloseBtnPadding, t.tooltipCloseBtnHoverColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ", ";\n      box-sizing: content-box;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnColor, t.tooltipCloseBtnSide, t.tooltipCloseBtnPadding, t.tooltipCloseBtnSide, t.tooltipCloseBtnHoverColor);
   },
   tooltipContent: function tooltipContent(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: ", " ", ";\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipTextColor, t.tooltipPaddingY, t.tooltipPaddingX, t.tooltipFontSize, t.tooltipLineHeight);

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tooltip.styles.ts"],"names":["css","memoizeStyle","styles","cross","t","tooltipCloseBtnColor","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","tooltipContent","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACC,oBADb;;;;AAKaD,IAAAA,CAAC,CAACE,sBALf;;;;;;;;AAaaF,IAAAA,CAAC,CAACG,yBAbf;;;AAgBD,GAlBgC;;AAoBjCC,EAAAA,cApBiC,0BAoBlBJ,CApBkB,EAoBR;AACvB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACK,gBADb;AAEaL,IAAAA,CAAC,CAACM,eAFf,EAEkCN,CAAC,CAACO,eAFpC;;AAIeP,IAAAA,CAAC,CAACQ,eAJjB;AAKiBR,IAAAA,CAAC,CAACS,iBALnB;;AAOD,GA5BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  cross(t: Theme) {\n    return css`\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      height: 8px;\n      line-height: 0;\n      padding: ${t.tooltipCloseBtnPadding};\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 8px;\n      box-sizing: content-box;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      color: ${t.tooltipTextColor};\n      padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n      position: relative;\n      font-size: ${t.tooltipFontSize};\n      line-height: ${t.tooltipLineHeight};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tooltip.styles.ts"],"names":["css","memoizeStyle","styles","cross","t","tooltipCloseBtnColor","tooltipCloseBtnSide","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","tooltipContent","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACC,oBADb;;AAGYD,IAAAA,CAAC,CAACE,mBAHd;;AAKaF,IAAAA,CAAC,CAACG,sBALf;;;;AASWH,IAAAA,CAAC,CAACE,mBATb;;;;AAaaF,IAAAA,CAAC,CAACI,yBAbf;;;AAgBD,GAlBgC;;AAoBjCC,EAAAA,cApBiC,0BAoBlBL,CApBkB,EAoBR;AACvB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACM,gBADb;AAEaN,IAAAA,CAAC,CAACO,eAFf,EAEkCP,CAAC,CAACQ,eAFpC;;AAIeR,IAAAA,CAAC,CAACS,eAJjB;AAKiBT,IAAAA,CAAC,CAACU,iBALnB;;AAOD,GA5BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  cross(t: Theme) {\n    return css`\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      height: ${t.tooltipCloseBtnSide};\n      line-height: 0;\n      padding: ${t.tooltipCloseBtnPadding};\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ${t.tooltipCloseBtnSide};\n      box-sizing: content-box;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      color: ${t.tooltipTextColor};\n      padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n      position: relative;\n      font-size: ${t.tooltipFontSize};\n      line-height: ${t.tooltipLineHeight};\n    `;\n  },\n});\n"]}

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js

@@ -10,28 +10,30 @@ import { PopupMenu } from "../../../internal/PopupMenu";
 import { isProductionEnv, isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 export var TooltipMenuDataTids = {
   root: 'TooltipMenu__root'
 };
+export
 /**
- * Меню, раскрывающееся по клику на переданный в `caption` элемент.
- *
- * Положение меню задаётся с помощью массива `positions` и работает так:
- * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
- * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
- *
- * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
- *
- * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
- */
-
-export var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* Меню, раскрывающееся по клику на переданный в `caption` элемент.
+*
+* Положение меню задаётся с помощью массива `positions` и работает так:
+* первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+* если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+*
+* Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+*
+* Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
+*/
+var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TooltipMenu, _React$Component);
 
   function TooltipMenu(props) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(TooltipMenu.defaultProps);
 
     if (!props.caption && !isProductionEnv) {
       throw new Error('Prop "caption" is required!!!');
@@ -50,7 +52,8 @@ export var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/funct
         value: ThemeFactory.create({
           popupPinOffset: theme.tooltipMenuPinOffset,
           popupMargin: theme.tooltipMenuMargin,
-          popupPinSize: theme.tooltipMenuPinSize
+          popupPinSize: theme.tooltipMenuPinSize,
+          menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY
         }, theme)
       }, _this2.renderMain());
     });
@@ -61,20 +64,25 @@ export var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/funct
       return null;
     }
 
+    var _this$getProps = this.getProps(),
+        disableAnimations = _this$getProps.disableAnimations;
+
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement(PopupMenu, {
+      "aria-label": this.props['aria-label'],
       "data-tid": TooltipMenuDataTids.root,
       menuMaxHeight: this.props.menuMaxHeight,
       menuWidth: this.props.menuWidth,
       caption: this.props.caption,
       header: this.props.header,
       footer: this.props.footer,
+      preventIconsOffset: this.props.preventIconsOffset,
       positions: this.props.positions,
       onOpen: this.props.onOpen,
       onClose: this.props.onClose,
       popupHasPin: true,
-      disableAnimations: this.props.disableAnimations
+      disableAnimations: disableAnimations
     }, this.props.children));
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","TooltipMenuDataTids","root","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","setRootNode","menuMaxHeight","menuWidth","header","footer","positions","onOpen","onClose","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,QAAT,QAAuC,oBAAvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,WAAaC,WAAb,GADCH,QACD;;;;;;;AAOE,uBAAYI,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACR,eAAvB,EAAwC;AACtC,YAAM,IAAIS,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAbH;;AAeSC,EAAAA,MAfT,GAeE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEd,YAAY,CAACe,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB,EADK;;AAMLP,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACQ,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,GApCH;;AAsCSA,EAAAA,UAtCT,GAsCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,aAAe,WAAW,EAAE,KAAKY,WAAjC,IAAkD,KAAKb,KAAvD;AACE,0BAAC,SAAD;AACE,oBAAUH,mBAAmB,CAACC,IADhC;AAEE,QAAA,aAAa,EAAE,KAAKE,KAAL,CAAWc,aAF5B;AAGE,QAAA,SAAS,EAAE,KAAKd,KAAL,CAAWe,SAHxB;AAIE,QAAA,OAAO,EAAE,KAAKf,KAAL,CAAWC,OAJtB;AAKE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWgB,MALrB;AAME,QAAA,MAAM,EAAE,KAAKhB,KAAL,CAAWiB,MANrB;AAOE,QAAA,SAAS,EAAE,KAAKjB,KAAL,CAAWkB,SAPxB;AAQE,QAAA,MAAM,EAAE,KAAKlB,KAAL,CAAWmB,MARrB;AASE,QAAA,OAAO,EAAE,KAAKnB,KAAL,CAAWoB,OATtB;AAUE,QAAA,WAAW,MAVb;AAWE,QAAA,iBAAiB,EAAE,KAAKpB,KAAL,CAAWqB,iBAXhC;;AAaG,WAAKrB,KAAL,CAAWsB,QAbd,CADF,CADF;;;;AAmBD,GA9DH,sBAAiCjC,KAAK,CAACkC,SAAvC,WACgBC,mBADhB,GACsC,aADtC,UAIgBC,YAJhB,GAI+B,EAC3BJ,iBAAiB,EAAE3B,SADQ,EAJ/B","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';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | 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\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 = {\n    disableAnimations: isTestEnv,\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.props.disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","props","getProps","defaultProps","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","children","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } 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\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\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                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\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    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          aria-label={this.props['aria-label']}\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          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/TooltipMenu/TooltipMenu.d.ts

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

package/components/TooltipMenu/TooltipMenu.md

@@ -16,6 +16,33 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас тултип-меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
 Тултип-меню с заданной шириной.
 
 ```jsx harmony
@@ -153,7 +180,35 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-Условный рендер элементов тултип-меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>;
+```
+
+С иконками и отключенным автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>
+```
+
+Условный рендер элементов тултип-меню (с сохранением поведения [MenuItem](#/Components/MenuItem)).
 
 ```jsx harmony
 import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';

package/hooks/useDrop/useDrop.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { globalObject } from '@skbkontur/global-object';
 export var useDrop = function useDrop(props) {
   if (props === void 0) {
     props = {};
@@ -15,13 +16,13 @@ export var useDrop = function useDrop(props) {
       setIsDraggable = _useState[1];
 
   var clearTimer = useCallback(function () {
-    timerId.current && clearTimeout(timerId.current);
+    timerId.current && globalObject.clearTimeout(timerId.current);
   }, []);
   var handleDragOver = useCallback(function (event) {
     event.preventDefault();
     setIsDraggable(true);
     clearTimer();
-    timerId.current = setTimeout(function () {
+    timerId.current = globalObject.setTimeout(function () {
       overRef.current = false;
       setIsDraggable(false);
     }, 200);

package/hooks/useDrop/useDrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrop.ts"],"names":["useCallback","useEffect","useRef","useState","useDrop","props","onDrop","droppableRef","overRef","timerId","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"mappings":"AAAA,SAA2BA,WAA3B,EAAwCC,SAAxC,EAAmDC,MAAnD,EAA2DC,QAA3D,QAA2E,OAA3E;;;;;;;;;;;;;AAaA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAwCC,KAAxC,EAAgG,KAAxDA,KAAwD,cAAxDA,KAAwD,GAAjC,EAAiC;AACrH,eAAmBA,KAAnB,CAAQC,MAAR,UAAQA,MAAR;;AAEA,MAAMC,YAAY,GAAGL,MAAM,CAAW,IAAX,CAA3B;AACA,MAAMM,OAAO,GAAGN,MAAM,CAAU,KAAV,CAAtB;AACA,MAAMO,OAAO,GAAGP,MAAM,EAAtB;AACA,kBAAsCC,QAAQ,CAAU,KAAV,CAA9C,CAAOO,WAAP,gBAAoBC,cAApB;;AAEA,MAAMC,UAAU,GAAGZ,WAAW,CAAC,YAAM;AACnCS,IAAAA,OAAO,CAACI,OAAR,IAAmBC,YAAY,CAACL,OAAO,CAACI,OAAT,CAA/B;AACD,GAF6B,EAE3B,EAF2B,CAA9B;;AAIA,MAAME,cAAc,GAAGf,WAAW;AAChC,YAACgB,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,GAV+B;AAWhC,GAACC,UAAD,CAXgC,CAAlC;;;AAcA,MAAMK,cAAc,GAAGjB,WAAW,CAAC,UAACgB,KAAD,EAAW;AAC5CA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACG,eAAN;AACD,GAHiC,EAG/B,EAH+B,CAAlC;;AAKA,MAAMC,UAAU,GAAGpB,WAAW;AAC5B,YAACgB,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,GAP2B;AAQ5B,GAACC,cAAD,EAAiBX,MAAjB,CAR4B,CAA9B;;;AAWAL,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMoB,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,GAlBQ,EAkBN,CAACA,UAAD,EAAaL,cAAb,EAA6BE,cAA7B,CAlBM,CAAT;;AAoBA,SAAO,EAAEP,WAAW,EAAXA,WAAF,EAAeW,GAAG,EAAEd,YAApB,EAAP;AACD,CA/DM","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"]}
+{"version":3,"sources":["useDrop.ts"],"names":["useCallback","useEffect","useRef","useState","globalObject","useDrop","props","onDrop","droppableRef","overRef","timerId","isDraggable","setIsDraggable","clearTimer","current","clearTimeout","handleDragOver","event","preventDefault","setTimeout","stopPropagation","handleDrop","ref","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\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<SafeTimer>();\n  const [isDraggable, setIsDraggable] = useState<boolean>(false);\n\n  const clearTimer = useCallback(() => {\n    timerId.current && globalObject.clearTimeout(timerId.current);\n  }, []);\n\n  const handleDragOver = useCallback(\n    (event) => {\n      event.preventDefault();\n      setIsDraggable(true);\n\n      clearTimer();\n      timerId.current = globalObject.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/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js

@@ -1,7 +1,7 @@
-import React, { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 export var useEffectWithoutInitCall = function useEffectWithoutInitCall(effect, deps) {
   var isInitialRenderRef = useRef(true);
-  React.useEffect(function () {
+  useEffect(function () {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
     } else {

package/hooks/useEffectWithoutInitCall/useEffectWithoutInitCall.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useEffectWithoutInitCall.ts"],"names":["React","useRef","useEffectWithoutInitCall","effect","deps","isInitialRenderRef","useEffect","current"],"mappings":"AAAA,OAAOA,KAAP,IAAgCC,MAAhC,QAA8C,OAA9C;;AAEA,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,MAAD,EAAqBC,IAArB,EAA8C;AACpF,MAAMC,kBAAkB,GAAGJ,MAAM,CAAC,IAAD,CAAjC;;AAEAD,EAAAA,KAAK,CAACM,SAAN,CAAgB,YAAM;AACpB,QAAID,kBAAkB,CAACE,OAAvB,EAAgC;AAC9BF,MAAAA,kBAAkB,CAACE,OAAnB,GAA6B,KAA7B;AACD,KAFD,MAEO;AACLJ,MAAAA,MAAM;AACP;AACF,GAND,EAMGC,IANH;AAOD,CAVM","sourcesContent":["import React, { DependencyList, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isInitialRenderRef = useRef(true);\n\n  React.useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    } else {\n      effect();\n    }\n  }, deps);\n};\n"]}
+{"version":3,"sources":["useEffectWithoutInitCall.ts"],"names":["useEffect","useRef","useEffectWithoutInitCall","effect","deps","isInitialRenderRef","current"],"mappings":"AAAA,SAASA,SAAT,EAAoCC,MAApC,QAAkD,OAAlD;;AAEA,OAAO,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,MAAD,EAAqBC,IAArB,EAA8C;AACpF,MAAMC,kBAAkB,GAAGJ,MAAM,CAAC,IAAD,CAAjC;;AAEAD,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIK,kBAAkB,CAACC,OAAvB,EAAgC;AAC9BD,MAAAA,kBAAkB,CAACC,OAAnB,GAA6B,KAA7B;AACD,KAFD,MAEO;AACLH,MAAAA,MAAM;AACP;AACF,GANQ,EAMNC,IANM,CAAT;AAOD,CAVM","sourcesContent":["import { useEffect, DependencyList, useRef } from 'react';\n\nexport const useEffectWithoutInitCall = (effect: () => void, deps: DependencyList) => {\n  const isInitialRenderRef = useRef(true);\n\n  useEffect(() => {\n    if (isInitialRenderRef.current) {\n      isInitialRenderRef.current = false;\n    } else {\n      effect();\n    }\n  }, deps);\n};\n"]}

package/hooks/useEffectWithoutInitCall.d.ts

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

package/hooks/useMemoObject/useMemoObject.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMemoObject.ts"],"names":["useMemo","useMemoObject","objectValue","Object","values"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAAyBC,WAAzB,EAAkD;AAC7E,SAAOF,OAAO,CAAU,oBAAME,WAAN,EAAV,EAA6BC,MAAM,CAACC,MAAP,CAAcF,WAAd,CAA7B,CAAd;AACD,CAFM","sourcesContent":["import { useMemo } from 'react';\n\nexport const useMemoObject = <TObject extends object>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"]}
+{"version":3,"sources":["useMemoObject.ts"],"names":["useMemo","useMemoObject","objectValue","Object","values"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;;;;AAIA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAA4BC,WAA5B,EAAqD;AAChF,SAAOF,OAAO,CAAU,oBAAME,WAAN,EAAV,EAA6BC,MAAM,CAACC,MAAP,CAAcF,WAAd,CAA7B,CAAd;AACD,CAFM","sourcesContent":["import { useMemo } from 'react';\n\nimport { AnyObject } from '../lib/utils';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject) => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"]}

package/hooks/useMemoObject.d.ts

@@ -1 +1,2 @@
-export declare const useMemoObject: <TObject extends object>(objectValue: TObject) => TObject;
+import { AnyObject } from '../lib/utils';
+export declare const useMemoObject: <TObject extends AnyObject>(objectValue: TObject) => TObject;

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/Autocomplete';
 export * from './components/Button';
+export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
 export * from './components/ComboBox';
@@ -22,6 +23,7 @@ export * from './components/Loader';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
+export * from './components/MiniModal';
 export * from './components/Modal';
 export * from './components/Paging';
 export * from './components/PasswordInput';
@@ -36,12 +38,14 @@ export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/Textarea';
 export * from './components/Toast';
+export * from './components/SingleToast';
 export * from './components/Toggle';
 export * from './components/Token';
 export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
 export * from './components/ResponsiveLayout';
+export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
@@ -51,4 +55,7 @@ export * from './lib/theming/themes/DefaultTheme8pxOld';
 export * from './lib/theming/themes/FlatTheme8pxOld';
 export * from './lib/theming/themes/Theme2022';
 export * from './lib/theming/themes/Theme2022Dark';
+export * from './lib/types/props';
 export * from './internal/Popup/types';
+export * as ColorFunctions from './lib/styles/ColorFunctions';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components/Autocomplete';
 export * from './components/Button';
+export * from './components/Calendar';
 export * from './components/Center';
 export * from './components/Checkbox';
 export * from './components/ComboBox';
@@ -22,6 +23,7 @@ export * from './components/Loader';
 export * from './components/MenuHeader';
 export * from './components/MenuItem';
 export * from './components/MenuSeparator';
+export * from './components/MiniModal';
 export * from './components/Modal';
 export * from './components/Paging';
 export * from './components/PasswordInput';
@@ -36,12 +38,14 @@ export * from './components/Switcher';
 export * from './components/Tabs';
 export * from './components/Textarea';
 export * from './components/Toast';
+export * from './components/SingleToast';
 export * from './components/Toggle';
 export * from './components/Token';
 export * from './components/TokenInput';
 export * from './components/Tooltip';
 export * from './components/TooltipMenu';
 export * from './components/ResponsiveLayout';
+export * from './lib/featureFlagsContext';
 export * from './lib/locale';
 export * from './lib/theming/ThemeContext';
 export * from './lib/theming/ThemeFactory';
@@ -51,4 +55,7 @@ export * from './lib/theming/themes/DefaultTheme8pxOld';
 export * from './lib/theming/themes/FlatTheme8pxOld';
 export * from './lib/theming/themes/Theme2022';
 export * from './lib/theming/themes/Theme2022Dark';
-export * from './internal/Popup/types';
+export * from './lib/types/props';
+export * from './internal/Popup/types';import * as _ColorFunctions from
+'./lib/styles/ColorFunctions';export { _ColorFunctions as ColorFunctions };import * as _DimensionFunctions from
+'./lib/styles/DimensionFunctions';export { _DimensionFunctions as DimensionFunctions };

package/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,wBAAd","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './internal/Popup/types';\n"]}
+{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,0BAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,2BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,mBAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/MiniModal';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/SingleToast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/featureFlagsContext';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './lib/types/props';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}

package/internal/BGRuler/BGRuler.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import { getDOMRect } from "../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../lib/createPropsGetter";
 /**
  * Компонент рисует пиксельную линейку на заднем фоне.
  * Помогает контролировать размеры элементов при скриншотном тестировании.
@@ -20,6 +21,7 @@ export var BGRuler = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(BGRuler.defaultProps);
     _this.iframe = null;
 
     _this.componentDidMount = function () {
@@ -52,12 +54,15 @@ export var BGRuler = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _this$props = this.props,
         width = _this$props.width,
-        height = _this$props.height,
-        color = _this$props.color,
-        top = _this$props.top,
-        bottom = _this$props.bottom,
-        left = _this$props.left,
-        right = _this$props.right;
+        bottom = _this$props.bottom;
+
+    var _this$getProps = this.getProps(),
+        height = _this$getProps.height,
+        top = _this$getProps.top,
+        left = _this$getProps.left,
+        right = _this$getProps.right,
+        color = _this$getProps.color;
+
     var wrapper = {
       position: 'absolute',
       width: width,

package/internal/BGRuler/BGRuler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BGRuler.tsx"],"names":["React","getDOMRect","BGRuler","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","render","props","width","height","color","top","bottom","left","right","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","Component","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../lib/dom/getDOMRect';\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<{\n  width?: string | number;\n  height?: string | number;\n  top?: string | number;\n  bottom?: string | number;\n  right?: string | number;\n  left?: string | number;\n  color?: string;\n}> {\n  public static defaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\n\n  private iframe: HTMLIFrameElement | null = null;\n\n  public componentDidMount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\n    }\n    this.update();\n  };\n\n  public componentWillUnmount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\n    }\n  };\n\n  public update = () => {\n    this.forceUpdate();\n  };\n\n  public render() {\n    const { width, height, color, top, bottom, left, right } = this.props;\n    const wrapper: React.CSSProperties = {\n      position: 'absolute',\n      width,\n      height,\n      top,\n      bottom,\n      left,\n      right,\n      overflow: 'hidden',\n    };\n    const iframe: React.CSSProperties = {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      border: 0,\n      visibility: 'hidden',\n    };\n    const marks: React.CSSProperties = {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      backgroundSize: '100px 20px',\n      backgroundRepeat: 'repeat-x',\n    };\n    const highMarks: React.CSSProperties = {\n      ...marks,\n      height: '100%',\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\n    };\n    const middleMarks: React.CSSProperties = {\n      ...marks,\n      height: '75%',\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\n    };\n    const shortMarks: React.CSSProperties = {\n      ...marks,\n      height: '40%',\n      backgroundImage: `\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\n      `,\n    };\n    const rulerWidth = getDOMRect(this.iframe).width;\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\n      .fill(null)\n      .map((value, index) => {\n        const label: React.CSSProperties = {\n          position: 'absolute',\n          fontFamily: 'Arial',\n          fontSize: 10,\n          lineHeight: 1,\n          color,\n          bottom: -1,\n          left: index * 100 + 5,\n        };\n        return (\n          <span key={index} style={label}>\n            {index * 100}\n          </span>\n        );\n      });\n    return (\n      <div style={wrapper}>\n        <div style={highMarks} />\n        <div style={middleMarks} />\n        <div style={shortMarks} />\n        {labels}\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\n      </div>\n    );\n  }\n\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\n    this.iframe = ref;\n  };\n}\n"]}
+{"version":3,"sources":["BGRuler.tsx"],"names":["React","getDOMRect","createPropsGetter","BGRuler","getProps","defaultProps","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","render","props","width","bottom","height","top","left","right","color","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","backgroundImage","middleMarks","shortMarks","rulerWidth","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../lib/createPropsGetter';\n\nexport interface BGRulerProps {\n  width?: string | number;\n  height?: string | number;\n  top?: string | number;\n  bottom?: string | number;\n  right?: string | number;\n  left?: string | number;\n  color?: string;\n}\n\ntype DefaultProps = Required<Pick<BGRulerProps, 'height' | 'top' | 'left' | 'right' | 'color'>>;\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<BGRulerProps> {\n  public static defaultProps: DefaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\n\n  private getProps = createPropsGetter(BGRuler.defaultProps);\n\n  private iframe: HTMLIFrameElement | null = null;\n\n  public componentDidMount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\n    }\n    this.update();\n  };\n\n  public componentWillUnmount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\n    }\n  };\n\n  public update = () => {\n    this.forceUpdate();\n  };\n\n  public render() {\n    const { width, bottom } = this.props;\n    const { height, top, left, right, color } = this.getProps();\n    const wrapper: React.CSSProperties = {\n      position: 'absolute',\n      width,\n      height,\n      top,\n      bottom,\n      left,\n      right,\n      overflow: 'hidden',\n    };\n    const iframe: React.CSSProperties = {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      border: 0,\n      visibility: 'hidden',\n    };\n    const marks: React.CSSProperties = {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      backgroundSize: '100px 20px',\n      backgroundRepeat: 'repeat-x',\n    };\n    const highMarks: React.CSSProperties = {\n      ...marks,\n      height: '100%',\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\n    };\n    const middleMarks: React.CSSProperties = {\n      ...marks,\n      height: '75%',\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\n    };\n    const shortMarks: React.CSSProperties = {\n      ...marks,\n      height: '40%',\n      backgroundImage: `\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\n      `,\n    };\n    const rulerWidth = getDOMRect(this.iframe).width;\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\n      .fill(null)\n      .map((value, index) => {\n        const label: React.CSSProperties = {\n          position: 'absolute',\n          fontFamily: 'Arial',\n          fontSize: 10,\n          lineHeight: 1,\n          color,\n          bottom: -1,\n          left: index * 100 + 5,\n        };\n        return (\n          <span key={index} style={label}>\n            {index * 100}\n          </span>\n        );\n      });\n    return (\n      <div style={wrapper}>\n        <div style={highMarks} />\n        <div style={middleMarks} />\n        <div style={shortMarks} />\n        {labels}\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\n      </div>\n    );\n  }\n\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\n    this.iframe = ref;\n  };\n}\n"]}