@skbkontur/react-ui 5.3.0 → 5.3.2

package/components/MaskedInput/MaskedInput.md

@@ -1,114 +0,0 @@
-### Проп `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

@@ -1,27 +0,0 @@
-### Базовый пример меню с заголовками
-
-```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

@@ -1,35 +0,0 @@
-### Базовый пример меню с заголовками
-
-```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>
-```

package/components/MenuItem/MenuItem.md

@@ -1,139 +0,0 @@
-### Меню с базовыми элементами меню
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
-  >
-  <MenuItem>Базовый элемент меню</MenuItem>
-  <MenuItem>Ещё один базовый элемент меню</MenuItem>
-  <MenuItem>И ещё один</MenuItem>
-</DropdownMenu>
-```
-
-### Disabled
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
-  >
-  <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem disabled>А это заблокированный</MenuItem>
-  <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem disabled>И снова заблокированный</MenuItem>
-  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
-</DropdownMenu>
-```
-
-### Запрет выделения
-В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
-  >
-  <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem isNotSelectable>А это отключённый</MenuItem>
-  <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
-  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
-</DropdownMenu>
-```
-
-### Описание элементов
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
-  >
-  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
-  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
-  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
-  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
-  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
-</DropdownMenu>
-```
-
-### Иконки в элементах
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-import { TechPhoneSmartIcon16Regular } from '@skbkontur/icons/icons/TechPhoneSmartIcon/TechPhoneSmartIcon16Regular';
-import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
-import { HandThumbDownIcon16Regular } from '@skbkontur/icons/icons/HandThumbDownIcon/HandThumbDownIcon16Regular';
-
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с иконками</Button>}
-  >
-  <MenuItem icon={<CheckAIcon16Regular />}>Базовый элемент меню c иконкой</MenuItem>
-  <MenuItem
-    disabled
-    icon={<HandThumbDownIcon16Regular />}
-    >
-    Отключённый элемент меню с иконкой
-  </MenuItem>
-  <MenuItem
-    icon={<TechPhoneSmartIcon16Regular />}
-    comment="А слева вы можете видеть икону 21-го века"
-    >
-     Элемент меню с описанием и иконкой
-  </MenuItem>
-</DropdownMenu>
-```
-
-### Проп href
-
-В элементы меню можно передавать проп `href`, чтобы превратить их в ссылку. Лучше выделять такие элементы иконками.
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu, MenuSeparator } from '@skbkontur/react-ui';
-import { ArrowUiCornerOutUpRightIcon } from '@skbkontur/icons/icons/ArrowUiCornerOutUpRightIcon';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с ссылками</Button>}
-  >
-  <MenuItem
-    href="http://tech.skbkontur.ru/react-ui/"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Начало документации
-  </MenuItem>
-  <MenuItem
-    href="https://github.com/skbkontur/retail-ui/graphs/contributors"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Список прекрасных людей
-  </MenuItem>
-  <MenuSeparator />
-  <MenuItem
-    icon={< ArrowUiCornerOutUpRightIcon />}
-    href="https://guides.kontur.ru/"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Подробнее в Контур Гайдах
-  </MenuItem>
-</DropdownMenu>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <MenuItem size={'small'}>Маленький</MenuItem>
-  <MenuItem size={'medium'}>Средний</MenuItem>
-  <MenuItem size={'large'}>Большой</MenuItem>
-</Gapped>
-```

package/components/MenuSeparator/MenuSeparator.md

@@ -1,14 +0,0 @@
-### Меню с разделителями
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
-  <MenuItem>У меня есть разделитель</MenuItem>
-  <MenuSeparator />
-  <MenuItem>У меня тоже!</MenuItem>
-  <MenuSeparator />
-  <MenuItem>А у меня нет :(</MenuItem>
-  <MenuItem>Как и у меня :(</MenuItem>
-</DropdownMenu>;
-```

package/components/MiniModal/MiniModal.md

