@skbkontur/react-ui 5.3.1 → 5.3.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.3.1...@skbkontur/react-ui@5.3.2) (2025-09-10)
+
+**Note:** Version bump only for package @skbkontur/react-ui
+
+
+
+
+
 ## [5.3.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.3.0...@skbkontur/react-ui@5.3.1) (2025-09-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
@@ -22,16 +22,12 @@
     "clean": "git clean -fdxqe node_modules",
     "prerelease": "node scripts/publish/prepublish && yarn build",
     "release": "npm publish ./build --workspaces=false",
-    "build-old-docs": "rimraf .styleguide/deploy && yarn run styleguide:build",
-    "deploy-old-docs": "gh-pages -a -d .styleguide/deploy -r git@github.com:skbkontur/react-ui.git",
     "storybook": "storybook dev -p 6060",
     "storybook:build": "cross-env STORYBOOK_REACT_UI_TEST=true storybook build -o .storybook/build --quiet",
     "storybook:docs-build": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook build --docs -c .storybook-docs -o .storybook/build --quiet",
     "storybook:test": "cross-env STORYBOOK_REACT_UI_TEST=true storybook dev --ci -p 6060",
     "storybook:docs": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook dev --docs -p 6061 -c .storybook-docs",
     "storybook:serve": "yarn serve -l 6060 .storybook/build",
-    "styleguide": "styleguidist server --config .styleguide/config/dev.config.js",
-    "styleguide:build": "node .styleguide/build",
     "lint": "run-p -c lint:*",
     "lint:eslint": "cross-env TIMING=1 yarn eslint ./",
     "lint:tsc": "tsc --noEmit --diagnostics",
@@ -140,7 +136,6 @@
     "react": "18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
