@skbkontur/react-ui 3.8.0 → 3.8.4

package/cjs/components/Toggle/Toggle.md

@@ -1,20 +1,94 @@
+Базовый пример тогла.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked}>
+  {checked ? 'On' : 'Off'}
+</Toggle>
+```
+
+Пример тогла включенного по умолчанию.
+
+```jsx harmony
+<Toggle defaultChecked>
+  Включен по умолчанию
+</Toggle>
+```
+
+Тогл с надписью слева от переключателя.
+
 ```jsx harmony
 const [checked, setChecked] = React.useState(false);
 
-<div>
-  <Toggle checked={checked} onValueChange={setChecked} /> {checked ? 'On' : 'Off'}
-</div>;
+<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
+  Показывать уведомления
+</Toggle>
 ```
 
-В компонент можно передать `children`, который будет отображаться рядом с переключателем.
-Положение `children` относительно переключателя указывается в `captionPosition`.
+Тогл с внешним `<label/>`.
 
 ```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
 const [checked, setChecked] = React.useState(false);
 
-<div>
-  <Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
-    <span>Показывать уведомления</span>
+<Gapped>
+  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
+  <label htmlFor="toggle-1">Внешний label</label>
+</Gapped>
+```
+
+Тогл получающий фокус после загрузки страницы.
+
+```jsx harmony
+<Toggle autoFocus>
+  Сразу с фокусом
+</Toggle>
+```
+
+Тоглы в различных стилях.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap="20px">
+  <Toggle warning>
+    Warning
+  </Toggle>
+  <Toggle error>
+    Error
+  </Toggle>
+  <Toggle loading>
+    Loading
   </Toggle>
-</div>;
+  <Toggle disabled>
+    Disabled
+  </Toggle>
+</Gapped>
+```
+
+Тогл с кастомным действием при получении и потере фокуса.
+
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle
+  onFocus={() => Toast.push('Я получил фокус!')}
+  onBlur={() => Toast.push('И потерял его...')}
+  >
+  С кастомными действиями при фокусе и его потере
+</Toggle>
+```
+
+
+Тогл с кастомным действием при переключении.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
+  Кастомное действие при переключении
+</Toggle>
 ```

package/cjs/components/Toggle/Toggle.styles.d.ts

@@ -2,6 +2,7 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     handle: string;
     container: string;
+    disabled: string;
     containerDisabled: string;
     containerLoading: string;
     background: string;
@@ -24,5 +25,6 @@ export declare const styles: {
     disabled(): string;
     rootLeft(): string;
     caption(t: Theme): string;
+    disabledCaption(t: Theme): string;
     captionLeft(t: Theme): string;
 };

package/cjs/components/Toggle/Toggle.styles.js

@@ -1,9 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 
 var globalClasses = (0, _Emotion.prefix)('toggle')({
   handle: 'handle',
   container: 'container',
+  disabled: 'disabled',
   containerDisabled: 'container-disabled',
   containerLoading: 'container-loading',
   background: 'background' });exports.globalClasses = globalClasses;
@@ -13,17 +14,17 @@ var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active .", " {\n        width: ", ";\n      }\n      &:active input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .", " {\n        background: ", ";\n      }\n      &:active:not(.", ") .", " {\n        width: ", ";\n      }\n      &:active:not(.", ") input:checked ~ .", " {\n        transform: translateX(", ") translateX(-", ")\n          translateX(-", ");\n      }\n    "])),
 
 
 
     globalClasses.handle,
     t.toggleBgHover,
 
-    globalClasses.handle,
+    globalClasses.disabled, globalClasses.handle,
     handleActiveWidth,
 
-    globalClasses.handle,
+    globalClasses.disabled, globalClasses.handle,
     t.toggleWidth, handleWidthWithBorders,
     t.toggleHandleActiveWidthIncrement);
 
