@via-profit/ui-kit 0.2.6 → 0.3.0

package/Autocomplete/AutocompleteContainer.js

@@ -52,6 +52,34 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     react_1.default.useImperativeHandle(ref, () => ({
         clear: () => clear(),
     }), [clear]);
+    const applyFilterForItems = react_1.default.useCallback((inputValue, itemList) => {
+        const query = inputValue.toLowerCase().trim();
+        // Apply filter
+        return typeof filterItems !== 'function' || query.length === 0
+            ? itemList
+            : filterItems(itemList, { query, inputValue });
+    }, [filterItems]);
+    /**
+     * Restore the input text from the current value (used by clearOnBlur)
+     */
+    const restoreInputValue = react_1.default.useCallback(() => {
+        const newInputValue = currentValue === null
+            ? ''
+            : selectedItemToString(currentValue);
+        const newFilteredItems = multiple ? filteredItems : applyFilterForItems(newInputValue, items);
+        dispatch((0, context_1.actionSetPartial)({
+            filteredItems: newFilteredItems,
+            inputValue: newInputValue,
+        }));
+    }, [
+        currentValue,
+        selectedItemToString,
+        multiple,
+        filteredItems,
+        applyFilterForItems,
+        items,
+        dispatch,
+    ]);
     const inputKeydownEvent = react_1.default.useCallback((event) => {
         var _a, _b, _c, _d, _e;
         if (!isFocusedRef.current) {
@@ -98,8 +126,16 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             // case 'PageDown':
             //   event.preventDefault();
             //   break;
-            case 'Escape':
             case 'Tab':
+                // Focus leaves the field, so clearOnBlur applies as for the outside click
+                if (clearOnBlur) {
+                    restoreInputValue();
+                }
+                if (currentOpen) {
+                    onRequestClose(event);
+                }
+                break;
+            case 'Escape':
                 if (currentOpen) {
                     onRequestClose(event);
                 }
@@ -108,14 +144,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 // do nothing
                 break;
         }
-    }, [currentOpen, onRequestClose, onRequestOpen, filteredItems.length]);
-    const applyFilterForItems = react_1.default.useCallback((inputValue, itemList) => {
-        const query = inputValue.toLowerCase().trim();
-        // Apply filter
-        return typeof filterItems !== 'function' || query.length === 0
-            ? itemList
-            : filterItems(itemList, { query, inputValue });
-    }, [filterItems]);
+    }, [
+        currentOpen,
+        onRequestClose,
+        onRequestOpen,
+        filteredItems.length,
+        clearOnBlur,
+        restoreInputValue,
+    ]);
     const renderChildren = react_1.default.useCallback(({ index, item }, itemProps) => children({ index, item: item, inputValue }, itemProps), [children, inputValue]);
     /**
      * Only affected value change action
@@ -178,16 +214,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             // Click outside
             if (needToClose && currentOpen) {
                 if (clearOnBlur) {
-                    const newInputValue = currentValue === null
-                        ? ''
-                        : selectedItemToString(currentValue);
-                    const newFilteredItems = multiple
-                        ? filteredItems
-                        : applyFilterForItems(newInputValue, items);
-                    dispatch((0, context_1.actionSetPartial)({
-                        filteredItems: newFilteredItems,
-                        inputValue: newInputValue,
-                    }));
+                    restoreInputValue();
                 }
                 if (isOpen) {
                     onRequestClose(event);
@@ -198,22 +225,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         return () => {
             window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
         };
-    }, [
-        onRequestClose,
-        anchorElement,
-        filteredItems,
-        items,
-        isOpen,
-        clearOnBlur,
-        currentOpen,
-        dispatch,
-        value,
-        selectedItemToString,
-        currentValue,
-        applyFilterForItems,
-        inputValue,
-        multiple,
-    ]);
+    }, [onRequestClose, anchorElement, isOpen, clearOnBlur, currentOpen, restoreInputValue]);
     const onSelectMenuItem = react_1.default.useCallback(item => {
         if (!multiple) {
             dispatch({

package/Autocomplete/index.js

@@ -35,13 +35,15 @@ __exportStar(require("./AutocompleteContainer"), exports);
 __exportStar(require("./AutocompleteItem"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
     const { children, items, filterItems, isOpen, multiple, selectedItemToString, value } = props, restProps = __rest(props, ["children", "items", "filterItems", "isOpen", "multiple", "selectedItemToString", "value"]);
-    return (react_1.default.createElement(context_1.ContextProvider, { initialState: (0, context_1.createInitialState)({
-            items,
-            selectedItemToString,
-            filterItems,
-            value,
-            isOpen,
-        }) },
+    // The initial state is used only on mount, so do not recompute it (and run filterItems) on every render
+    const [initialState] = react_1.default.useState(() => (0, context_1.createInitialState)({
+        items,
+        selectedItemToString,
+        filterItems,
+        value,
+        isOpen,
+    }));
+    return (react_1.default.createElement(context_1.ContextProvider, { initialState: initialState },
         react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, filterItems: filterItems, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));
 });
 Autocomplete.displayName = 'Autocomplete';

package/Autocomplete2/Autocomplete2.js

@@ -39,7 +39,7 @@ const Autocomplete2 = React.forwardRef((props, ref) => {
      * Filter items list by input value
      */
     const filterItems = React.useCallback((items, data) => {
-        const { query } = data;
+        const query = data.query.toLocaleLowerCase();
         return items.filter(item => item.label.toLocaleLowerCase().indexOf(query) !== -1);
     }, []);
     /**

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Список изменений
+
+Все заметные изменения пакета `@via-profit/ui-kit`. Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/), версии следуют [семантическому версионированию](https://semver.org/lang/ru/).
+
+## Не выпущено
+
+### Изменено
+
+- **Calendar**: номера недель при начале недели с понедельника считаются по ISO 8601; при другом первом дне недели первой считается неделя, содержащая 1 января.
+- **Calendar**: свойство `markToday` по умолчанию `true`, как указано в документации.
+- **Selectbox**: поле отображается и при пустом списке `items` (раньше компонент не рендерился вовсе).
+- **DatePicker**: добавлено свойство `todayButtonLabel`; `toodayButtonLabel` оставлено как устаревший псевдоним.
+
+### Исправлено
+
+- **Selectbox**: типы в опубликованном пакете ссылались на несуществующий модуль `Selectbox`.
+- **Selectbox**: `label` не был связан с кнопкой, `onFocus` не вызывался, звёздочка отображалась при `requiredAsterisk={false}`.
+- **Popper**: фактическое положение после автоматического переворота сбрасывалось к `anchorPos`; поповер, открытый сразу при монтировании, оставался невидимым; положение не пересчитывалось при прокрутке вложенных контейнеров и изменении размеров.
+- **Menu**: в режиме `multiple` нельзя было снять выбор, если элементы `value` — копии объектов из `items`; `onRequestClose` вызывался дважды.
+- **ClickOutside**: собственный `ref` дочернего элемента перезаписывался.
+- **TextField**, **TextArea**: идентификаторы генерировались случайно и не совпадали при серверном рендеринге; `TextArea` показывала звёздочку при `requiredAsterisk={false}`.
+- **Autocomplete**: `clearOnBlur` не срабатывал при уходе из поля по Tab.
+- **Calendar**: первый клик в режиме диапазона не вызывал `onChange`; кнопка «Сегодня» создавала неверный диапазон; ограничения `minDate`/`maxDate` сравнивались с точностью до миллисекунд (при `minDate={new Date()}` сегодняшний день был недоступен); список месяцев строился для текущего года вместо отображаемого.
+- **DatePicker**: поле не очищалось при `value={null}`; без значения в календаре подсвечивалась сегодняшняя дата; свойства `overrides`, `markToday` и `weekDayLabelFormat` игнорировались; шаблоны с `D` и `Y` не разбирались, двузначный год превращался в 19xx, некорректные даты (31.02) принимались.
+- **MaskedField**: курсор смещался при редактировании в середине значения, а часть введённого текста терялась; маски, заканчивающиеся литералом, никогда не считались заполненными.
+- **Swiper**: после клика без перетаскивания переставали работать автопрокрутка и `goToIndex`.
+- **Modal**: окно пропадало при повторном открытии во время анимации закрытия; использовались значения `onRequestClose` и других свойств из первого рендера; прокрутка страницы оставалась заблокированной после размонтирования открытого окна.
+- **TabManager**: порядок перехода по Tab не совпадал с браузерным, учитывались отключённые элементы, не учитывался фокус, поставленный мышью.
+- **Color**: парсер не поддерживал проценты, отрицательный оттенок и `transparent`.
+
+## 0.2.6 — 2026-09-09
+
+Основные изменения с версии 0.1.2 (подробный список не вёлся):
+
+- **Calendar**: режим выбора диапазона дат, обработка `null` в режиме диапазона.
+- **Swiper**: новый компонент, в том числе с бесконечной прокруткой.
+- **Menu**: виртуализированный список.
+- **Popper**: переработка позиционирования, исправления производительности и расчёта положения.

package/Calendar/CalendarComponent.js

@@ -135,7 +135,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     var _a;
-    const { minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
     /**
      * Validations
      */