-    "react-styleguidist": "^12.0.1",
     "rimraf": "^5.0.7",
     "selenium-webdriver": "^4.27.0",
     "semver": "^7.6.2",

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,113 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} />;
-```
-
-### Очистка Autocomplete
-Очистить значение в `Autocomplete` можно только с помощью пустой строки.
-```jsx harmony
-import { Autocomplete, Button, Group } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Group>
-  <Autocomplete source={items} value={value} onValueChange={setValue} />
-  <Button onClick={() => setValue('')}>Очистить</Button>
-</Group>
-```
-
-### Размер
-```jsx harmony
-import { Autocomplete, Gapped } from '@skbkontur/react-ui';
-
-const items = ['Маленький', 'Средний', 'Большой'];
-
-const [valueSmall, setValueSmall] = React.useState('Маленький');
-const [valueMedium, setValueMedium] = React.useState('Средний');
-const [valueLarge, setValueLarge] = React.useState('Большой');
-
-<Gapped vertical>
-  <Autocomplete source={items} value={valueSmall} onValueChange={setValueSmall} size={'small'} />
-  <Autocomplete source={items} value={valueMedium} onValueChange={setValueMedium} size={'medium'} />
-  <Autocomplete source={items} value={valueLarge} onValueChange={setValueLarge} size={'large'} />
-</Gapped>
-```
-
-### Выделение введеного значения при фокусе
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} selectAllOnFocus />
-```
-
-### Иконка
-```jsx harmony
-import { Autocomplete, Gapped } from '@skbkontur/react-ui';
-import { SearchLoupeIcon16Regular } from '@skbkontur/icons/SearchLoupeIcon16Regular';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [valueLeft, setValueLeft] = React.useState('');
-const [valueRight, setValueRight] = React.useState('');
-
-<Gapped>
-  <Autocomplete source={items} value={valueLeft} onValueChange={setValueLeft} leftIcon={<SearchLoupeIcon16Regular />} />
-  <Autocomplete source={items} value={valueRight} onValueChange={setValueRight} rightIcon={<SearchLoupeIcon16Regular />} />
-</Gapped>
-```
-
-### Ширина меню
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} menuWidth={'80%'} />
-```
-
-### Расположение выпадающего окна Autocomplete
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} menuPos={'top'} />
-```
-
-### Тень у выпадающего меню
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} hasShadow />
-```
-
-### Режима прозрачной рамки
-```jsx harmony
-import { Autocomplete } from '@skbkontur/react-ui';
-
-const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
-
-const [value, setValue] = React.useState('Kappa');
-
-<Autocomplete source={items} value={value} onValueChange={setValue} borderless />
-```

package/cjs/components/Button/Button.md

@@ -1,261 +0,0 @@
-### Базовый пример
-По умолчанию, кнопка принимает все пропы `HTMLButtonElement`.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button onClick={alert} name="report">Создать отчёт</Button>;
-```
-
-### Корневой компонент
-Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`. Кнопка принимает все пропы переданного в `component` компонента.
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button component='a' href='https://kontur.ru' target="_blank">Ссылка, но выглядит как кнопка</Button>
-```
-
-### Различные стили
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const bgStyle = {
-  backgroundImage: `linear-gradient(to right, rgba(130, 130, 130, 0.5) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(130, 130, 130, 0.5) 1px, transparent 1px)`,
-  backgroundSize: `16px 16px`,
-  backgroundPosition: `-8px -8px`,
-  padding: 16
-};
-
-<Gapped vertical>
-  <Gapped>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-  <Gapped style={bgStyle}>
-    <Button use="default">Default</Button>
-    <Button use="primary">Primary</Button>
-    <Button use="success">Success</Button>
-    <Button use="danger">Danger</Button>
-    <Button use="pay">Pay</Button>
-    <Button use="text">Text</Button>
-    <Button use="backless">Backless</Button>
-    <Button use="link">Link</Button>
-  </Gapped>
-</Gapped>
-```
-
-### Иконка
-В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
-
-<Gapped gap={5}>
-  <Button icon={<XIcon16Regular />}>Закрыть</Button>
-  <Button icon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>Закрыть</Button>
-  <Button rightIcon={<XIcon16Regular />}>Закрыть</Button>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-<div
-  style={{
-    display: "flex",
-    alignItems: "end",
-    gap: '10px',
-  }}
->
-  <Button size="small">Маленькая</Button>
-  <Button size="medium">Средняя</Button>
-  <Button size="large">Большая</Button>
-</div>
-```
-
-### Ширина
-
-```jsx harmony
-<Button width={40}>Закрыть</Button>
-```
-
-### Состояние валидации
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-<Gapped gap={5}>
-  <Button warning>Закрыть</Button>
-  <Button error>Закрыть</Button>
-</Gapped>
-```
-
-### Стрелка
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button arrow="left" size="medium">
-    Назад
-  </Button>
-  <Button arrow size="medium">
-    Далее
-  </Button>
-</Gapped>
-```
-
-### Состояние загрузки
-
-**Поведение:**
-Кнопка на время нахождения в состоянии загрузки отключается.
-Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-import { MinusCircleIcon16Light } from '@skbkontur/icons/MinusCircleIcon16Light';
-
-const [loading, setLoading] = React.useState(false);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const handleLoadingStart = () => {
-  delay(2000)()
-    .then(() => {
-      setLoading(false);
-    })
-};
-
-const handleClick = () => {
-  setLoading(true);
-  handleLoadingStart();
-};
-
-<Gapped>
-  <Button width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-  <Button icon={<MinusCircleIcon16Light />} rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
-    Удалить
-  </Button>
-</Gapped>
-
-```
-
-### Проп темы
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button theme={{textColorDefault: '#C00000'}}>Ok</Button>
-  <Button use="link" theme={{linkColor: '#C00000'}}>Ok</Button>
-  <Button>Ok</Button>
-</Gapped>
-```
-
-### Кастомизация кнопки-ссылки
-
-```jsx harmony
-import { Toast } from "@skbkontur/react-ui";
-import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
-
-const textDecorationStyles = {
-  btnLinkTextUnderlineOffset: '1px',
-}
-
-const underlineOnHoverStyles = {
-  btnLinkTextDecorationColor: 'transparent',
-}
-
-const differentColorStyles = {
-  btnLinkColor: 'blue',
-  btnLinkHoverColor: 'blue',
-  btnLinkActiveColor: '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}><Button use={'link'} theme={styles}>Button-link</Button></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>
-```
-
-### Узкая Кнопка
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Button narrow>
-  Создать отчет
-</Button>
-```
-
-### Состояния валидации
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped gap={5}>
-  <Button warning>
-    Warning
-  </Button>
-  <Button error>
-    Error
-  </Button>
-</Gapped>
-```

package/cjs/components/Calendar/Calendar.md

