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

package/CHANGELOG.md

@@ -3,36 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.3.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.3.2...@skbkontur/react-ui@5.3.3) (2025-09-22)
-
-
-### Bug Fixes
-
-* **Tooltip:** fix incorrect import ([58206c9](https://github.com/skbkontur/retail-ui/commit/58206c91875e3180180be91800e302031b1b3266))
-
-
-
-
-
-## [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)
-
-
-### Bug Fixes
-
-* **select:** fix pass empty placeholder ([eb5b0ed](https://github.com/skbkontur/retail-ui/commit/eb5b0ed94c5133ab4a0a461ca656512583c292ff))
-
-
-
-
-
 # [5.3.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.2.1...@skbkontur/react-ui@5.3.0) (2025-08-25)
 
 

package/cjs/components/Autocomplete/Autocomplete.md

@@ -0,0 +1,113 @@
+### Базовый пример
+```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

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

@@ -0,0 +1,276 @@
+### Календарь с заданной датой
+
+```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>
+</>;
+```