@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded

package/components/Link/Link.md

@@ -0,0 +1,182 @@
+### Базовый пример
+
+```jsx harmony
+<Link href="https://kontur.ru" target="_blank">Обычная ссылка</Link>
+```
+
+### Корневой элемент
+Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. Cсылка принимает все пропы переданного в `component` компонента.
+Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+
+<Link component='button'>Кнопка, но выглядит как ссылка</Link>
+```
+
+### Проп `component`
+С помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
+
+```jsx static
+import { Link } from '@skbkontur/react-ui';
+import { Link as RouterLink, BrowserRouter } from 'react-router-dom';
+
+<BrowserRouter>
+  <Link to='/dashboard' component={RouterLink}>react-router-dom link</Link>
+</BrowserRouter>
+```
+
+### Стили и disabled
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={15}>
+  <Link>Обычная ссылка</Link>
+  <Link use="success">Успешная ссылка</Link>
+  <Link use="danger">Опасная ссылка</Link>
+  <Link use="grayed">Работающая ссылка серого цвета</Link>
+  <Link disabled>Отключенная ссылка</Link>
+</Gapped>;
+```
+
+### Иконка
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
+
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
+```
+
+### Ссылки, ведущие на внешние ресурсы
+
+_Примечание_:
+
+Если в контрол `Link` передана ссылка, ведущая на внешний ресурс, контрол `Link` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Link>
+  <Link target="_blank" href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Link>
+</Gapped>
+```
+
+### Состояние загрузки
+
+**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
+
+const [isLoading, setIsLoading] = React.useState(false);
+
+<Gapped vertical gap={15}>
+  <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
+  <Gapped gap={20}>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
+    <Link loading={isLoading}>Без иконки</Link>
+  </Gapped>
+</Gapped>
+```
+
+### Кастомное действие при нажатии
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
+```
+
+### Проп `theme`
+
+```jsx harmony
+import { Link, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link theme={{linkColor: '#C00000'}}>Ok</Link>
+  <Link>Ok</Link>
+</Gapped>
+```
+
+
+### Кастомизация ссылки
+
+```jsx harmony
+import { Toast, Button } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  linkTextUnderlineOffset: '1px'
+}
+
+const underlineOnHoverStyles = {
+  linkTextDecorationColor: 'transparent',
+}
+
+const differentColorStyles = {
+  linkColor: 'blue',
+  linkHoverColor: 'blue',
+  linkActiveColor: 'blue',
+}
+
+const stringify = (styles) => {
+    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+}
+
+const copyStyles = (styles) => {
+  navigator.clipboard.writeText(stringify(styles));
+  Toast.push('Copied');
+}
+
+const tableStyle = {
+  borderCollapse: 'collapse',
+  width: '100%',
+};
+
+const tdStyle = {
+  border: '1px solid',
+  padding: '8px',
+};
+
+const renderExampleRow = (title, styles) => {
+    return (
+        <tr>
+          <td style={tdStyle}>{title}</td>
+          <td style={tdStyle}><Link theme={styles}>Link</Link></td>
+          <td style={tdStyle}>
+            <div style={{display: 'flex'}}>
+              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+            </div>
+          </td>
+        </tr>
+    )
+}
+
+<table style={tableStyle}>
+  <tr style={{textAlign: 'left'}}>
+    <th style={tdStyle}></th>
+    <th style={tdStyle}>Пример</th>
+    <th style={tdStyle}>Переменные темы</th>
+  </tr>
+  {renderExampleRow('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
+  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
+</table>
+```

package/components/Loader/Loader.md

