npm - @skbkontur/react-ui - Versions diffs - 3.8.0 → 3.8.4 - Mend

@skbkontur/react-ui 3.8.0 → 3.8.4

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

Files changed (163) hide show

package/components/Toggle/Toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","styles","globalClasses","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение children справа или слева от переключателя\n * @default 'right'\n /\n captionPosition: 'left' \| 'right';\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n onValueChange?: (value: boolean) => void;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n warning?: boolean;\n error?: boolean;\n loading?: boolean;\n autoFocus?: boolean;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n color?: React.CSSProperties['color'];\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color(props: ToggleProps) {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, captionPosition, warning, error, loading, color } = this.props;\n const disabled = this.props.disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <label className={labelClassNames}>\n <div\n className={cx(styles.outline(this.theme), {\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <span className={cx(styles.wrapper(this.theme))}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </span>\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1	+ {"version":3,"sources":["Toggle.tsx"],"names":["React","PropTypes","warning","keyListener","ThemeContext","CommonWrapper","cx","styles","globalClasses","colorWarningShown","Toggle","props","theme","input","focus","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","error","loading","color","id","disabled","containerClassNames","container","containerDisabled","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","disabledCaption","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","Component","__KONTUR_REACT_UI__","propTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Положение `children` относительно переключателя.\n * @default 'right'\n /\n captionPosition: 'left' \| 'right';\n /\n Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n /\n checked?: boolean;\n /\n Делает `тогл` включенным по умолчанию.\n /\n defaultChecked?: boolean;\n /\n Отключает `тогл`.\n /\n disabled?: boolean;\n /\n Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n /\n onValueChange?: (value: boolean) => void;\n /\n Событие вызывающееся при клике на `тогл`.\n /\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /\n Добавляет оранжевую обводку вокруг переключателя.\n * @default false\n /\n warning?: boolean;\n /\n Добавляет красную обводку вокруг переключателя.\n * @default false\n /\n error?: boolean;\n /\n Добавляет стили для состояния `loading` и отключает `тогл`.\n /\n loading?: boolean;\n /\n Если true, выставляет фокус на `тогле` после загрузки страницы.\n /\n autoFocus?: boolean;\n /\n Событие вызывающееся, когда `тогл` получает фокус.\n /\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /\n Событие вызывающееся, когда `тогл` теряет фокус.\n /\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /\n @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n /\n color?: React.CSSProperties['color'];\n /\n HTML-атрибут `id` для передачи во внутренний `<input />`.\n /\n id?: string;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\n/\n _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n /\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color(props: ToggleProps) {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n };\n\n private theme!: Theme;\n private input: HTMLInputElement \| null = null;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /\n @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { children, captionPosition, warning, error, loading, color, id } = this.props;\n const disabled = this.props.disabled \|\| loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(styles.container(this.theme), {\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(styles.root(this.theme), {\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(styles.caption(this.theme), {\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper {...this.props}>\n <label className={labelClassNames}>\n <div\n className={cx(styles.outline(this.theme), {\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <span className={cx(styles.wrapper(this.theme))}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={styles.input(this.theme)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n </div>\n <div\n className={cx(styles.handle(this.theme), globalClasses.handle, {\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </span>\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}

package/components/Toggle/Toggle.d.ts CHANGED Viewed

@@ -4,27 +4,73 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface ToggleProps extends CommonProps {
     children?: React.ReactNode;
     /**
-     * Положение children справа или слева от переключателя
+     * Положение `children` относительно переключателя.
      * @default 'right'
      */
     captionPosition: 'left' | 'right';
+    /**
+     * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * Делает `тогл` включенным по умолчанию.
+     */
     defaultChecked?: boolean;
+    /**
+     * Отключает `тогл`.
+     */
     disabled?: boolean;
+    /**
+     * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.
+     */
     onValueChange?: (value: boolean) => void;
+    /**
+     * Событие вызывающееся при клике на `тогл`.
+     */
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Добавляет оранжевую обводку вокруг переключателя.
+     * @default false
+     */
     warning?: boolean;
+    /**
+     * Добавляет красную обводку вокруг переключателя.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * Добавляет стили для состояния `loading` и отключает `тогл`.
+     */
     loading?: boolean;
+    /**
+     * Если true, выставляет фокус на `тогле` после загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Событие вызывающееся, когда `тогл` получает фокус.
+     */
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Событие вызывающееся, когда `тогл` теряет фокус.
+     */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.
+     */
     color?: React.CSSProperties['color'];
+    /**
+     * HTML-атрибут `id` для передачи во внутренний `<input />`.
+     */
+    id?: string;
 }
 export interface ToggleState {
     checked?: boolean;
     focusByTab?: boolean;
 }
+/**
+ * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+ */
 export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {

package/components/Toggle/Toggle.md CHANGED Viewed

@@ -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/components/Toggle/Toggle.styles/Toggle.styles.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 export var globalClasses = prefix('toggle')({
   handle: 'handle',
   container: 'container',
+  disabled: 'disabled',
   containerDisabled: 'container-disabled',
   containerLoading: 'container-loading',
   background: 'background'
@@ -14,15 +15,14 @@ export var styles = memoizeStyle({
   root: function root(t) {
     var handleWidthWithBorders = t.toggleHeight;
     var handleActiveWidth = "calc(" + handleWidthWithBorders + " - 2 * " + t.toggleBorderWidth + " + " + t.toggleHandleActiveWidthIncrement + ")";
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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    "])), globalClasses.handle, t.toggleBgHover, globalClasses.handle, handleActiveWidth, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleHandleActiveWidthIncrement);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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.disabled, globalClasses.handle, handleActiveWidth, globalClasses.disabled, globalClasses.handle, t.toggleWidth, handleWidthWithBorders, t.toggleHandleActiveWidthIncrement);
   },
   handle: function handle(t) {
     var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      bottom: ", ";\n      box-shadow: 0 ", " 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ", " rgba(0, 0, 0, 0.15);\n      height: ", ";\n      left: ", ";\n      position: absolute;\n      top: ", ";\n      transition: 0.2s ease-in;\n      width: ", ";\n    "])), t.toggleBg, t.toggleHandleBorderRadius, t.toggleBorderWidth, t.toggleBorderWidth, t.toggleBorderWidth, handleSize, t.toggleBorderWidth, t.toggleBorderWidth, handleSize);
   },
   handleDisabled: function handleDisabled(t) {
-    var handleSize = "calc(" + t.toggleHeight + " - 2 * " + t.toggleBorderWidth + ")";
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n      width: ", " !important; // override root active styles\n    "])), t.toggleDisabledHandleBg, handleSize);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override root hover/active styles\n    "])), t.toggleDisabledHandleBg);
   },
   input: function input(t) {
     var handleWidthWithBorders = t.toggleHeight;
@@ -67,7 +67,10 @@ export var styles = memoizeStyle({
   caption: function caption(t) {
     return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   },
+  disabledCaption: function disabledCaption(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDisabled);
+  },
   captionLeft: function captionLeft(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])), t.toggleTextColor, t.toggleCaptionGap);
   }
 });

package/components/Toggle/Toggle.styles/Toggle.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","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"]}
1	+ {"version":3,"sources":["Toggle.styles.ts"],"names":["css","memoizeStyle","prefix","globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","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/components/Toggle/Toggle.styles.d.ts CHANGED Viewed

@@ -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/components/TooltipMenu/TooltipMenu/TooltipMenu.js CHANGED Viewed

@@ -6,12 +6,15 @@ import { PopupMenu } from "../../../internal/PopupMenu";
 import { isProductionEnv, isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент.
- * Положение зависит от переданного массива ```positions``` и работает так:
- * первое значаение в массиве - дефолтная позиция, меню раскрывается так, если ничего не мешает ему раскрыться,
- * если раскрыться в данной позиции не получается - берется следующие значение, и так далее.
- * Если меню должно раскрываться только в одну сторону - передаем в ```positions``` массив с одним элементом.
- * Если ```positions``` передан или передан пустой массив, используются все возможные положения.
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент.
+ *
+ * Положение меню задаётся с помощью массива `positions` и работает так:
+ * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,
+ * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.
+ *
+ * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.
+ *
+ * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.
  */
 export var TooltipMenu = /*#__PURE__*/function (_React$Component) {

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;AAME,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACL,eAAvB,EAAwC;AACtC,YAAM,IAAIM,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEX,YAAY,CAACY,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,GAnCH;;AAqCSA,EAAAA,UArCT,GAqCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,EAAmB,KAAKD,KAAxB;AACE,0BAAC,SAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWa,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKb,KAAL,CAAWc,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKd,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWe,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKf,KAAL,CAAWgB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKjB,KAAL,CAAWkB,iBARhC;;AAUG,WAAKlB,KAAL,CAAWmB,QAVd,CADF,CADF;;;;AAgBD,GA1DH,sBAAiC3B,KAAK,CAAC4B,SAAvC,EAAarB,W,CACGsB,mB,GAAsB,a,CADzBtB,W,CAGGuB,Y,GAAe,EAC3BJ,iBAAiB,EAAErB,SADQ,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"]}
1	+ {"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","TooltipMenu","props","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","menuMaxHeight","menuWidth","header","footer","positions","disableAnimations","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"sEAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;AAME,uBAAYC,KAAZ,EAAqC;AACnC,wCAAMA,KAAN;;AAEA,QAAI,CAACA,KAAK,CAACC,OAAP,IAAkB,CAACL,eAAvB,EAAwC;AACtC,YAAM,IAAIM,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEX,YAAY,CAACY,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,GAnCH;;AAqCSA,EAAAA,UArCT,GAqCE,sBAAoB;AAClB,QAAI,CAAC,KAAKZ,KAAL,CAAWC,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,EAAmB,KAAKD,KAAxB;AACE,0BAAC,SAAD;AACE,QAAA,aAAa,EAAE,KAAKA,KAAL,CAAWa,aAD5B;AAEE,QAAA,SAAS,EAAE,KAAKb,KAAL,CAAWc,SAFxB;AAGE,QAAA,OAAO,EAAE,KAAKd,KAAL,CAAWC,OAHtB;AAIE,QAAA,MAAM,EAAE,KAAKD,KAAL,CAAWe,MAJrB;AAKE,QAAA,MAAM,EAAE,KAAKf,KAAL,CAAWgB,MALrB;AAME,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SANxB;AAOE,QAAA,WAAW,EAAE,IAPf;AAQE,QAAA,iBAAiB,EAAE,KAAKjB,KAAL,CAAWkB,iBARhC;;AAUG,WAAKlB,KAAL,CAAWmB,QAVd,CADF,CADF;;;;AAgBD,GA1DH,sBAAiC3B,KAAK,CAAC4B,SAAvC,EAAarB,W,CACGsB,mB,GAAsB,a,CADzBtB,W,CAGGuB,Y,GAAe,EAC3BJ,iBAAiB,EAAErB,SADQ,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/components/TooltipMenu/TooltipMenu.d.ts CHANGED Viewed

@@ -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/components/TooltipMenu/TooltipMenu.md CHANGED Viewed

@@ -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>
+```