@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/Tooltip/Tooltip.md

@@ -0,0 +1,322 @@
+### Базовый пример
+Отступы в тултипе подобраны так, чтобы базовая линия текста со шрифтом Segoe UI в тултипе совпадала с базовой линией стандартных контролов
+
+```jsx harmony
+import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';
+import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
+import { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular';
+import { Button, Gapped, Input, Select, Tooltip } from '@skbkontur/react-ui';
+
+const [size, setSize] = React.useState('small');
+
+const render = () => (
+  <div
+    style={{
+      width: 250,
+      fontSize: size === 'large' ? 16 : 14,
+      fontFamily: 'Segoe UI',
+    }}
+  >
+    Задача организации, в особенности же рамки и место обучения кадров влечет за собой процесс внедрения и модернизации
+    форм развития.
+  </div>
+);
+
+<div style={{ fontFamily: 'Segoe UI' }}>
+  <Gapped vertical>
+    <Gapped>
+      <div style={{ width: 40 }}>Size</div>
+      <Select width={120} value={size} items={['small', 'medium', 'large']} onValueChange={setSize} size={size} />
+    </Gapped>
+    <Tooltip render={render} pos="right top">
+      <Input size={size} leftIcon={<SearchLoupeIcon16Regular />} width={170} />
+    </Tooltip>
+    <Tooltip render={render} pos="right top">
+      <Button size={size} icon={<UiMenuBars3HIcon16Regular />}>
+        Menu
+      </Button>
+    </Tooltip>
+    <Tooltip render={render} pos="right top">
+      <QuestionCircleIcon16Regular />
+    </Tooltip>
+  </Gapped>
+</div>;
+```
+
+### Выравнивание базовой линии
+Выравнивание базовой линии с RadioGroup требует дополнительных отступов.
+
+```jsx harmony
+import { Gapped, Tooltip, RadioGroup, Radio } from '@skbkontur/react-ui';
+
+const render = () => (
+  <div
+    style={{
+      fontSize: 14,
+      fontFamily: 'Segoe UI',
+    }}
+  >
+    Выровнено по первому Radio
+  </div>
+);
+
+<div style={{ fontFamily: 'Segoe UI' }}>
+  <Tooltip useWrapper={false} render={render} pos="right top">
+    <div style={{ padding: '10px 0', display: 'inline-block' }}>
+      <RadioGroup>
+        <Gapped vertical gap={0}>
+          <Radio value="2">Two</Radio>
+          <Radio value="4">Four</Radio>
+          <Radio value="6">Six</Radio>
+          <Radio value="8">Eight</Radio>
+        </Gapped>
+      </RadioGroup>
+    </div>
+  </Tooltip>
+</div>;
+```
+
+### Расположение тултипа
+Тултип может располагаться в одной из 12 позиции и триггериться одним из 8 способов.
+
+```jsx harmony
+import { Button, Center, Gapped, Select, Tooltip } from '@skbkontur/react-ui';
+
+const S = 60;
+
+const Block = ({ pos, trigger, top, left, onMouseDown }) => (
+  <div
+    style={{
+      top,
+      left,
+      display: 'inline-block',
+      position: 'absolute',
+      cursor: trigger === 'click' ? 'pointer' : 'default',
+    }}
+  >
+    <Tooltip render={() => pos} pos={pos} trigger={trigger}>
+      <div
+        tabIndex={trigger === 'focus' || trigger === 'hover&focus' ? 0 : null}
+        style={{
+          height: S - 5,
+          width: S - 5,
+          background: 'gray',
+          border: 'solid 1px',
+          boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
+        }}
+      />
+    </Tooltip>
+  </div>
+);
+
+class UseManualTooltip extends React.Component {
+  constructor(props) {
+    super(props);
+    this.tooltip = null;
+  }
+
+  render() {
+    return (
+      <Gapped vertical>
+        <Gapped>
+          <Button width={1.5 * S - 5} onClick={this.handleClickOnShow.bind(this)}>
+            Show
+          </Button>
+          <Button width={1.5 * S - 5} onClick={this.handleClickOnHide.bind(this)}>
+            Hide
+          </Button>
+        </Gapped>
+        <Tooltip
+          render={() => 'Manual tooltip'}
+          pos="bottom center"
+          trigger="manual"
+          ref={element => {
+            this.tooltip = element;
+          }}
+        >
+          <div
+            style={{
+              width: 3 * S,
+              height: S,
+              lineHeight: `${S}px`,
+              background: 'gray',
+              border: 'solid 1px',
+              boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
+              textAlign: 'center',
+            }}
+          >
+            Manual control
+          </div>
+        </Tooltip>
+      </Gapped>
+    );
+  }
+
+  handleClickOnShow() {
+    if (this.tooltip) {
+      this.tooltip.show();
+    }
+  }
+  handleClickOnHide() {
+    if (this.tooltip) {
+      this.tooltip.hide();
+    }
+  }
+}
+
+const blocks = [
+  { top: S, left: S * 2, pos: 'top left' },
+  { top: S, left: S * 4, pos: 'top center' },
+  { top: S, left: S * 6, pos: 'top right' },
+  { top: S * 2, left: S * 7, pos: 'right top' },
+  { top: S * 4, left: S * 7, pos: 'right middle' },
+  { top: S * 6, left: S * 7, pos: 'right bottom' },
+  { top: S * 7, left: S * 6, pos: 'bottom right' },
+  { top: S * 7, left: S * 4, pos: 'bottom center' },
+  { top: S * 7, left: S * 2, pos: 'bottom left' },
+  { top: S * 6, left: S, pos: 'left bottom' },
+  { top: S * 4, left: S, pos: 'left middle' },
+  { top: S * 2, left: S, pos: 'left top' },
+];
+
+const [trigger, setTrigger] = React.useState('hover');
+
+const isManual = trigger === 'manual';
+
+<div
+  style={{
+    width: S * 9,
+    height: S * 9,
+    position: 'relative',
+    border: '1px solid',
+    background: `repeating-linear-gradient(
+                            45deg,
+                            #808080,
+                            #808080 ${S / 4}px,
+                            #d3d3d3 ${S / 4}px,
+                            #d3d3d3 ${S / 2}px
+                          )`,
+  }}
+>
+  <Center>
+    <Gapped vertical>
+      <Gapped>
+        Trigger
+        <Select
+          width={S * 2}
+          size="small"
+          value={trigger}
+          items={['click', 'hover', 'focus', 'hover&focus', 'hoverAnchor', 'opened', 'closed', 'manual']}
+          onValueChange={setTrigger}
+        />
+      </Gapped>
+      {isManual ? <UseManualTooltip /> : null}
+    </Gapped>
+  </Center>
+
+  {!isManual && blocks.map((block, i) => <Block key={i} {...block} trigger={trigger} />)}
+</div>;
+```
+
+### anchorElement
+Есть возможность прицеплять тултип к любому HTML элементу на странице с помощью `anchorElement`. При этом сам `Tooltip` может рендериться в совершенно другом месте приложения.
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const S = 60;
+const blockStyle = {
+  height: S - 5,
+  width: S - 5,
+  boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
+  background: 'gray',
+  border: '1px solid'
+};
+const containerStyle = {
+  width: S * 9,
+  height: S * 9,
+  position: 'relative',
+  background: `repeating-linear-gradient(
+                                45deg,
+                                #808080,
+                                #808080 ${S / 4}px,
+                                #d3d3d3 ${S / 4}px,
+                                #d3d3d3 ${S / 2}px
+                              )`,
+  border: '1px solid',
+};
+
+const blocks = [
+  { top: S, left: S * 2 },
+  { top: S, left: S * 4 },
+  { top: S, left: S * 6 },
+  { top: S * 2, left: S * 7 },
+  { top: S * 4, left: S * 7 },
+  { top: S * 6, left: S * 7 },
+  { top: S * 7, left: S * 6 },
+  { top: S * 7, left: S * 4 },
+  { top: S * 7, left: S * 2 },
+  { top: S * 6, left: S },
+  { top: S * 4, left: S },
+  { top: S * 2, left: S },
+];
+
+class AnchorTooltipExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      blocks,
+      anchor: null,
+    };
+  }
+
+  render() {
+    return (
+      <>
+        {this.state.anchor ? (
+          <Tooltip anchorElement={this.state.anchor} render={() => 'Hello React'} trigger="hover" />
+        ) : null}
+        <div style={containerStyle}>
+          {this.state.blocks.map(({ top, left }, i) => (
+            <div key={i} style={{ top, left, display: 'inline-block', position: 'absolute' }}>
+              <div
+                style={blockStyle}
+                onMouseEnter={event => this.setState({ anchor: event.target })}
+                onMouseLeave={() => this.setState({ anchor: null })}
+              />
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  }
+}
+
+<AnchorTooltipExample />;
+```
+
+### Задержка перед появлением
+У тултипа можно переопределить задержку перед его появлением. Скрытие же происходит с задержкой по умолчанию.
+
+```jsx harmony
+import { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular';
+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">
+      <QuestionCircleIcon16Regular />
+    </Tooltip>
+  </Gapped>
+</div>;
+```

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

@@ -1,31 +1,29 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    closeButton: function closeButton(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        box-sizing: content-box;\n        right: 0;\n        top: 0;\n        width: ", ";\n        height: ", ";\n        color: ", ";\n        cursor: pointer;\n        line-height: 0;\n\n        &:hover {\n          color: ", ";\n        }\n      "])), t.tooltipCloseBtnSide, t.tooltipCloseBtnSide, t.tooltipCloseBtnColor, t.tooltipCloseBtnHoverColor);
-    },
-    closeButtonSmall: function closeButtonSmall(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        padding: ", ";\n      "])), t.tooltipCloseBtnPaddingSmall);
-    },
-    closeButtonMedium: function closeButtonMedium(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        padding: ", ";\n      "])), t.tooltipCloseBtnPaddingMedium);
-    },
-    closeButtonLarge: function closeButtonLarge(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        padding: ", ";\n      "])), t.tooltipCloseBtnPaddingLarge);
-    },
-    tooltipContent: function tooltipContent(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        position: relative;\n        color: ", ";\n      "])), t.tooltipTextColor);
-    },
-    tooltipContentSmall: function tooltipContentSmall(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        padding: ", " ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.tooltipPaddingYSmall, t.tooltipPaddingXSmall, t.tooltipFontSizeSmall, t.tooltipLineHeightSmall);
-    },
-    tooltipContentMedium: function tooltipContentMedium(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        padding: ", " ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.tooltipPaddingYMedium, t.tooltipPaddingXMedium, t.tooltipFontSizeMedium, t.tooltipLineHeightMedium);
-    },
-    tooltipContentLarge: function tooltipContentLarge(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        padding: ", " ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.tooltipPaddingYLarge, t.tooltipPaddingXLarge, t.tooltipFontSizeLarge, t.tooltipLineHeightLarge);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  closeButton: function closeButton(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      box-sizing: content-box;\n      right: 0;\n      top: 0;\n      width: ", ";\n      height: ", ";\n      color: ", ";\n      cursor: pointer;\n      line-height: 0;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnSide, t.tooltipCloseBtnSide, t.tooltipCloseBtnColor, t.tooltipCloseBtnHoverColor);
+  },
+  closeButtonSmall: function closeButtonSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingSmall);
+  },
+  closeButtonMedium: function closeButtonMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingMedium);
+  },
+  closeButtonLarge: function closeButtonLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.tooltipCloseBtnPaddingLarge);
+  },
+  tooltipContent: function tooltipContent(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      color: ", ";\n    "])), t.tooltipTextColor);
+  },
+  tooltipContentSmall: function tooltipContentSmall(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYSmall, t.tooltipPaddingXSmall, t.tooltipFontSizeSmall, t.tooltipLineHeightSmall);
+  },
+  tooltipContentMedium: function tooltipContentMedium(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYMedium, t.tooltipPaddingXMedium, t.tooltipFontSizeMedium, t.tooltipLineHeightMedium);
+  },
+  tooltipContentLarge: function tooltipContentLarge(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipPaddingYLarge, t.tooltipPaddingXLarge, t.tooltipFontSizeLarge, t.tooltipLineHeightLarge);
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","closeButton","t","css","_templateObject","_taggedTemplateLiteralLoose","tooltipCloseBtnSide","tooltipCloseBtnColor","tooltipCloseBtnHoverColor","closeButtonSmall","_templateObject2","tooltipCloseBtnPaddingSmall","closeButtonMedium","_templateObject3","tooltipCloseBtnPaddingMedium","closeButtonLarge","_templateObject4","tooltipCloseBtnPaddingLarge","tooltipContent","_templateObject5","tooltipTextColor","tooltipContentSmall","_templateObject6","tooltipPaddingYSmall","tooltipPaddingXSmall","tooltipFontSizeSmall","tooltipLineHeightSmall","tooltipContentMedium","_templateObject7","tooltipPaddingYMedium","tooltipPaddingXMedium","tooltipFontSizeMedium","tooltipLineHeightMedium","tooltipContentLarge","_templateObject8","tooltipPaddingYLarge","tooltipPaddingXLarge","tooltipFontSizeLarge","tooltipLineHeightLarge"],"sources":["Tooltip.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    closeButton(t: Theme) {\n      return emotion.css`\n        position: absolute;\n        box-sizing: content-box;\n        right: 0;\n        top: 0;\n        width: ${t.tooltipCloseBtnSide};\n        height: ${t.tooltipCloseBtnSide};\n        color: ${t.tooltipCloseBtnColor};\n        cursor: pointer;\n        line-height: 0;\n\n        &:hover {\n          color: ${t.tooltipCloseBtnHoverColor};\n        }\n      `;\n    },\n\n    closeButtonSmall(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipCloseBtnPaddingSmall};\n      `;\n    },\n\n    closeButtonMedium(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipCloseBtnPaddingMedium};\n      `;\n    },\n\n    closeButtonLarge(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipCloseBtnPaddingLarge};\n      `;\n    },\n\n    tooltipContent(t: Theme) {\n      return emotion.css`\n        position: relative;\n        color: ${t.tooltipTextColor};\n      `;\n    },\n\n    tooltipContentSmall(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipPaddingYSmall} ${t.tooltipPaddingXSmall};\n        font-size: ${t.tooltipFontSizeSmall};\n        line-height: ${t.tooltipLineHeightSmall};\n      `;\n    },\n\n    tooltipContentMedium(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipPaddingYMedium} ${t.tooltipPaddingXMedium};\n        font-size: ${t.tooltipFontSizeMedium};\n        line-height: ${t.tooltipLineHeightMedium};\n      `;\n    },\n\n    tooltipContentLarge(t: Theme) {\n      return emotion.css`\n        padding: ${t.tooltipPaddingYLarge} ${t.tooltipPaddingXLarge};\n        font-size: ${t.tooltipFontSizeLarge};\n        line-height: ${t.tooltipLineHeightLarge};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,WAAW,WAAAA,YAACC,CAAQ,EAAE;QACpB,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;QAKPH,CAAC,CAACI,mBAAmB;QACpBJ,CAAC,CAACI,mBAAmB;QACtBJ,CAAC,CAACK,oBAAoB;;;;;QAKpBL,CAAC,CAACM,yBAAyB;;;MAG1C,CAAC;;MAEDC,gBAAgB,WAAAA,iBAACP,CAAQ,EAAE;QACzB,OAAOF,OAAO,CAACG,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;QACLH,CAAC,CAACS,2BAA2B;;MAE5C,CAAC;;MAEDC,iBAAiB,WAAAA,kBAACV,CAAQ,EAAE;QAC1B,OAAOF,OAAO,CAACG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;QACLH,CAAC,CAACY,4BAA4B;;MAE7C,CAAC;;MAEDC,gBAAgB,WAAAA,iBAACb,CAAQ,EAAE;QACzB,OAAOF,OAAO,CAACG,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;QACLH,CAAC,CAACe,2BAA2B;;MAE5C,CAAC;;MAEDC,cAAc,WAAAA,eAAChB,CAAQ,EAAE;QACvB,OAAOF,OAAO,CAACG,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;QAEPH,CAAC,CAACkB,gBAAgB;;MAE/B,CAAC;;MAEDC,mBAAmB,WAAAA,oBAACnB,CAAQ,EAAE;QAC5B,OAAOF,OAAO,CAACG,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;QACLH,CAAC,CAACqB,oBAAoB,EAAIrB,CAAC,CAACsB,oBAAoB;QAC9CtB,CAAC,CAACuB,oBAAoB;QACpBvB,CAAC,CAACwB,sBAAsB;;MAE3C,CAAC;;MAEDC,oBAAoB,WAAAA,qBAACzB,CAAQ,EAAE;QAC7B,OAAOF,OAAO,CAACG,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAAvB,2BAAA;QACLH,CAAC,CAAC2B,qBAAqB,EAAI3B,CAAC,CAAC4B,qBAAqB;QAChD5B,CAAC,CAAC6B,qBAAqB;QACrB7B,CAAC,CAAC8B,uBAAuB;;MAE5C,CAAC;;MAEDC,mBAAmB,WAAAA,oBAAC/B,CAAQ,EAAE;QAC5B,OAAOF,OAAO,CAACG,GAAG,CAAA+B,gBAAA,KAAAA,gBAAA,GAAA7B,2BAAA;QACLH,CAAC,CAACiC,oBAAoB,EAAIjC,CAAC,CAACkC,oBAAoB;QAC9ClC,CAAC,CAACmC,oBAAoB;QACpBnC,CAAC,CAACoC,sBAAsB;;MAE3C;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","closeButton","t","_templateObject","_taggedTemplateLiteralLoose","tooltipCloseBtnSide","tooltipCloseBtnColor","tooltipCloseBtnHoverColor","closeButtonSmall","_templateObject2","tooltipCloseBtnPaddingSmall","closeButtonMedium","_templateObject3","tooltipCloseBtnPaddingMedium","closeButtonLarge","_templateObject4","tooltipCloseBtnPaddingLarge","tooltipContent","_templateObject5","tooltipTextColor","tooltipContentSmall","_templateObject6","tooltipPaddingYSmall","tooltipPaddingXSmall","tooltipFontSizeSmall","tooltipLineHeightSmall","tooltipContentMedium","_templateObject7","tooltipPaddingYMedium","tooltipPaddingXMedium","tooltipFontSizeMedium","tooltipLineHeightMedium","tooltipContentLarge","_templateObject8","tooltipPaddingYLarge","tooltipPaddingXLarge","tooltipFontSizeLarge","tooltipLineHeightLarge"],"sources":["Tooltip.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  closeButton(t: Theme) {\n    return css`\n      position: absolute;\n      box-sizing: content-box;\n      right: 0;\n      top: 0;\n      width: ${t.tooltipCloseBtnSide};\n      height: ${t.tooltipCloseBtnSide};\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      line-height: 0;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  closeButtonSmall(t: Theme) {\n    return css`\n      padding: ${t.tooltipCloseBtnPaddingSmall};\n    `;\n  },\n\n  closeButtonMedium(t: Theme) {\n    return css`\n      padding: ${t.tooltipCloseBtnPaddingMedium};\n    `;\n  },\n\n  closeButtonLarge(t: Theme) {\n    return css`\n      padding: ${t.tooltipCloseBtnPaddingLarge};\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      position: relative;\n      color: ${t.tooltipTextColor};\n    `;\n  },\n\n  tooltipContentSmall(t: Theme) {\n    return css`\n      padding: ${t.tooltipPaddingYSmall} ${t.tooltipPaddingXSmall};\n      font-size: ${t.tooltipFontSizeSmall};\n      line-height: ${t.tooltipLineHeightSmall};\n    `;\n  },\n\n  tooltipContentMedium(t: Theme) {\n    return css`\n      padding: ${t.tooltipPaddingYMedium} ${t.tooltipPaddingXMedium};\n      font-size: ${t.tooltipFontSizeMedium};\n      line-height: ${t.tooltipLineHeightMedium};\n    `;\n  },\n\n  tooltipContentLarge(t: Theme) {\n    return css`\n      padding: ${t.tooltipPaddingYLarge} ${t.tooltipPaddingXLarge};\n      font-size: ${t.tooltipFontSizeLarge};\n      line-height: ${t.tooltipLineHeightLarge};\n    `;\n  },\n});\n"],"mappings":"kPAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,WAAW,WAAAA,YAACC,CAAQ,EAAE;IACpB,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;IAKCF,CAAC,CAACG,mBAAmB;IACpBH,CAAC,CAACG,mBAAmB;IACtBH,CAAC,CAACI,oBAAoB;;;;;IAKpBJ,CAAC,CAACK,yBAAyB;;;EAG1C,CAAC;;EAEDC,gBAAgB,WAAAA,iBAACN,CAAQ,EAAE;IACzB,OAAOJ,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;IACGF,CAAC,CAACQ,2BAA2B;;EAE5C,CAAC;;EAEDC,iBAAiB,WAAAA,kBAACT,CAAQ,EAAE;IAC1B,OAAOJ,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACGF,CAAC,CAACW,4BAA4B;;EAE7C,CAAC;;EAEDC,gBAAgB,WAAAA,iBAACZ,CAAQ,EAAE;IACzB,OAAOJ,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA;IACGF,CAAC,CAACc,2BAA2B;;EAE5C,CAAC;;EAEDC,cAAc,WAAAA,eAACf,CAAQ,EAAE;IACvB,OAAOJ,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;IAECF,CAAC,CAACiB,gBAAgB;;EAE/B,CAAC;;EAEDC,mBAAmB,WAAAA,oBAAClB,CAAQ,EAAE;IAC5B,OAAOJ,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAAjB,2BAAA;IACGF,CAAC,CAACoB,oBAAoB,EAAIpB,CAAC,CAACqB,oBAAoB;IAC9CrB,CAAC,CAACsB,oBAAoB;IACpBtB,CAAC,CAACuB,sBAAsB;;EAE3C,CAAC;;EAEDC,oBAAoB,WAAAA,qBAACxB,CAAQ,EAAE;IAC7B,OAAOJ,GAAG,CAAA6B,gBAAA,KAAAA,gBAAA,GAAAvB,2BAAA;IACGF,CAAC,CAAC0B,qBAAqB,EAAI1B,CAAC,CAAC2B,qBAAqB;IAChD3B,CAAC,CAAC4B,qBAAqB;IACrB5B,CAAC,CAAC6B,uBAAuB;;EAE5C,CAAC;;EAEDC,mBAAmB,WAAAA,oBAAC9B,CAAQ,EAAE;IAC5B,OAAOJ,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA7B,2BAAA;IACGF,CAAC,CAACgC,oBAAoB,EAAIhC,CAAC,CAACiC,oBAAoB;IAC9CjC,CAAC,CAACkC,oBAAoB;IACpBlC,CAAC,CAACmC,sBAAsB;;EAE3C;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Tooltip/Tooltip.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     closeButton(t: Theme): string;
     closeButtonSmall(t: Theme): string;
     closeButtonMedium(t: Theme): string;

package/components/TooltipMenu/TooltipMenu.md

@@ -0,0 +1,241 @@
+### Базовый пример
+
+```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>;
+```
+
+### Управление состоянием тултип-меню
+В проп `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
+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 { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <UiMenuBars3HIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню всегда всплывающее справа от `caption`
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular 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 { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular 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>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</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>
+```