@@ -160,12 +160,21 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
             throw new Error('The `weeks` view allowed only in range mode');
         }
     }
-    if (!inputValue && typeof onChange === 'undefined') {
+    if (typeof inputValue !== 'undefined' && typeof onChange !== 'function') {
         throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
     }
     if (inputView && inputInitialView) {
         throw new Error('You can not use view and initialView at the same time.');
     }
+    // Default limits are created once, otherwise every render gets new Date instances
+    // and invalidates all memoized values depending on them
+    const minDate = react_1.default.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = react_1.default.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const emitChange = react_1.default.useCallback((newValue) => {
+        if (typeof onChange === 'function') {
+            onChange(newValue);
+        }
+    }, [onChange]);
     /**
      * Overrides
      */
@@ -221,15 +230,26 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     const setViews = react_1.default.useCallback((variants) => setComputedViews(variants), []);
     const selectView = react_1.default.useCallback((view) => {
         var _a;
-        if (!views.includes(view)) {
-            setViews([...views, view]);
+        const nextViews = views.includes(view) ? views : [...views, view];
+        if (nextViews !== views) {
+            setViews(nextViews);
         }
         setView(view);
-        const index = views.findIndex(v => v === view);
+        const index = nextViews.findIndex(v => v === view);
         if (index > -1) {
             (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.goToIndex(index);
         }
     }, [setViews, views]);
+    /**
+     * Controlled `view` property was changed
+     */
+    const inputViewRef = react_1.default.useRef(inputView);
+    react_1.default.useEffect(() => {
+        if (inputView && inputView !== inputViewRef.current) {
+            inputViewRef.current = inputView;
+            selectView(inputView);
+        }
+    }, [inputView, selectView]);
     const resetVariablesRef = react_1.default.useRef({
         calendarDate,
         value,
@@ -292,10 +312,10 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         if (view === 'months') {
             if (type === 'prev') {
-                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
             }
             else {
-                newCalendarDate.setFullYear(newCalendarDate.getFullYear() - 1);
+                newCalendarDate.setFullYear(newCalendarDate.getFullYear() + 1);
             }
         }
         if (view === 'days' || view === 'weeks') {
@@ -316,45 +336,29 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         // Single-date mode
         if (!range) {
-            onChange(selectedDate);
+            emitChange(selectedDate);
             setValue(selectedDate);
             return;
         }
         // Range-date mode
         const [from, to] = (_a = value) !== null && _a !== void 0 ? _a : [];
-        // начало нового периода
-        if (from && to) {
-            setValue([selectedDate, null]);
-            onChange([selectedDate, null]);
-            return;
-        }
-        // если выбрана только первая дата или обе даты равны - завершение периода
-        if ((from && to === null) || (from && to && from.getTime() === to.getTime())) {
+        // выбрана только первая дата - завершение периода
+        if (from && !to) {
             /// check to swap
-            if (selectedDate.getTime() < from.getTime()) {
-                onChange([selectedDate, from]);
-                setValue([selectedDate, from]);
-            }
-            else {
-                onChange([from, selectedDate]);
-                setValue([from, selectedDate]);
-            }
-        }
-        else {
-            // обе даты выбраны или ничего не выбрано ([Date, Date] | [null, null] | null) - начало нового периода
-            if ((from && to) || (from === null && to === null) || value === null) {
-                setValue([selectedDate, null]);
-                return;
-            }
+            const newValue = selectedDate.getTime() < from.getTime() ? [selectedDate, from] : [from, selectedDate];
+            emitChange(newValue);
+            setValue(newValue);
+            return;
         }
-    }, [onChange, getNextAvailableView, range, value]);
+        // обе даты выбраны или ничего не выбрано ([Date, Date] | [null, null] | null) - начало нового периода
+        setValue([selectedDate, null]);
+        emitChange([selectedDate, null]);
+    }, [emitChange, getNextAvailableView, range, value]);
     /**
      * Handle of click on year item
      */
     const handleYearSelected = react_1.default.useCallback((selectedYear) => () => {
-        const newDate = new Date(calendarDate);
-        newDate.setFullYear(selectedYear, 0, 1);
-        newDate.setHours(0, 0, 0);
+        const newDate = new Date(selectedYear, 0, 1, 0, 0, 0, 0);
         setCalendarDate(newDate);
         const nextView = getNextAvailableView();
         if (nextView) {
@@ -362,9 +366,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         // if the next `view` does not exist
         if (!nextView && typeof onChange === 'function') {
-            const a = new Date();
-            a.setFullYear(newDate.getFullYear(), 11, 31);
-            a.setHours(23, 59, 59);
+            const a = new Date(newDate.getFullYear(), 11, 31, 23, 59, 59, 999);
             const selectedValue = range ? [newDate, a] : newDate;
             onChange(selectedValue);
             if (!inputValue) {
@@ -376,9 +378,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Handle of click on month item
      */
     const handleMonthSelected = react_1.default.useCallback((monthIndex) => () => {
-        const newDate = new Date();
-        newDate.setFullYear(calendarDate.getFullYear(), monthIndex, 1);
-        newDate.setHours(0, 0, 0);
+        const newDate = new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0);
         setCalendarDate(newDate);
         const nextView = getNextAvailableView();
         if (nextView) {
@@ -386,9 +386,8 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
         }
         // if the next `view` does not exist
         if (!nextView && typeof onChange === 'function') {
-            const a = new Date();
-            a.setFullYear(newDate.getFullYear(), newDate.getMonth() + 1, 0);
-            a.setHours(0, 0, 0);
+            // The end of the last day of the month, the same way as for the year range
+            const a = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0, 23, 59, 59, 999);
             const selectedValue = range ? [newDate, a] : newDate;
             onChange(selectedValue);
             if (!inputValue) {
@@ -411,12 +410,16 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
      * Handle click on «Today» button
      */
     const handleToday = react_1.default.useCallback(() => {
-        const today = new Date();
-        today.setHours(0, 0, 0);
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+        const newValue = (range ? [today, today] : today);
         setCalendarDate(today);
-        setValue((range ? [today, today] : today));
-        handleCellDateClick(today)();
-    }, [handleCellDateClick, range]);
+        setValue(newValue);
+        emitChange(newValue);
+        if (view !== 'days' && views.includes('days')) {
+            selectView('days');
+        }
+    }, [emitChange, range, selectView, view, views]);
     const handleClickWeek = react_1.default.useCallback((week) => () => {
         const days = week.days;
         const dates = [days[0].date, days[days.length - 1].date];
@@ -445,7 +448,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     }, [views, range, selectView, onChange]);
     const weeks = react_1.default.useMemo(() => getWeeks(calendarDate), [calendarDate, getWeeks]);
     const yearsRange = react_1.default.useMemo(() => getYearsRange(minDate, maxDate), [minDate, maxDate, getYearsRange]);
-    const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate), [minDate, maxDate, getMonthsRange]);
+    const monthsRange = react_1.default.useMemo(() => getMonthsRange(minDate, maxDate, calendarDate.getFullYear()), [minDate, maxDate, getMonthsRange, calendarDate]);
     const renderViewDays = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
         if (day.date.getMonth() === calendarDate.getMonth()) {
             const badge = badges.find(b => isSameDay(b.date, day.date));
@@ -481,7 +484,7 @@ const CalendarComponent = react_1.default.forwardRef((props, ref) => {
     ]);
     const renderViewMonths = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
         const isSelected = calendarDate.getMonth() === monthIndex;
-        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex + monthsRange[monthIndex], accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
+        return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
     }))), [accentColor, calendarDate, getMonthLabel, handleMonthSelected, monthsRange, overridesMap]);
     const renderViewYears = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.YearsSelector, { accentColor: accentColor, date: calendarDate, onChange: y => handleYearSelected(y)(), years: yearsRange, locale: locale, minDate: minDate, maxDate: maxDate })), [
         accentColor,

package/Calendar/use-calendar.d.ts

@@ -61,9 +61,10 @@ export type UseCalendarPayload = {
      */
     getYearsRange: (minDate: Date, maxDate: Date) => number[];
     /**
-     * Returns range of monthes (array of month indexes) between passed dates
+     * Returns range of monthes (array of month indexes) of the passed year (current year by default)
+     * which are intersected with the range between passed dates
      */
-    getMonthsRange: (minDate: Date, maxDate: Date) => number[];
+    getMonthsRange: (minDate: Date, maxDate: Date, year?: number) => number[];
 };
 export declare const useCalendar: (props: UseCalendarProps) => UseCalendarPayload;
 export default useCalendar;

package/Calendar/use-calendar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendar = void 0;
 const react_1 = __importDefault(require("react"));
 const WHITESPACE = '\u{0020}';
-const WEEK_IN_MS = 604800000; // 7 * 24 * 60 * 60 * 1000
+const DAY_IN_MS = 86400000; // 24 * 60 * 60 * 1000
 // Константа для маппинга дней недели
 const WEEK_DAYS_MAP = {
     sunday: 0,
@@ -19,9 +19,10 @@ const WEEK_DAYS_MAP = {
 };
 const useCalendar = (props) => {
     const { minDate, maxDate, weekStartDay, displayLeadingZero, locale } = props;
-    // Мемоизируем timestamp граничных дат для оптимизации проверок isDisabled
-    const minTime = react_1.default.useMemo(() => minDate.getTime(), [minDate]);
-    const maxTime = react_1.default.useMemo(() => maxDate.getTime(), [maxDate]);
+    // Мемоизируем timestamp граничных дат для оптимизации проверок isDisabled.
+    // Границы расширяются до целых дней, иначе при minDate={new Date()} сегодняшний день недоступен
+    const minTime = react_1.default.useMemo(() => new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime(), [minDate]);
+    const maxTime = react_1.default.useMemo(() => new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate(), 23, 59, 59, 999).getTime(), [maxDate]);
     // Мемоизируем номер дня начала недели
     const weekStartDayNumber = react_1.default.useMemo(() => WEEK_DAYS_MAP[weekStartDay], [weekStartDay]);
     // Оптимизированная функция isSameDay
@@ -39,22 +40,26 @@ const useCalendar = (props) => {
         return currentTime > maxTime || currentTime < minTime;
     }, [maxTime, minTime]);
     const calculateWeekNumber = react_1.default.useCallback((date) => {
-        // Используем UTC методы для избежания проблем с часовыми поясами
-        const year = date.getFullYear();
-        const month = date.getMonth();
-        const day = date.getDate();
-        // Создаем дату без времени
-        const d = new Date(Date.UTC(year, month, day));
-        // День недели (0-6)
-        const dayOfWeek = d.getUTCDay();
-        // Смещение от начала недели
-        const diff = (dayOfWeek - weekStartDayNumber + 7) % 7;
-        // Первый день недели
-        const weekStart = new Date(Date.UTC(year, month, day - diff));
-        // Первый день года
-        const yearStart = new Date(Date.UTC(year, 0, 1));
-        // Вычисляем номер недели
-        return Math.floor((weekStart.getTime() - yearStart.getTime()) / WEEK_IN_MS) + 1;
+        // Используем UTC методы для избежания проблем с часовыми поясами (DST)
+        const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+        // Неделя с понедельника - ISO 8601: первая неделя года содержит первый четверг
+        if (weekStartDayNumber === WEEK_DAYS_MAP.monday) {
+            const isoDay = d.getUTCDay() || 7;
+            const thursday = new Date(d.getTime() + (4 - isoDay) * DAY_IN_MS);
+            const yearStart = Date.UTC(thursday.getUTCFullYear(), 0, 1);
+            return Math.ceil(((thursday.getTime() - yearStart) / DAY_IN_MS + 1) / 7);
+        }
+        // Остальные системы: первая неделя года содержит 1 января
+        const diff = (d.getUTCDay() - weekStartDayNumber + 7) % 7;
+        const weekStart = d.getTime() - diff * DAY_IN_MS;
+        const weekEnd = new Date(weekStart + 6 * DAY_IN_MS);
+        // Неделя содержит 1 января следующего года
+        if (weekEnd.getUTCFullYear() !== new Date(weekStart).getUTCFullYear()) {
+            return 1;
+        }
+        const yearStart = new Date(Date.UTC(new Date(weekStart).getUTCFullYear(), 0, 1));
+        const firstWeekStart = yearStart.getTime() - ((yearStart.getUTCDay() - weekStartDayNumber + 7) % 7) * DAY_IN_MS;
+        return Math.round((weekStart - firstWeekStart) / (7 * DAY_IN_MS)) + 1;
     }, [weekStartDayNumber]);
     const getDayLabel = react_1.default.useCallback((day) => {
         const dateNum = day.getDate();
@@ -79,12 +84,14 @@ const useCalendar = (props) => {
         }
         return years;
     }, []);
-    const getMonthsRange = react_1.default.useCallback((minDate, maxDate) => {
+    const getMonthsRange = react_1.default.useCallback((minDate, maxDate, year) => {
         const m = [];
-        const y = new Date().getFullYear();
+        const y = typeof year === 'number' ? year : new Date().getFullYear();
         for (let index = 0; index < 12; index++) {
-            const d = new Date(y, index, 1, 0, 0, 0);
-            if (d.getTime() > minDate.getTime() && d.getTime() < maxDate.getTime()) {
+            const monthStart = new Date(y, index, 1, 0, 0, 0, 0);
+            const monthEnd = new Date(y, index + 1, 0, 23, 59, 59, 999);
+            // Месяц подходит, если хотя бы частично попадает в диапазон
+            if (monthStart.getTime() <= maxDate.getTime() && monthEnd.getTime() >= minDate.getTime()) {
                 m.push(index);
             }
         }

package/ClickOutside/index.js

@@ -37,6 +37,17 @@ const ClickOutside = props => {
             }
         };
     }, [onOutsideClick, mouseEvent]);
-    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref }));
+    // Keep the child's own ref working alongside ours
+    const childRef = children.ref;
+    const setRef = react_1.default.useCallback((el) => {
+        ref.current = el;
+        if (typeof childRef === 'function') {
+            childRef(el);
+        }
+        else if (childRef && typeof childRef === 'object') {
+            childRef.current = el;
+        }
+    }, [childRef]);
+    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref: setRef }));
 };
 exports.default = ClickOutside;