@@ -1,231 +0,0 @@
-Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
-
-`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
-Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в
-отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
-
-👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
-
-### Уведомление
-
-Самый простой вариант использования:
-
-```jsx harmony
-import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
-import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
-
-const PayNotifice = () => {
-
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header>
-            Простое уведомление
-          </MiniModal.Header>
-          <MiniModal.Body>
-            Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
-          </MiniModal.Body>
-          <MiniModal.Footer>
-            <Button size="medium" use="primary" onClick={close}>Понятно</Button>
-          </MiniModal.Footer>
-        </MiniModal>
-      )}
-      <Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
-    </>
-  );
-}
-
-<PayNotifice />
-```
-
-### Подтверждение
-
-Иногда от пользователя требуется выбрать одно из доступных действий.
-
-Например, подтвердить важное действие или отклонить его:
-
-```jsx harmony
-import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
-import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
-
-const ConfirmDelete = ({ name, handleDelete }) => {
-  const theme = React.useContext(ThemeContext);
-
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const mainAction = () => {
-    handleDelete();
-    close();
-  };
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
-            Удалить "{name}"?
-          </MiniModal.Header>
-          <MiniModal.Footer direction="column">
-            <Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
-            <Button size="medium" onClick={close}>Отменить</Button>
-          </MiniModal.Footer>
-        </MiniModal>
-      )}
-      <Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
-    </>
-  );
-}
-
-const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
-
-<Gapped vertical>
-  {list.map((name) => (
-    <Gapped key={name}>
-      <div style={{ width: 200, borderBottom: 'dashed 1px' }}>
-        {name}
-      </div>
-      <span>
-        <ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
-      </span>
-    </Gapped>
-  ))}
-</Gapped>
-```
-
-### Синглтон
-
-Одно и то же диалоговое окно может вызываться в разных частях приложения.
-
-В таком случае стоит реализовать паттерн синглтона:
-
-```jsx harmony
-import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
-import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
-import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
-
-const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const handleAllowAll = () => {
-    setStatus('Разрешить все');
-    close();
-  };
-  const handleAllowBasic = () => {
-    setStatus('Разрешить только основные');
-    close();
-  };
-  const handleDenyAll = () => {
-    setStatus('Запретить');
-    close();
-  };
-
-  React.useImperativeHandle(ref, () => ({ open, close }), []);
-
-  return isOpened && (
-    <MiniModal>
-      <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
-        Разрешить уведомления?
-      </MiniModal.Header>
-      <MiniModal.Footer direction="column">
-        <Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
-        <Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
-        <MiniModal.Indent/>
-        <Button size="medium" onClick={handleDenyAll}>Запретить</Button>
-      </MiniModal.Footer>
-    </MiniModal>
-  );
-});
-
-const [status, setStatus] = React.useState('-не выбрано-');
-
-const NotificationEnableRef = React.useRef(null);
-
-const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
-
-<>
-  <EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
-  <Gapped vertical>
-    <span>
-      <NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
-    </span>
-    <Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-    <Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-    <Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-  </Gapped>
-</>
-```
-
-### Ожидание
-
-Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
-
-В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
-
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const handleMainClick = () => {
-    setIsLoading(true);
-    handleUpdate()
-      .then(() => {
-        setIsLoading(false);
-        setIsOpened(false);
-        setLastUpdated(new Date());
-      });
-  };
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header>
-            Обновить?
-          </MiniModal.Header>
-          <MiniModal.Body>
-            После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
-          </MiniModal.Body>
-          <MiniModal.Footer>
-            <Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
-            <Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
-          </MiniModal.Footer>
-
-        </MiniModal>
-      )}
-      <Button onClick={open} use="success">Обновить</Button>
-    </>
-  );
-}
-
-const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-
-const [lastUpdated, setLastUpdated] = React.useState(new Date());
-
-const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
-
-<Gapped>
-  <WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
-  <span>
-    Последнее обновление: {dateTimeFormat.format(lastUpdated)}
-  </span>
-</Gapped>
-```

package/components/Modal/Modal.md

@@ -1,56 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-import { Button, Toggle } from '@skbkontur/react-ui';
-
-const [opened, setOpened] = React.useState(false);
-const [panel, setPanel] = React.useState(false);
-
-function renderModal() {
-  return (
-    <Modal onClose={close}>
-      <Modal.Header>Title</Modal.Header>
-      <Modal.Body>
-        <p>Use rxjs operators with react hooks</p>
-
-        <div>
-          <Toggle checked={panel} onValueChange={setPanel} /> Panel{' '}
-          {panel ? 'enabled' : 'disabled'}
-        </div>
-      </Modal.Body>
-      <Modal.Footer panel={panel}>
-        <Button onClick={close}>Close</Button>
-      </Modal.Footer>
-    </Modal>
-  );
-}
-
-function open() {
-  setOpened(true);
-}
-
-function close() {
-  setOpened(false);
-}
-
-<div>
-  {opened && renderModal()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface ModalLocale {
-  closeButtonAriaLabel: string;
-}
-
-const ru_RU = {
-  closeButtonAriaLabel: 'Закрыть модальное окно'
-}
-
-const en_GB = {
-  closeButtonAriaLabel: 'Close modal window'
-}
-```

package/components/Paging/Paging.md

@@ -1,57 +0,0 @@
-Управление с клавиатуры работает в двух вариантах:
-
-- **useGlobalListener === true** слушатель keydown событий на document, если на стринице несколько компонентов Paging,
-  обработчик будет срабатывать на каждом
-- **useGlobalListener === false** обработка нажатия клавиш будет работать только когда компонент в фокусе.
-
-Навигационные подсказки появляются когда доступно управление с клавиатуры и `withoutNavigationHint != true`
-
-### Базовый пример
-```jsx harmony
-class Paginator3000 extends React.Component {
-  constructor() {
-    super();
-    this.state = { active: 1 };
-    this._handlePageChange = this._handlePageChange.bind(this);
-  }
-
-  render() {
-    return <Paging activePage={this.state.active} onPageChange={this._handlePageChange} pagesCount={12} />;
-  }
-
-  _handlePageChange(pageNumber) {
-    this.setState({ active: pageNumber });
-  }
-}
-
-<Paginator3000 />;
-```
-
-### Пейджинг в отключенном состоянии
-
-```jsx
-const [activePage, setActivePage] = React.useState(3);
-
-<Paging
-  disabled
-  onPageChange={(activePage) => setActivePage(activePage)}
-  activePage={activePage}
-  pagesCount={8}
-/>
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface PagingLocale {
-  forward?: string;
-}
-
-const ru_RU = {
-  forward: 'Дальше',
-};
-
-const en_GB = {
-  forward: 'Forward',
-};
-```