@@ -47,10 +48,8 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   handleDisabled: function handleDisabled(t) {
-    var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override root hover/active styles\n      width: ", " !important; // override root active styles\n    "])),
-    t.toggleDisabledHandleBg,
-    handleSize);
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override root hover/active styles\n    "])),
+    t.toggleDisabledHandleBg);
 
   },
 
@@ -197,8 +196,14 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  disabledCaption: function disabledCaption(t) {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDisabled);
+
+  },
+
   captionLeft: function captionLeft(t) {
-    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])),
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])),
     t.toggleTextColor,
     t.toggleCaptionGap);
 

package/cjs/components/Toggle/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","disabled","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n      width: ${handleSize} !important; // override root active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  outline(t: Theme) {\n    return css`\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      display: inline-block;\n      height: ${t.toggleHeight};\n      position: relative;\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  disabled: 'disabled',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  outline(t: Theme) {\n    return css`\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      display: inline-block;\n      height: ${t.toggleHeight};\n      position: relative;\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n    `;\n  },\n\n  disabledCaption(t: Theme) {\n    return css`\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}

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

@@ -13,14 +13,29 @@ export interface TooltipMenuProps extends CommonProps {
     menuWidth?: number | string;
     /**
      * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо ```caption```,
+     * если передана, используется вместо `caption`,
      * в таком случае управлять открытием и закрытием меню
      * придется в этой функции
      */
     caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
     header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
     footer?: React.ReactNode;
-    /**  Массив разрешенных положений меню относительно caption'а. */
+    /**  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
+     */
     positions?: PopupPosition[];
     /**
      * Не показывать анимацию
@@ -28,12 +43,15 @@ export interface TooltipMenuProps extends CommonProps {
     disableAnimations: boolean;
 }
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
- * Положение зависит от переданного массива ```positions``` и работает так:
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
  */
 export declare class TooltipMenu extends React.Component<TooltipMenuProps> {
     static __KONTUR_REACT_UI__: string;

package/cjs/components/TooltipMenu/TooltipMenu.js

@@ -28,6 +28,21 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -35,12 +50,15 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
- * Положение зависит от переданного массива ```positions``` и работает так:
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
  */var
 TooltipMenu = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TooltipMenu, _React$Component);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenu","props","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"uPAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,W;;;;;;AAMX,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACC,mCAAvB,EAAwC;AACtC,YAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,0BAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEC,2BAAaC,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEH,KAAK,CAACI,oBADxB;AAEEC,cAAAA,WAAW,EAAEL,KAAK,CAACM,iBAFrB;AAGEC,cAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB,EADK;;AAMLR,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACS,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAI,CAAC,KAAKd,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,mCAAC,4BAAD,EAAmB,KAAKD,KAAxB;AACE,mCAAC,oBAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWe,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKf,KAAL,CAAWgB,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKhB,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWiB,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKjB,KAAL,CAAWkB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKlB,KAAL,CAAWmB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKnB,KAAL,CAAWoB,iBARhC;;AAUG,WAAKpB,KAAL,CAAWqB,QAVd,CADF,CADF;;;;AAgBD,G,sBA1D8BC,eAAMC,S,oCAA1BxB,W,CACGyB,mB,GAAsB,a,CADzBzB,W,CAGG0B,Y,GAAe,EAC3BL,iBAAiB,EAAEM,6BADQ,E","sourcesContent":["import React from 'react';\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 { PopupPosition } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps {\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  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPosition[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.\n * Положение зависит от переданного массива ```positions``` и работает так:\n * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,\n * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.\n * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.\n * Если ```positions``` передан или передан пустой массив, используются все возможные положения.\n */\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\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 {...this.props}>\n        <PopupMenu\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          popupHasPin={true}\n          disableAnimations={this.props.disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TooltipMenu.tsx"],"names":["TooltipMenu","props","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"uPAAA;;AAEA;AACA;AACA;;AAEA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,W;;;;;;AAMX,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACC,mCAAvB,EAAwC;AACtC,YAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,0BAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEC,2BAAaC,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEH,KAAK,CAACI,oBADxB;AAEEC,cAAAA,WAAW,EAAEL,KAAK,CAACM,iBAFrB;AAGEC,cAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB,EADK;;AAMLR,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACS,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB,QAAI,CAAC,KAAKd,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,mCAAC,4BAAD,EAAmB,KAAKD,KAAxB;AACE,mCAAC,oBAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWe,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKf,KAAL,CAAWgB,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKhB,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWiB,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKjB,KAAL,CAAWkB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKlB,KAAL,CAAWmB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKnB,KAAL,CAAWoB,iBARhC;;AAUG,WAAKpB,KAAL,CAAWqB,QAVd,CADF,CADF;;;;AAgBD,G,sBA1D8BC,eAAMC,S,oCAA1BxB,W,CACGyB,mB,GAAsB,a,CADzBzB,W,CAGG0B,Y,GAAe,EAC3BL,iBAAiB,EAAEM,6BADQ,E","sourcesContent":["import React from 'react';\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 { PopupPosition } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | {} | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps {\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?: PopupPosition[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\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 {...this.props}>\n        <PopupMenu\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          popupHasPin={true}\n          disableAnimations={this.props.disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/cjs/components/TooltipMenu/TooltipMenu.md

@@ -1,4 +1,4 @@
-Простой пример
+Базовый пример тултип-меню.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -16,12 +16,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-С указанием ширины меню
+Тултип-меню с заданной шириной.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
 
-<TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
+  menuWidth={350}
+  >
   <MenuHeader>Заголовок меню</MenuHeader>
   <MenuSeparator />
   <MenuItem>Раз</MenuItem>
@@ -34,12 +37,15 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-С указанием максимальной высоты меню
+Тултип-меню с заданной максимальной высотой.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
 
-<TooltipMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
+  menuMaxHeight={150}
+  >
   <MenuHeader>Заголовок меню</MenuHeader>
   <MenuSeparator />
   <MenuItem>Раз</MenuItem>
@@ -52,7 +58,24 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
-В `caption` можно передать любой элемент
+Тултип-меню с отключенной анимацией.
+
+```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';
@@ -72,7 +95,7 @@ import MenuIcon from '@skbkontur/react-icons/Menu';
 </TooltipMenu>;
 ```
 
-Только справа
+Тултип-меню всегда всплывающее справа от `caption`.
 
 ```jsx harmony
 import { MenuItem } from '@skbkontur/react-ui';
@@ -93,7 +116,7 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
 </TooltipMenu>;
 ```
 
-Меню только сверху выравненное по правому краю `caption`
+Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`.
 
 ```jsx harmony
 import { MenuItem } from '@skbkontur/react-ui';
@@ -113,3 +136,48 @@ import LightbulbIcon from '@skbkontur/react-icons/Lightbulb';
   <MenuItem>Три</MenuItem>
 </TooltipMenu>;
 ```
+
+Тултип-меню c шапкой и подвалом.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+Условный рендер элементов тултип-меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </TooltipMenu>
+</Gapped>
+```

package/cjs/internal/CommonWrapper/CommonWrapper.d.ts

@@ -1,8 +1,16 @@
 import React from 'react';
 export interface CommonProps {
+    /**
+     * HTML-атрибут `class`.
+     */
     className?: React.HTMLAttributes<HTMLElement>['className'];
+    /**
+     * HTML-атрибут `style`.
+     */
     style?: React.HTMLAttributes<HTMLElement>['style'];
-    /** На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент. */
+    /**
+     * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.
+     */
     'data-tid'?: string;
 }
 export declare type NotCommonProps<P> = Omit<P, keyof CommonProps>;

package/cjs/internal/CommonWrapper/CommonWrapper.js

@@ -14,6 +14,14 @@ var _Emotion = require("../../lib/theming/Emotion");var
 
 
 
+
+
+
+
+
+
+
+
 
 
 

package/cjs/internal/CommonWrapper/CommonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","render","extractCommonProps","props","className","style","dataProps","children","rest","child","isValidElement","React","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"ucAAA;;AAEA;AACA,oD;;;;;;;;;;;;;;;;AAgBaA,a;AACXC,EAAAA,M,GAAA,kBAAS;AAC6DC,IAAAA,kBAAkB,CAAC,KAAKC,KAAN,CAD/E,+CACEC,SADF,wBACEA,SADF,CACaC,KADb,wBACaA,KADb,CACuBC,SADvB,4IACsCC,QADtC,yBACsCA,QADtC,CACmDC,IADnD;AAEP,QAAMC,KAAK,GAAG,uBAAWF,QAAX,IAAuBA,QAAQ,CAACC,IAAD,CAA/B,GAAwCD,QAAtD;;AAEA,WAAO,4BAAMG,cAAN,CAAkCD,KAAlC;AACHE,mBAAMC,YAAN,CAAmBH,KAAnB;AACEL,MAAAA,SAAS,EAAE,iBAAGK,KAAK,CAACN,KAAN,CAAYC,SAAf,EAA0BA,SAA1B,CADb;AAEEC,MAAAA,KAAK;AACAI,MAAAA,KAAK,CAACN,KAAN,CAAYE,KADZ;AAEAA,MAAAA,KAFA,CAFP;;AAMKC,IAAAA,SANL,EADG;;AASHG,IAAAA,KATJ;AAUD,G,wBAfuDE,eAAME,S;;;AAkBhE,IAAMX,kBAAkB,GAAG,SAArBA,kBAAqB,CAAwBC,KAAxB,EAAuE;AAChG,MAAMW,MAAM,GAAG,EAAf;AACA,MAAMN,IAAI,GAAG,EAAb;;AAEA,OAAK,IAAMO,GAAX,IAAkBZ,KAAlB,EAAyB;AACvB,QAAIa,YAAY,CAACD,GAAD,CAAhB,EAAuB;AACrB;AACAD,MAAAA,MAAM,CAACC,GAAD,CAAN,GAAcZ,KAAK,CAACY,GAAD,CAAnB;AACD,KAHD,MAGO;AACL;AACAP,MAAAA,IAAI,CAACO,GAAD,CAAJ,GAAYZ,KAAK,CAACY,GAAD,CAAjB;AACD;AACF;;AAED,SAAO,CAACD,MAAD,EAASN,IAAT,CAAP;AACD,CAfD;;AAiBA,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAkB;AACrC,UAAQ,IAAR;AACE,SAAKA,IAAI,IAAI,WAAb;AACA,SAAKA,IAAI,IAAI,OAAb;AACA,SAAKA,IAAI,CAACC,OAAL,CAAa,OAAb,MAA0B,CAA/B,EAAkC;AAChC,aAAO,IAAP;AACF;AACE,aAAO,KAAP,CANJ;;AAQD,CATD","sourcesContent":["import React from 'react';\n\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nexport interface CommonProps {\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /** На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент. */\n  'data-tid'?: string;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\nexport class CommonWrapper<P extends CommonProps> extends React.Component<CommonWrapperProps<P>> {\n  render() {\n    const [{ className, style, ...dataProps }, { children, ...rest }] = extractCommonProps(this.props);\n    const child = isFunction(children) ? children(rest) : children;\n\n    return React.isValidElement<CommonProps>(child)\n      ? React.cloneElement(child, {\n          className: cx(child.props.className, className),\n          style: {\n            ...child.props.style,\n            ...style,\n          },\n          ...dataProps,\n        })\n      : child;\n  }\n}\n\nconst extractCommonProps = <P extends CommonProps>(props: P): [CommonProps, NotCommonProps<P>] => {\n  const common = {} as CommonProps;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const key in props) {\n    if (isCommonProp(key)) {\n      // @ts-ignore\n      common[key] = props[key];\n    } else {\n      // @ts-ignore\n      rest[key] = props[key];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n  switch (true) {\n    case name == 'className':\n    case name == 'style':\n    case name.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}
+{"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","render","extractCommonProps","props","className","style","dataProps","children","rest","child","isValidElement","React","cloneElement","Component","common","key","isCommonProp","name","indexOf"],"mappings":"ucAAA;;AAEA;AACA,oD;;;;;;;;;;;;;;;;;;;;;;;;AAwBaA,a;AACXC,EAAAA,M,GAAA,kBAAS;AAC6DC,IAAAA,kBAAkB,CAAC,KAAKC,KAAN,CAD/E,+CACEC,SADF,wBACEA,SADF,CACaC,KADb,wBACaA,KADb,CACuBC,SADvB,4IACsCC,QADtC,yBACsCA,QADtC,CACmDC,IADnD;AAEP,QAAMC,KAAK,GAAG,uBAAWF,QAAX,IAAuBA,QAAQ,CAACC,IAAD,CAA/B,GAAwCD,QAAtD;;AAEA,WAAO,4BAAMG,cAAN,CAAkCD,KAAlC;AACHE,mBAAMC,YAAN,CAAmBH,KAAnB;AACEL,MAAAA,SAAS,EAAE,iBAAGK,KAAK,CAACN,KAAN,CAAYC,SAAf,EAA0BA,SAA1B,CADb;AAEEC,MAAAA,KAAK;AACAI,MAAAA,KAAK,CAACN,KAAN,CAAYE,KADZ;AAEAA,MAAAA,KAFA,CAFP;;AAMKC,IAAAA,SANL,EADG;;AASHG,IAAAA,KATJ;AAUD,G,wBAfuDE,eAAME,S;;;AAkBhE,IAAMX,kBAAkB,GAAG,SAArBA,kBAAqB,CAAwBC,KAAxB,EAAuE;AAChG,MAAMW,MAAM,GAAG,EAAf;AACA,MAAMN,IAAI,GAAG,EAAb;;AAEA,OAAK,IAAMO,GAAX,IAAkBZ,KAAlB,EAAyB;AACvB,QAAIa,YAAY,CAACD,GAAD,CAAhB,EAAuB;AACrB;AACAD,MAAAA,MAAM,CAACC,GAAD,CAAN,GAAcZ,KAAK,CAACY,GAAD,CAAnB;AACD,KAHD,MAGO;AACL;AACAP,MAAAA,IAAI,CAACO,GAAD,CAAJ,GAAYZ,KAAK,CAACY,GAAD,CAAjB;AACD;AACF;;AAED,SAAO,CAACD,MAAD,EAASN,IAAT,CAAP;AACD,CAfD;;AAiBA,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAkB;AACrC,UAAQ,IAAR;AACE,SAAKA,IAAI,IAAI,WAAb;AACA,SAAKA,IAAI,IAAI,OAAb;AACA,SAAKA,IAAI,CAACC,OAAL,CAAa,OAAb,MAA0B,CAA/B,EAAkC;AAChC,aAAO,IAAP;AACF;AACE,aAAO,KAAP,CANJ;;AAQD,CATD","sourcesContent":["import React from 'react';\n\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nexport interface CommonProps {\n  /**\n   * HTML-атрибут `class`.\n   */\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  /**\n   * HTML-атрибут `style`.\n   */\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /**\n   * На равне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n   */\n  'data-tid'?: string;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\n\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n\nexport class CommonWrapper<P extends CommonProps> extends React.Component<CommonWrapperProps<P>> {\n  render() {\n    const [{ className, style, ...dataProps }, { children, ...rest }] = extractCommonProps(this.props);\n    const child = isFunction(children) ? children(rest) : children;\n\n    return React.isValidElement<CommonProps>(child)\n      ? React.cloneElement(child, {\n          className: cx(child.props.className, className),\n          style: {\n            ...child.props.style,\n            ...style,\n          },\n          ...dataProps,\n        })\n      : child;\n  }\n}\n\nconst extractCommonProps = <P extends CommonProps>(props: P): [CommonProps, NotCommonProps<P>] => {\n  const common = {} as CommonProps;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const key in props) {\n    if (isCommonProp(key)) {\n      // @ts-ignore\n      common[key] = props[key];\n    } else {\n      // @ts-ignore\n      rest[key] = props[key];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (name: string) => {\n  switch (true) {\n    case name == 'className':\n    case name == 'style':\n    case name.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}

package/cjs/internal/InputLikeText/InputLikeText.d.ts

@@ -9,6 +9,7 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
     onBlur?: React.FocusEventHandler<HTMLElement>;
     onMouseDragStart?: MouseDragEventHandler;
     onMouseDragEnd?: MouseDragEventHandler;
+    takeContentWidth?: boolean;
 }
 export declare type InputLikeTextState = Omit<InputState, 'polyfillPlaceholder'>;
 export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {

package/cjs/internal/InputLikeText/InputLikeText.js

@@ -28,6 +28,7 @@ var _HiddenInput = require("./HiddenInput");var
 
 
 
+
 InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(InputLikeText, _React$Component);function InputLikeText() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
@@ -147,7 +148,8 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
-      props.innerRef,tabIndex = props.tabIndex,placeholder = props.placeholder,align = props.align,borderless = props.borderless,width = props.width,size = props.size,error = props.error,warning = props.warning,onValueChange = props.onValueChange,disabled = props.disabled,prefix = props.prefix,suffix = props.suffix,leftIcon = props.leftIcon,rightIcon = props.rightIcon,value = props.value,onMouseDragStart = props.onMouseDragStart,onMouseDragEnd = props.onMouseDragEnd,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd"]);var _this$state =
+
+      props.innerRef,tabIndex = props.tabIndex,placeholder = props.placeholder,align = props.align,borderless = props.borderless,width = props.width,size = props.size,error = props.error,warning = props.warning,onValueChange = props.onValueChange,disabled = props.disabled,prefix = props.prefix,suffix = props.suffix,leftIcon = props.leftIcon,rightIcon = props.rightIcon,value = props.value,onMouseDragStart = props.onMouseDragStart,onMouseDragEnd = props.onMouseDragEnd,takeContentWidth = props.takeContentWidth,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth"]);var _this$state =
 
       _this.state,focused = _this$state.focused,blinking = _this$state.blinking;
 
@@ -188,7 +190,8 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
         _react.default.createElement("span", { className: wrapperClass }, /*#__PURE__*/
         _react.default.createElement("span", {
           "data-tid": "InputLikeText__input",
-          className: (0, _Emotion.cx)(_InputLikeText.styles.input(), _Input.styles.input(_this.theme), (_cx3 = {}, _cx3[
+          className: (0, _Emotion.cx)(_Input.styles.input(_this.theme), (_cx3 = {}, _cx3[
+          _InputLikeText.styles.absolute()] = !takeContentWidth, _cx3[
           _Input.styles.inputFocus(_this.theme)] = focused, _cx3[
           _Input.styles.inputDisabled(_this.theme)] = disabled, _cx3)) },
 
@@ -305,8 +308,9 @@ InputLikeText = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
     renderPlaceholder = function () {var _this$props3 =
       _this.props,children = _this$props3.children,placeholder = _this$props3.placeholder,disabled = _this$props3.disabled;var
       focused = _this.state.focused;
+      var hasValue = (0, _utils.isNonNullable)(children) && children !== '';
 
-      if (!(0, _utils.isNonNullable)(children) && placeholder) {var _cx7;
+      if (!hasValue && placeholder) {var _cx7;
         return /*#__PURE__*/(
           _react.default.createElement("span", {
             className: (0, _Emotion.cx)(_Input.styles.placeholder(_this.theme), (_cx7 = {}, _cx7[