@@ -1,276 +0,0 @@
-### Календарь с заданной датой
-
-```jsx harmony
-const [date, setDate] = React.useState("01.11.2021");
-
-<Calendar
-  value={date}
-  onValueChange={setDate}
-/>
-```
-
-### initialMonth и initialYear
-Вне зависимости от того, какая дата выбрана в календаре в данный момент - можно изменить отображение начального года и месяца с помощью пропов `initialMonth` и `initialYear`
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-const [date, setDate] = React.useState("11.12.2021");
-const initialMonth = 7;
-const initialYear = 2000;
-
-<div style={{ display: 'flex' }}>
-  <Calendar
-    value={date}
-    onValueChange={setDate}
-    initialMonth={initialMonth}
-    initialYear={initialYear}
-  />
-  <div style={{ fontSize: '16px' }}>
-    <p>Выбранная дата: {date}</p>
-    <p>Начальный месяц: {initialMonth}</p>
-    <p>Начальный год: {initialYear}</p>
-  </div>
-</div>
-```
-
-### isHoliday
-
-В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
-
-```jsx harmony
-import * as DatePickerHelpers from '@skbkontur/react-ui/components/DatePicker/DatePickerHelpers';
-
-const [date, setDate] = React.useState();
-
-const createRandomHolidays = () => {
-  const holidays = new Array(10);
-  const today = new Date();
-
-  for (let index = 0; index < holidays.length; index++) {
-    const day = new Date(today.setDate(today.getDate() + 1 + index).valueOf());
-
-    const holiday = {
-      date: day.getDate(),
-      month: day.getMonth(),
-      year: day.getFullYear(),
-    };
-
-    holidays[index] = DatePickerHelpers.formatDate(holiday);
-  }
-
-  return holidays;
-};
-const holidays = createRandomHolidays();
-
-const isHoliday = (day, isWeekend) => {
-  const today = new Date();
-  const holiday = {
-    date: today.getDate(),
-    month: today.getMonth(),
-    year: today.getFullYear(),
-  };
-
-  if (holidays.includes(day)) {
-    return !isWeekend;
-  }
-
-  return isWeekend;
-};
-
-<Calendar isHoliday={isHoliday} value={date} onValueChange={setDate} />;
-```
-
-### Высота
-Календарю можно задать кастомную высоту с помощью переменной темы `calendarWrapperHeight`
-
-- Базовая высота календаря - `330px`
-- Максимальная высота календаря - `450px`
-
-```jsx harmony
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
-
-const [date, setDate] = React.useState("01.11.2021");
-const theme = React.useContext(ThemeContext);
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({ calendarWrapperHeight: '450px' }, theme)}
-  >
-  <Calendar
-    value={date}
-    onValueChange={setDate}
-  />
-</ThemeContext.Provider>
-```
-
-### Кастомный рендер дня
-Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
-
-```jsx harmony
-import { Tooltip, Hint, CalendarDay } from '@skbkontur/react-ui';
-
-const initialValue = "02.09.2023";
-
-const [value, setValue] = React.useState(initialValue);
-
-const renderDay = (props) => {
-  const [date, month, year] = props.date.split('.').map(Number);
-
-  if (month == 9 && date > 12 && date < 16) {
-    return (
-      <Tooltip render={() => "Кастомный день"}>
-        <CalendarDay {...props} style={{ background: 'darkgray' }} />
-      </Tooltip>
-    );
-  }
-
-  if (month == 8 && date == 20) {
-    return (
-      <Hint text={date} pos="right middle">
-        <CalendarDay {...props}>
-          <b style={{color: 'orange'}}>#</b>
-        </CalendarDay>
-      </Hint>
-    );
-  }
-
-  return <CalendarDay {...props} />
-};
-
-<Calendar
-  value={value}
-  onValueChange={setValue}
-  renderDay={renderDay}
-/>;
-```
-
-### Календарь с ценами
-Пример с кастомизацией темы и кастомным рендером дня.
-
-```jsx harmony
-import { CalendarDay } from '@skbkontur/react-ui';
-import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
-import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
-
-const theme = React.useContext(ThemeContext);
-
-function renderDay(props) {
-  const [date, month] = props.date.split('.').map(Number);
-  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
-  const randomPrice = Math.round((date / month) * 1000);
-
-  return (
-    <CalendarDay {...props}>
-      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
-      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
-        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
-      </div>
-    </CalendarDay>
-  );
-}
-
-const [value, setValue] = React.useState(null);
-
-<ThemeContext.Provider
-  value={ThemeFactory.create({
-    calendarCellWidth: '56px',
-    calendarCellHeight: '56px',
-    calendarCellLineHeight: '1.5',
-    calendarWrapperHeight: '600px',
-    calendarCellBorderRadius: '8px'
-  }, theme)}
->
-  <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
-</ThemeContext.Provider>
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface CalendarLocale {
-  months?: string[];
-  selectMonthAriaLabel?: string;
-  selectYearAriaLabel?: string;
-  selectChosenAriaLabel?: string;
-  dayCellChooseDateAriaLabel?: string;
-}
-
-const ru_RU = {
-  months: [
-    'Январь',
-    'Февраль',
-    'Март',
-    'Апрель',
-    'Май',
-    'Июнь',
-    'Июль',
-    'Август',
-    'Сентябрь',
-    'Октябрь',
-    'Ноябрь',
-    'Декабрь',
-  ],
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-
-const en_GB = {
-  months: [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ],
-  selectMonthAriaLabel: 'месяц',
-  selectYearAriaLabel: 'год',
-  selectChosenAriaLabel: 'Выбранный',
-  dayCellChooseDateAriaLabel: 'Выбрать дату',
-};
-```
-
-
-### Скролл к месяцу
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-const initialValue = "02.09.2023";
-const [value, setValue] = React.useState(initialValue);
-const calendarRef = React.useRef(null);
-
-<>
-  <Gapped gap={8} verticalAlign="top">
-    <Calendar
-      value={value}
-      ref={calendarRef}
-      onValueChange={setValue}
-    />
-
-    <Gapped vertical gap={8}>
-      <Button onClick={() => calendarRef.current.scrollToMonth(1, 2023)}>
-        I квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(4, 2023)}>
-        II квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(7, 2023)}>
-        III квартал
-      </Button>
-      <Button onClick={() => calendarRef.current.scrollToMonth(10, 2023)}>
-        IV квартал
-      </Button>
-    </Gapped>
-  </Gapped>
-</>;
-```