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

package/components/Textarea/Textarea.d.ts

@@ -21,12 +21,12 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     /**
      * Число строк
      */
-    rows: number;
+    rows?: number;
     /**
      * Максимальное число строк при
      * автоматическом ресайзе
      */
-    maxRows: string | number;
+    maxRows?: string | number;
     /**
      * Стандартный ресайз
      * Попадает в `style`
@@ -62,11 +62,11 @@ export interface TextareaProps extends CommonProps, Override<React.TextareaHTMLA
     /** Добавлять дополнительную свободную строку при авто-ресайзе.
      * @see https://guides.kontur.ru/components/textarea/#04
      * */
-    extraRow: boolean;
+    extraRow?: boolean;
     /** Отключать анимацию при авто-ресайзе.
      * Автоматически отключается когда в `extraRow` передан `false`.
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
 }> {
 }
 export interface TextareaState {
@@ -76,7 +76,9 @@ export interface TextareaState {
 export declare const TextareaDataTids: {
     readonly root: "Textarea__root";
     readonly counter: "TextareaCounter__root";
+    readonly helpIcon: "TextareaCounter__helpIcon";
 };
+declare type DefaultProps = Required<Pick<TextareaProps, 'rows' | 'maxRows' | 'extraRow' | 'disableAnimations'>>;
 /**
  * Компонент для ввода многострочного текста.
  *
@@ -129,12 +131,8 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
         onPaste: PropTypes.Requireable<(...args: any[]) => any>;
         onCopy: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static defaultProps: {
-        rows: number;
-        maxRows: number;
-        extraRow: boolean;
-        disableAnimations: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         needsPolyfillPlaceholder: boolean;
         isCounterVisible: boolean;
@@ -187,3 +185,4 @@ export declare class Textarea extends React.Component<TextareaProps, TextareaSta
     private handlePaste;
     private handleFocus;
 }
+export {};

package/components/Textarea/Textarea.md

@@ -9,6 +9,25 @@ const [value, setValue] = React.useState('');
 />;
 ```
 
+Очистить значение в `Textarea` можно только с помощью пустой строки
+
+```jsx harmony
+import { Group, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Значение');
+
+<Group>
+  <Textarea
+    value={value}
+    onValueChange={setValue}
+    autoResize
+    rows={1}
+    placeholder="Плейсхолдер"
+  />
+  <Button style={{ height: '52px' }} onClick={() => setValue('')}>Очистить значение</Button>
+</Group>
+```
+
 Счетчик введенных символов
 
 ```jsx harmony

package/components/Textarea/TextareaCounter/TextareaCounter.js

@@ -55,7 +55,8 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
     onCloseClick: onCloseHelp
   }, /*#__PURE__*/React.createElement(HelpDotIcon, {
     onMouseDown: handleHelpMouseDown,
-    color: theme.textareaCounterHelpIconColor
+    color: theme.textareaCounterHelpIconColor,
+    "data-tid": TextareaDataTids.helpIcon
   }));
   return /*#__PURE__*/React.createElement("div", {
     "data-tid": TextareaDataTids.counter,

package/components/Textarea/TextareaCounter/TextareaCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport type TextareaCounterProps = {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n};\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        <HelpDotIcon onMouseDown={handleHelpMouseDown} color={theme.textareaCounterHelpIconColor} />\n      </Tooltip>\n    );\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n        <span\n          className={cx(styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}
+{"version":3,"sources":["TextareaCounter.tsx"],"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","safePropTypesInstanceOf","forwardRefAndName","HelpDotIcon","ThemeContext","isFunction","Tooltip","cx","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","helpIcon","counter","counterContainer","counterError","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        <HelpDotIcon\n          onMouseDown={handleHelpMouseDown}\n          color={theme.textareaCounterHelpIconColor}\n          data-tid={TextareaDataTids.helpIcon}\n        />\n      </Tooltip>\n    );\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n        <span\n          className={cx(styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}

package/components/Textarea/TextareaCounter.d.ts

@@ -1,11 +1,11 @@
 import { TextareaProps } from './Textarea';
-export declare type TextareaCounterProps = {
+export interface TextareaCounterProps {
     value: TextareaProps['value'];
     length: number;
     help: TextareaProps['counterHelp'];
     onCloseHelp: () => void;
     textarea: HTMLTextAreaElement;
-};
+}
 export interface TextareaCounterRef {
     reflow: () => void;
 }

package/components/Toast/Toast/Toast.js

@@ -21,7 +21,7 @@ export var ToastDataTids = {
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -31,8 +31,8 @@ export var ToastDataTids = {
 export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toast, _React$Component);
 
-  Toast.push = function push(notification, action) {
-    ToastStatic.push(notification, action);
+  Toast.push = function push(notification, action, showTime) {
+    ToastStatic.push(notification, action, showTime);
   };
 
   Toast.close = function close() {
@@ -56,7 +56,7 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     };
 
     _this.setRootRef = function (element) {
-      _this.setRootNode(element); // @ts-ignore
+      _this.setRootNode(element); // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
 
 
       _this.rootRef.current = element;
@@ -70,10 +70,13 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     };
 
     _this._setTimer = function () {
+      var _this$state$showTime;
+
       _this._clearTimer();
 
-      var timeOut = _this.state.action ? 7 : 3;
-      _this._timeout = window.setTimeout(_this.close, timeOut * 1000);
+      var showTime = _this.state.action ? 7000 : 3000;
+      showTime = (_this$state$showTime = _this.state.showTime) != null ? _this$state$showTime : showTime;
+      _this._timeout = window.setTimeout(_this.close, showTime);
     };
 
     _this._refToast = function (element) {
@@ -83,7 +86,8 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     _this.state = {
       notification: null,
       action: null,
-      id: 0
+      id: 0,
+      showTime: null
     };
     return _this;
   }
@@ -101,15 +105,17 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   * Показывает тост с `notification` в качестве сообщения.
   * Тост автоматически скрывается через 3 или 7 секунд,
   * в зависимости от наличия у него кнопки `action`.
+  * Время показа можно задать вручную, передав `showTime`.
   *
   * @public
   * @param {string} notification
   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+  * @param {number} showTime Время существования Toast в миллисекундах
   */
   ;
 
-  _proto.push = function push(notification, action) {
+  _proto.push = function push(notification, action, showTime) {
     if (this.state.notification) {
       this.close();
     }
@@ -120,7 +126,8 @@ export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       return {
         notification: notification,
         action: action,
-        id: id + 1
+        id: id + 1,
+        showTime: showTime
       };
     }, this._setTimer);
   }

package/components/Toast/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","props","_timeout","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","timeOut","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n}\n\nexport interface ToastProps extends CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Action) {\n    ToastStatic.push(notification, action);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   */\n  public push(notification: string, action?: Action) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1 }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<HTMLElement>) => {\n    this.setRootNode(element);\n    // @ts-ignore\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    const timeOut = this.state.action ? 7 : 3;\n\n    this._timeout = window.setTimeout(this.close, timeOut * 1000);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}
+{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","_timeout","rootRef","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n\n    this._timeout = window.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}

package/components/Toast/Toast.d.ts

@@ -10,6 +10,7 @@ export interface ToastState {
     notification: Nullable<string>;
     action: Nullable<Action>;
     id: number;
+    showTime: Nullable<number>;
 }
 export interface ToastProps extends CommonProps {
     onPush?: (notification: string, action?: Action) => void;
@@ -24,7 +25,7 @@ export declare const ToastDataTids: {
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -33,7 +34,7 @@ export declare const ToastDataTids: {
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
     private setRootNode;
-    static push(notification: string, action?: Action): void;
+    static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;
@@ -45,13 +46,15 @@ export declare class Toast extends React.Component<ToastProps, ToastState> {
      * Показывает тост с `notification` в качестве сообщения.
      * Тост автоматически скрывается через 3 или 7 секунд,
      * в зависимости от наличия у него кнопки `action`.
+     * Время показа можно задать вручную, передав `showTime`.
      *
      * @public
      * @param {string} notification
      * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
      * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+     * @param {number} showTime Время существования Toast в миллисекундах
      */
-    push(notification: string, action?: Action): void;
+    push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     /**
      * @public
      */

package/components/Toast/Toast.md

@@ -13,6 +13,34 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
+C кастомным showTime
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', {
+    label: 'Cancel',
+    handler: () => Toast.push('Canceled'),
+  }, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
+C кастомным showTime без action
+
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', null, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
 Использование `ref`
 
 ```jsx harmony
@@ -39,3 +67,104 @@ class Toaster extends React.Component {
 
 <Toaster />;
 ```
+
+### SuperToast
+
+Мы можете объединить удобство статических методов и кастамизируемость классического способа через `ref`.
+Для этого можно добавить обёртку, которая позволяет Toast работать по примеру GlobalLoader.
+
+Т.е. кастомный Toast можно добавить в единственном месте на проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр Toast:
+
+Также в обёртке можно изменить логику появления всплывашки, по рекомендации Гайдов:
+https://guides.kontur.ru/components/toast/#08
+```static
+«Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло»
+```
+
+Для этого немного изменим метод `SuperToast.close` с помощью специального метода `ReactDOM.flushSync`.
+
+Итоговый вариант:
+```js static
+const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
+SuperToast.ref = React.createRef();
+SuperToast.push = (...args) => {
+  SuperToast.close();
+  SuperToast.ref.current && SuperToast.ref.current.push(...args);
+};
+SuperToast.close = () => {
+  ReactDOM.flushSync(() => {
+    SuperToast.ref.current && SuperToast.ref.current.close();
+  });
+};
+
+```
+
+
+Версия на typescript:
+```typescript static
+class SuperToast extends React.Component<ToastProps> {
+  public static ref = React.createRef<Toast>();
+  public static push: typeof Toast.push = (...args) => {
+    SuperToast.close();
+    SuperToast.ref.current?.push(...args);
+  };
+  public static close: typeof Toast.close = () => {
+    ReactDOM.flushSync(() => SuperToast.ref.current?.close());
+  };
+  render = () => {
+    return <Toast ref={SuperToast.ref} {...this.props} />;
+  };
+}
+```
+
+
+```jsx harmony
+import { Button, Toast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+import ReactDOM from 'react-dom';
+
+const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
+SuperToast.ref = React.createRef();
+SuperToast.push = (...args) => {
+  SuperToast.close();
+  SuperToast.ref.current && SuperToast.ref.current.push(...args);
+};
+SuperToast.close = () => {
+  ReactDOM.flushSync(() => {
+    SuperToast.ref.current && SuperToast.ref.current.close();
+  });
+};
+
+const RedToast = () => (
+  <ThemeContext.Provider
+    value={ThemeFactory.create(
+      {
+        toastBg: "#d94d45f5",
+        toastBorderRadius: "4px"
+      },
+      THEME_2022
+    )}
+  >
+    <SuperToast />
+  </ThemeContext.Provider>
+);
+
+const rand = () => Math.round(Math.random() * 100).toString();
+
+const push = () => {
+  SuperToast.push(rand(), {
+    label: "Cancel",
+    handler: () => SuperToast.push("Canceled")
+  });
+};
+
+<div>
+  <RedToast />
+  <span />
+  <span />
+  <span />
+  <Button onClick={push}>
+    Show super red toast
+  </Button>
+</div>
+;
+```

package/components/Toast/ToastStatic/ToastStatic.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Toast, ToastDataTids } from "../Toast";
 export var ToastStatic = function ToastStatic() {};
 
-ToastStatic.push = function (notification, action) {
+ToastStatic.push = function (notification, action, showTime) {
   if (!ToastStatic.node) {
     ToastStatic.node = document.createElement('div');
     var _document = document,
@@ -20,16 +20,16 @@ ToastStatic.push = function (notification, action) {
         return ToastStatic.instance = el;
       }
     }), ToastStatic.node, function () {
-      return ToastStatic._push(notification, action);
+      return ToastStatic._push(notification, action, showTime);
     });
   } else {
-    ToastStatic._push(notification, action);
+    ToastStatic._push(notification, action, showTime);
   }
 };
 
-ToastStatic._push = function (notification, action) {
+ToastStatic._push = function (notification, action, showTime) {
   if (ToastStatic.instance) {
-    ToastStatic.instance.push(notification, action);
+    ToastStatic.instance.push(notification, action, showTime);
   }
 };
 

package/components/Toast/ToastStatic/ToastStatic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastDataTids","ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","render","toastStatic","el","instance","_push","close"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;AAIA,SAASC,KAAT,EAAwBC,aAAxB,QAA6C,SAA7C;;AAEA,WAAaC,WAAb,6BAAaA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAA2C;AAC9D,MAAI,CAACH,WAAW,CAACI,IAAjB,EAAuB;AACrBJ,IAAAA,WAAW,CAACI,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBT,WAAW,CAACI,IAA7B;;AAEAP,IAAAA,QAAQ,CAACa,MAAT;AACE,wBAAC,KAAD,IAAO,YAAUX,aAAa,CAACY,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASZ,WAAW,CAACa,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEZ,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGc,K,GAAQ,UAACZ,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBZ,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGe,K,GAAQ,YAAM;AAC1B,MAAIf,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUf,W;;;AAiCIa,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Action) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action),\n      );\n    } else {\n      ToastStatic._push(notification, action);\n    }\n  };\n\n  public static _push = (notification: string, action?: Action) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastDataTids","ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","render","toastStatic","el","instance","_push","close"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;AAIA,SAASC,KAAT,EAAwBC,aAAxB,QAA6C,SAA7C;;AAEA,WAAaC,WAAb,6BAAaA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC3F,MAAI,CAACJ,WAAW,CAACK,IAAjB,EAAuB;AACrBL,IAAAA,WAAW,CAACK,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBV,WAAW,CAACK,IAA7B;;AAEAR,IAAAA,QAAQ,CAACc,MAAT;AACE,wBAAC,KAAD,IAAO,YAAUZ,aAAa,CAACa,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASb,WAAW,CAACc,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEb,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACe,KAAZ,CAAkBb,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACe,KAAZ,CAAkBb,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGe,K,GAAQ,UAACb,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACc,QAAhB,EAA0B;AACxBd,IAAAA,WAAW,CAACc,QAAZ,CAAqBb,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGgB,K,GAAQ,YAAM;AAC1B,MAAIhB,WAAW,CAACc,QAAhB,EAA0B;AACxBd,IAAAA,WAAW,CAACc,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUhB,W;;;AAiCIc,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}

package/components/Toast/ToastStatic.d.ts

@@ -1,7 +1,8 @@
+import { Nullable } from '../../typings/utility-types';
 import { Action } from './Toast';
 export declare class ToastStatic {
-    static push: (notification: string, action?: Action | undefined) => void;
-    static _push: (notification: string, action?: Action | undefined) => void;
+    static push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
+    static _push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
     static close: () => void;
     private static node;
     private static instance;

package/components/Toggle/Toggle/Toggle.js

@@ -11,22 +11,24 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { styles, globalClasses } from "../Toggle.styles";
 var colorWarningShown = false;
 export var ToggleDataTids = {
   root: 'Toggle__root'
 };
+export
 /**
- * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
- */
-
-export var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
+*/
+var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toggle, _React$Component);
 
   function Toggle(props) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(Toggle.defaultProps);
     _this.input = null;
 
     _this.focus = function () {
@@ -113,13 +115,17 @@ export var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
 
     var _this$props = this.props,
         children = _this$props.children,
-        captionPosition = _this$props.captionPosition,
         warning = _this$props.warning,
         error = _this$props.error,
-        loading = _this$props.loading,
         color = _this$props.color,
-        id = _this$props.id;
-    var disabled = this.props.disabled || loading;
+        id = _this$props.id,
+        ariaDescribedby = _this$props['aria-describedby'];
+
+    var _this$getProps = this.getProps(),
+        loading = _this$getProps.loading,
+        captionPosition = _this$getProps.captionPosition;
+
+    var disabled = this.getProps().disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
     var containerClassNames = cx(styles.container(this.theme), (_cx = {}, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
     var labelClassNames = cx(styles.root(this.theme), (_cx2 = {}, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2));
@@ -150,7 +156,9 @@ export var Toggle = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       onBlur: this.handleBlur,
       ref: this.inputRef,
       disabled: disabled,
-      id: id
+      id: id,
+      role: "switch",
+      "aria-describedby": ariaDescribedby
     }), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames,
       style: checked && color && !disabled ? {