package/Color/ColorParser.d.ts

@@ -12,6 +12,15 @@ export declare class ColorParser {
      */
     static parse(value: string): ParsedColor;
     private static parseHex;
+    /**
+     * Returns function arguments: `rgb(10, 20 30 / 50%)` -> ['10', '20', '30', '50%']
+     */
+    private static getArgs;
+    private static parseNumber;
+    /**
+     * Alpha may be a number (0..1) or a percentage (0%..100%)
+     */
+    private static parseAlpha;
     private static parseRgb;
     private static parseHsl;
     private static hslToRgb;

package/Color/ColorParser.js

@@ -11,6 +11,9 @@ class ColorParser {
             throw new Error(`Invalid color value: ${value}`);
         }
         const inputColor = value.trim().toLowerCase();
+        if (inputColor === 'transparent') {
+            return { r: 0, g: 0, b: 0, a: 0 };
+        }
         // Проверка на именованный цвет
         if (this.webColors[inputColor]) {
             return this.parse(this.webColors[inputColor]);
@@ -70,27 +73,64 @@ class ColorParser {
         }
         throw new Error(`Invalid HEX color: ${hex}`);
     }
+    /**
+     * Returns function arguments: `rgb(10, 20 30 / 50%)` -> ['10', '20', '30', '50%']
+     */
+    static getArgs(value) {
+        const inner = value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
+        return inner.split(/[\s,/]+/).filter(Boolean);
+    }
+    static parseNumber(value, color) {
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            throw new Error(`Invalid color value: ${color}`);
+        }
+        return num;
+    }
+    /**
+     * Alpha may be a number (0..1) or a percentage (0%..100%)
+     */
+    static parseAlpha(value, color) {
+        if (typeof value === 'undefined') {
+            return 1;
+        }
+        const num = this.parseNumber(value, color);
+        return this.clamp(value.endsWith('%') ? num / 100 : num, 0, 1);
+    }
     static parseRgb(rgb) {
-        const matches = rgb.match(/[\d.]+/g);
-        if (!matches || matches.length < 3) {
+        const args = this.getArgs(rgb);
+        if (args.length < 3) {
             throw new Error(`Invalid RGB color: ${rgb}`);
         }
+        // Channel may be a number (0..255) or a percentage (0%..100%)
+        const channel = (value) => {
+            const num = this.parseNumber(value, rgb);
+            return this.clamp(Math.round(value.endsWith('%') ? (num * 255) / 100 : num), 0, 255);
+        };
         return {
-            r: this.clamp(parseInt(matches[0], 10), 0, 255),
-            g: this.clamp(parseInt(matches[1], 10), 0, 255),
-            b: this.clamp(parseInt(matches[2], 10), 0, 255),
-            a: matches[3] ? this.clamp(parseFloat(matches[3]), 0, 1) : 1,
+            r: channel(args[0]),
+            g: channel(args[1]),
+            b: channel(args[2]),
+            a: this.parseAlpha(args[3], rgb),
         };
     }
     static parseHsl(hsl) {
-        const matches = hsl.match(/[\d.]+/g);
-        if (!matches || matches.length < 3) {
+        const args = this.getArgs(hsl);
+        if (args.length < 3) {
             throw new Error(`Invalid HSL color: ${hsl}`);
         }
-        const h = parseFloat(matches[0]) / 360;
-        const s = parseFloat(matches[1]) / 100;
-        const l = parseFloat(matches[2]) / 100;
-        const a = matches[3] ? this.clamp(parseFloat(matches[3]), 0, 1) : 1;
+        let hue = this.parseNumber(args[0], hsl);
+        if (args[0].endsWith('turn')) {
+            hue *= 360;
+        }
+        else if (args[0].endsWith('rad')) {
+            hue = (hue * 180) / Math.PI;
+        }
+        // Negative and >360 hues are wrapped around the color wheel
+        const h = (((hue % 360) + 360) % 360) / 360;
+        const s = this.clamp(this.parseNumber(args[1], hsl), 0, 100) / 100;
+        const l = this.clamp(this.parseNumber(args[2], hsl), 0, 100) / 100;
+        const a = this.parseAlpha(args[3], hsl);
         const rgb = this.hslToRgb(h, s, l);
         return {
             r: rgb[0],

package/DatePicker/index.d.ts

@@ -63,6 +63,10 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
     /**
      * Label for the Today button. If label passed, then button will be rendered
      */
+    readonly todayButtonLabel?: string;
+    /**
+     * @deprecated Use `todayButtonLabel` instead
+     */
     readonly toodayButtonLabel?: string;
     /**
      * Heading