@@ -0,0 +1,33 @@
+### Базовый пример
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [isActive, setIsActive] = React.useState(true);
+
+<>
+  <Button onClick={() => setIsActive(!isActive)}>{isActive ? 'Остановить загрузку' : 'Продолжить загрузку'}</Button>
+  <Loader type="big" active={isActive}>
+    <h1>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."</h1>
+    <p>
+      No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela,
+      Bender, we're going grave robbing.
+    </p>
+    <p>
+      Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?
+      <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>
+      <em>It's okay, Bender.</em> I like cooking too.
+    </p>
+    <h2>Oh, I think we should just stay friends.</h2>
+    <p>
+      No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go… look for
+      more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife
+      holding up? …To shreds, you say.
+    </p>
+    <ol>
+      <li>No! The kind with looting and maybe starting a few fires!</li>
+      <li>You are the last hope of the universe.</li>
+      <li>Hey, guess what you're accessories to.</li>
+    </ol>
+  </Loader>
+</>
+```

package/components/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "onBeforePasteValue", "element", "className"];
+var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "colored", "imaskProps", "unmask", "onValueChange", "onUnexpectedInput", "onChange", "element", "className"];
 import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { cx } from "../../../lib/theming/Emotion";
@@ -45,7 +45,6 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
     onValueChange = props.onValueChange,
     onUnexpectedInput = props.onUnexpectedInput,
     onChange = props.onChange,
-    onBeforePasteValue = props.onBeforePasteValue,
     element = props.element,
     className = props.className,
     inputProps = _objectWithoutPropertiesLoose(props, _excluded);
@@ -88,7 +87,6 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
       onBlur: handleBlur,
       onInput: handleInput,
       onKeyDown: handleKeyDown,
-      onPaste: handlePaste,
       className: cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme)),
       element: colored ? /*#__PURE__*/
       React.createElement(ColorableInputElement, {
@@ -103,14 +101,6 @@ export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(p
       }))
     }))
   );
-  function handlePaste(event) {
-    if (onBeforePasteValue && onValueChange) {
-      var _event$clipboardData$, _event$clipboardData;
-      event.preventDefault();
-      onValueChange == null || onValueChange(onBeforePasteValue((_event$clipboardData$ = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('text')) != null ? _event$clipboardData$ : ''));
-    }
-    props.onPaste == null || props.onPaste(event);
-  }
   function getCompatibleIMaskProps() {
     return _extends({
       mask: mask.replace(/0/g, '{\\0}'),

package/components/MaskedInput/MaskedInput/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","useContext","forwardRefAndName","cx","Input","isKeyBackspace","isKeyDelete","ThemeContext","globalClasses","styles","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","getSafeMaskInputType","type","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","onBeforePasteValue","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","theme","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","uiFontGlobalClassesRoot","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","onPaste","handlePaste","root","showOnFocus","onAccept","handleAccept","event","_event$clipboardData$","_event$clipboardData","preventDefault","clipboardData","getData","replace","placeholderChar","definitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport type { IMaskInputProps } from '@skbkontur/react-imask';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { InputProps, InputType } from '../Input';\nimport { Input } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { globalClasses, styles } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport type MaskedInputOnBeforePasteValue = (value: string) => string;\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n\n  /** Устанавливает символ маски\n   * @default _ */\n  maskChar?: string;\n\n  /** Задает словарь символов-регулярок для задания маски.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Включает показ символов маски.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Задает обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /** Задает обработчик вставки значения в инпут.\n   * В value будет передано значение из буфера обмена.\n   * Возвращаемое значение будет использовано как значение инпута.\n   * Используется для фильтрации значения при вставке из буфера обмена.\n   * @param value значение вставки.\n   */\n  onBeforePasteValue?: MaskedInputOnBeforePasteValue;\n\n  /** Убирает из value символы, не введённые пользователем\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n  if (!type) {\n    return type;\n  }\n\n  switch (type) {\n    case 'number':\n    case 'date':\n    case 'time':\n    case 'password':\n      return 'text';\n    default:\n      return type;\n  }\n};\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      onBeforePasteValue,\n      element,\n      className,\n      ...inputProps\n    } = props;\n    const theme = useContext(ThemeContext);\n\n    const inputRef = useRef<Input>(null);\n\n    const [focused, setFocused] = useState(false);\n    const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n    const prevSelectionStart = useRef<number | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () =>\n        inputRef.current &&\n        Object.assign(inputRef.current, {\n          selectAll: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\n        }),\n      [],\n    );\n\n    useEffect(() => {\n      // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n      // Поэтому актуальный value при монтировании надо получать вручную\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    // TODO: Удалить в следующем мажоре\n    // Селекторы могут ожидать определённый порядок классов\n    const uiFontGlobalClassesRoot = 'react-ui-ui-font-root';\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        onPaste={handlePaste}\n        className={cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme))}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n      if (onBeforePasteValue && onValueChange) {\n        event.preventDefault();\n        onValueChange?.(onBeforePasteValue(event.clipboardData?.getData('text') ?? ''));\n      }\n\n      props.onPaste?.(event);\n    }\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useImperativeHandle","useRef","useState","useEffect","useContext","forwardRefAndName","cx","Input","isKeyBackspace","isKeyDelete","ThemeContext","globalClasses","styles","getDefinitions","getMaskChar","ColorableInputElement","FixedIMaskInput","getSafeMaskInputType","type","MaskedInput","props","ref","mask","maskChar","formatChars","_props$alwaysShowMask","alwaysShowMask","_props$colored","colored","_props$imaskProps","imaskProps","customIMaskProps","_props$unmask","unmask","onValueChange","onUnexpectedInput","onChange","element","className","inputProps","_objectWithoutPropertiesLoose","_excluded","theme","inputRef","_useState","focused","setFocused","prevValue","value","String","defaultValue","prevSelectionStart","current","Object","assign","selectAll","_inputRef$current","_inputRef$current2","focus","delaySelectAll","_inputRef$current3","input","selectionStart","getCompatibleIMaskProps","uiFontGlobalClassesRoot","createElement","_extends","onFocus","handleFocus","onBlur","handleBlur","onInput","handleInput","onKeyDown","handleKeyDown","root","showOnFocus","onAccept","handleAccept","replace","placeholderChar","definitions","eager","overwrite","lazy","disabled","_len","arguments","length","args","Array","_key","e","_e$currentTarget","currentTarget","handleUnexpectedInput","_inputRef$current4","selectAllOnFocus","_inputRef$current5","blink","bind","undefined","_e$currentTarget2","selectionEnd"],"sources":["MaskedInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState, useEffect, useContext } from 'react';\nimport type { IMaskInputProps } from '@skbkontur/react-imask';\nimport type { Ref } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { InputProps, InputType } from '../Input';\nimport { Input } from '../Input';\nimport { isKeyBackspace, isKeyDelete } from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { globalClasses, styles } from './MaskedInput.styles';\nimport { getDefinitions, getMaskChar } from './MaskedInput.helpers';\nimport { ColorableInputElement } from './ColorableInputElement';\nimport { FixedIMaskInput } from './FixedIMaskInput';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n\n  /** Устанавливает символ маски\n   * @default _ */\n  maskChar?: string;\n\n  /** Задает словарь символов-регулярок для задания маски.\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' } */\n  formatChars?: Record<string, string>;\n\n  /** Включает показ символов маски.\n   * @default false */\n  alwaysShowMask?: boolean;\n\n  /** Задает обработчик неправильного ввода.\n   * Вторым агрументом будет передан метод вспыхивания акцентным цветом.\n   *\n   * Если обработчик не задан, то инпут вспыхивает по-умолчанию.\n   * @param value значение инпута.\n   * @param blink вспыхнуть акцентным цвтетом.\n   */\n  onUnexpectedInput?: (value: string, blink: () => void) => void;\n\n  /** Убирает из value символы, не введённые пользователем\n   * @default false */\n  unmask?: boolean;\n\n  /** Раскрашивает символы маски.\n   * @default true\n   * @ignore */\n  colored?: boolean;\n\n  /** Задает пропы для компонента `IMaskInput`. Необходимы для юнит-тестов\n   * @ignore */\n  imaskProps?: IMaskInputProps<HTMLInputElement>;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport const getSafeMaskInputType = (type?: InputType): MaskInputType | undefined => {\n  if (!type) {\n    return type;\n  }\n\n  switch (type) {\n    case 'number':\n    case 'date':\n    case 'time':\n    case 'password':\n      return 'text';\n    default:\n      return type;\n  }\n};\n\nexport interface MaskedInputProps\n  extends MaskedProps,\n    Omit<\n      InputProps,\n      'showClearIcon' | 'mask' | 'maxLength' | 'type' | 'alwaysShowMask' | 'onUnexpectedInput' | 'maskChar'\n    > {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask = false,\n      colored = true,\n      imaskProps: customIMaskProps = {},\n      unmask = false,\n      onValueChange,\n      onUnexpectedInput,\n      onChange,\n      element,\n      className,\n      ...inputProps\n    } = props;\n    const theme = useContext(ThemeContext);\n\n    const inputRef = useRef<Input>(null);\n\n    const [focused, setFocused] = useState(false);\n    const prevValue = useRef<string>(props.value || String(props.defaultValue) || '');\n    const prevSelectionStart = useRef<number | null>(null);\n\n    useImperativeHandle(\n      ref,\n      () =>\n        inputRef.current &&\n        Object.assign(inputRef.current, {\n          selectAll: () => {\n            inputRef.current?.focus();\n            inputRef.current?.delaySelectAll();\n          },\n        }),\n      [],\n    );\n\n    useEffect(() => {\n      // Для корректной работы onUnexpectedInput надо знать предыдущий value,\n      // но imask при монтировании не вызывает onAccept, если value невалиден или laze=false.\n      // Поэтому актуальный value при монтировании надо получать вручную\n      if (inputRef.current?.input) {\n        prevValue.current = inputRef.current.input.value;\n        prevSelectionStart.current = inputRef.current.input.selectionStart;\n      }\n    }, []);\n\n    const imaskProps = getCompatibleIMaskProps();\n\n    // TODO: Удалить в следующем мажоре\n    // Селекторы могут ожидать определённый порядок классов\n    const uiFontGlobalClassesRoot = 'react-ui-ui-font-root';\n\n    return (\n      <Input\n        ref={inputRef}\n        {...inputProps}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onInput={handleInput}\n        onKeyDown={handleKeyDown}\n        className={cx(globalClasses.root, uiFontGlobalClassesRoot, className, styles.root(theme))}\n        element={\n          colored ? (\n            <ColorableInputElement showOnFocus={false}>\n              <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n            </ColorableInputElement>\n          ) : (\n            <FixedIMaskInput {...imaskProps} onAccept={handleAccept} />\n          )\n        }\n      />\n    );\n\n    function getCompatibleIMaskProps(): IMaskInputProps<HTMLInputElement> {\n      return {\n        mask: mask.replace(/0/g, '{\\\\0}') as any,\n        placeholderChar: getMaskChar(maskChar),\n        definitions: getDefinitions(formatChars),\n        // FIXME: Должно быть eager=true, но в imask ломается удаление по delete\n        eager: 'append',\n        overwrite: 'shift',\n        lazy: !alwaysShowMask && (props.disabled || !focused),\n        unmask,\n        ...customIMaskProps,\n      } as IMaskInputProps<HTMLInputElement>;\n    }\n\n    function handleAccept(...args: Parameters<Required<IMaskInputProps<HTMLInputElement>>['onAccept']>) {\n      const [value, , e] = args;\n\n      // Метод onAccept может вызываться при монтировании, если не задан проп defaultValue.\n      // Но нативный input никогда не вызывает onChange при монтировании.\n      // Наше событие onValueChange в Input вывается в тех же случаях, что и нативный onChange,\n      // поэтому чтобы сохранить консинстентность будем ориентироваться на наличие аргумента e.\n      // Он содержит нативное событие, вызвавшее изменение.\n      e && onValueChange?.(value);\n      !e && (prevValue.current = value);\n    }\n\n    /**\n     * Отслеживаем неожиданные нажатия\n     * handleAccept не вызывается когда значение с маской не меняется\n     * Сначала вызывается handleAccept, затем handleInput\n     */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const { value, selectionStart } = e.currentTarget;\n\n      // При вводе неожиданных символов или удалении каретка может перепрыгивать фиксированные символы.\n      // Такие случаи не расцениваем как неожиданный ввод, т.к. пользователь может намеренно их вводить.\n      if (prevValue.current === value && selectionStart === prevSelectionStart.current) {\n        handleUnexpectedInput(value);\n      }\n      prevValue.current = value;\n      prevSelectionStart.current = selectionStart;\n\n      props.onInput?.(e);\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus?.(e);\n\n      // Если value из пропов отличается от value, которое получит input после обработки,\n      // то imask будет ставить каретку за последним валидным символом.\n      props.selectAllOnFocus && inputRef.current?.delaySelectAll();\n    }\n\n    function handleUnexpectedInput(value: string) {\n      const blink = inputRef.current?.blink.bind(inputRef.current) || (() => undefined);\n      onUnexpectedInput ? onUnexpectedInput(value, blink) : blink();\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur?.(e);\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n      const { value, selectionStart, selectionEnd } = e.currentTarget;\n\n      if (\n        (isKeyBackspace(e) && selectionStart === 0 && selectionEnd === 0) ||\n        (isKeyDelete(e) && prevSelectionStart.current === value.length)\n      ) {\n        // Случаи, когда нажатие клавиш не тригерит `onInput`\n        handleUnexpectedInput(value);\n        prevValue.current = e.currentTarget.value;\n      }\n      prevSelectionStart.current = selectionStart;\n\n      props.onKeyDown?.(e);\n    }\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/components/MaskedInput/MaskedInput.d.ts

@@ -1,7 +1,6 @@
 import type { IMaskInputProps } from '@skbkontur/react-imask';
 import type { InputProps, InputType } from '../Input';
 import { Input } from '../Input';
-export type MaskedInputOnBeforePasteValue = (value: string) => string;
 export interface MaskedProps {
     /** Паттерн маски */
     mask: string;
@@ -22,13 +21,6 @@ export interface MaskedProps {
      * @param blink вспыхнуть акцентным цвтетом.
      */
     onUnexpectedInput?: (value: string, blink: () => void) => void;
-    /** Задает обработчик вставки значения в инпут.
-     * В value будет передано значение из буфера обмена.
-     * Возвращаемое значение будет использовано как значение инпута.
-     * Используется для фильтрации значения при вставке из буфера обмена.
-     * @param value значение вставки.
-     */
-    onBeforePasteValue?: MaskedInputOnBeforePasteValue;
     /** Убирает из value символы, не введённые пользователем
      * @default false */
     unmask?: boolean;

package/components/MaskedInput/MaskedInput.md

@@ -0,0 +1,114 @@
+### Проп `mask`
+
+Паттерн ввода. Пример с номером телефона.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    placeholder="Номер телефона"
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `alwaysShowMask`
+
+Показывает маску всегда.
+
+```jsx harmony
+<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask />
+```
+
+### Проп `maskChar`
+
+Символом маски может быть любой символ.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="9999 9999 9999 9999"
+    maskChar="X"
+    placeholder="Номер карты"
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `formatChars`
+
+При необходимости можно настроить собственный словарь.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<MaskedInput
+  mask="Hh:Mm:Ss"
+  alwaysShowMask
+  formatChars={{
+    H: '[0-2]',
+    h: value.startsWith('2') ? '[0-3]' : '[0-9]',
+    M: '[0-5]',
+    m: '[0-9]',
+    S: '[0-5]',
+    s: '[0-9]',
+  }}
+  value={value}
+  onValueChange={setValue}
+/>
+```
+
+### Проп `unmask`
+
+Можно сразу получать очищенный value, содержащий только введённый пользователем символы.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+7 (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```
+
+### Проп `unmask` с фигурными скобками
+
+Если обернуть фиксированные символы в фигурные скобки, то они попадут в `value` при `unmask = true`.
+
+```jsx harmony
+const [value, setValue] = React.useState('');
+
+<>
+  <span>value: "{value}"</span>
+  <br />
+  <br />
+  <MaskedInput
+    mask="+{7} (999) 999-99-99"
+    unmask
+    alwaysShowMask
+    value={value}
+    onValueChange={setValue}
+  />
+</>
+```

package/components/MenuFooter/MenuFooter.md

@@ -0,0 +1,27 @@
+### Базовый пример меню с заголовками
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  menuMaxHeight="10rem"
+  caption={<Button use="primary">Сотрудники компании</Button>}
+  >
+  <MenuItem>Вася</MenuItem>
+  <MenuItem>Петя</MenuItem>
+  <MenuItem>Маша</MenuItem>
+  <MenuFooter>Всего 3 человека</MenuFooter>
+</DropdownMenu>
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <MenuFooter size={'small'}>Маленький</MenuFooter>
+  <MenuFooter size={'medium'}>Средний</MenuFooter>
+  <MenuFooter size={'large'}>Большой</MenuFooter>
+</Gapped>
+```

package/components/MenuHeader/MenuHeader.md

@@ -0,0 +1,35 @@
+### Базовый пример меню с заголовками
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  menuMaxHeight="10rem"
+  caption={<Button use="primary">Сотрудники компании</Button>}
+  >
+  <MenuHeader>Разработчики</MenuHeader>
+  <MenuItem>Вася</MenuItem>
+  <MenuItem>Петя</MenuItem>
+  <MenuItem>Маша</MenuItem>
+  <MenuHeader>Дизайнеры</MenuHeader>
+  <MenuItem>Галя</MenuItem>
+  <MenuItem>Гриша</MenuItem>
+  <MenuItem>Гена</MenuItem>
+  <MenuHeader>Продакты</MenuHeader>
+  <MenuItem>Валя</MenuItem>
+  <MenuItem>Аля</MenuItem>
+  <MenuItem>Артём</MenuItem>
+</DropdownMenu>
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <MenuHeader size={'small'}>Маленький</MenuHeader>
+  <MenuHeader size={'medium'}>Средний</MenuHeader>
+  <MenuHeader size={'large'}>Большой</MenuHeader>
+</Gapped>
+```