@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.1

package/Calendar/use-calendar.js

@@ -6,65 +6,78 @@ 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 WEEK_DAYS_MAP = {
+    sunday: 0,
+    monday: 1,
+    tuesday: 2,
+    wednesday: 3,
+    thursday: 4,
+    friday: 5,
+    saturday: 6,
+};
 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]);
+    // Мемоизируем номер дня начала недели
+    const weekStartDayNumber = react_1.default.useMemo(() => WEEK_DAYS_MAP[weekStartDay], [weekStartDay]);
+    // Оптимизированная функция isSameDay
     const isSameDay = react_1.default.useCallback((a, b) => a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate(), []);
-    const isToday = react_1.default.useCallback((dateValue) => isSameDay(dateValue, new Date()), [isSameDay]);
-    const isDisabled = react_1.default.useCallback((dateValue) => {
-        const min = minDate.getTime() || 0;
-        const max = maxDate.getTime() || Number.MAX_VALUE;
-        const current = dateValue.getTime();
-        return current > max || current < min;
-    }, [maxDate, minDate]);
-    const calculateWeekNumber = react_1.default.useCallback((dt) => {
-        const tdt = new Date(dt.valueOf());
-        const dayn = (dt.getDay() + 6) % 7;
-        tdt.setDate(tdt.getDate() - dayn + 3);
-        const firstThursday = tdt.valueOf();
-        tdt.setMonth(0, 1);
-        if (tdt.getDay() !== 4) {
-            tdt.setMonth(0, 1 + ((4 - tdt.getDay() + 7) % 7));
-        }
-        return 1 + Math.ceil((firstThursday - tdt.getTime()) / 604800000);
+    // Мемоизируем сегодняшнюю дату для isToday
+    const today = react_1.default.useMemo(() => {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
     }, []);
-    const weekDaysMap = react_1.default.useMemo(() => ({
-        sunday: 0,
-        monday: 1,
-        tuesday: 2,
-        wednesday: 3,
-        thursday: 4,
-        friday: 5,
-        saturday: 6,
-    }), []);
+    const isToday = react_1.default.useCallback((dateValue) => isSameDay(dateValue, today), [isSameDay, today]);
+    const isDisabled = react_1.default.useCallback((dateValue) => {
+        const currentTime = dateValue.getTime();
+        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;
+    }, [weekStartDayNumber]);
     const getDayLabel = react_1.default.useCallback((day) => {
         const dateNum = day.getDate();
-        if (!displayLeadingZero) {
-            return dateNum.toString();
-        }
-        const numStr = `0${dateNum}`;
-        return numStr.substring(numStr.length - 2);
+        return displayLeadingZero ? dateNum.toString().padStart(2, '0') : dateNum.toString();
     }, [displayLeadingZero]);
+    // Мемоизируем Intl форматеры для производительности
+    const monthFormatter = react_1.default.useMemo(() => (typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, { month: 'long' }) : null), [locale]);
+    const yearFormatter = react_1.default.useMemo(() => typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, { year: 'numeric' }) : null, [locale]);
     const getMonthLabel = react_1.default.useCallback((dateValue) => {
-        const title = typeof Intl !== 'undefined'
-            ? new Intl.DateTimeFormat(locale, {
-                month: 'long',
-            }).format(dateValue)
-            : WHITESPACE;
+        if (!monthFormatter)
+            return WHITESPACE;
+        const title = monthFormatter.format(dateValue);
         return title.charAt(0).toUpperCase() + title.slice(1);
-    }, [locale]);
-    const getYearLabel = react_1.default.useCallback((dateValue) => typeof Intl !== 'undefined'
-        ? new Intl.DateTimeFormat(locale, {
-            year: 'numeric',
-        }).format(dateValue)
-        : WHITESPACE, [locale]);
+    }, [monthFormatter]);
+    const getYearLabel = react_1.default.useCallback((dateValue) => { var _a; return (_a = yearFormatter === null || yearFormatter === void 0 ? void 0 : yearFormatter.format(dateValue)) !== null && _a !== void 0 ? _a : WHITESPACE; }, [yearFormatter]);
     const getYearsRange = react_1.default.useCallback((minDate, maxDate) => {
-        const y = [];
-        for (let year = minDate.getFullYear(); year >= minDate.getFullYear() && year <= maxDate.getFullYear(); year++) {
-            y.push(year);
+        const years = [];
+        const startYear = minDate.getFullYear();
+        const endYear = maxDate.getFullYear();
+        for (let year = startYear; year <= endYear; year++) {
+            years.push(year);
         }
-        return y;
+        return years;
     }, []);
     const getMonthsRange = react_1.default.useCallback((minDate, maxDate) => {
         const m = [];
@@ -77,122 +90,56 @@ const useCalendar = (props) => {
         }
         return m;
     }, []);
+    const weeksCache = react_1.default.useRef(new Map());
     const getWeeks = react_1.default.useCallback((needleDate) => {
-        const list = [];
-        const startOfDate = new Date(needleDate.getFullYear(), needleDate.getMonth(), 1, 0, 0, 0, 0);
-        const lastOfDate = new Date(needleDate.getFullYear(), needleDate.getMonth() + 1, 0, 0, 0, 0);
-        const startDayNum = weekDaysMap[weekStartDay];
-        const week = new Set();
-        const d = new Date(needleDate);
-        for (let dateNum = 1; dateNum < lastOfDate.getDate() + 1; dateNum++) {
-            d.setDate(dateNum);
-            // if is start of the week then set a new week
-            if (d.getDay() === startDayNum) {
-                const days = [...week].map(day => ({
-                    date: day,
-                    isToday: isToday(day),
-                    isDisabled: isDisabled(day),
-                }));
-                if (days.length) {
-                    list.push({
-                        weekNumber: calculateWeekNumber(days[0].date),
-                        days,
-                    });
-                }
-                week.clear();
-            }
-            week.add(new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0));
-            // if is last of iteration
-            if (dateNum === lastOfDate.getDate()) {
-                const days = [...week].map(day => ({
-                    date: day,
-                    isToday: isToday(day),
-                    isDisabled: isDisabled(day),
-                }));
-                if (days.length) {
-                    list.push({
-                        weekNumber: calculateWeekNumber(days[0].date),
-                        days,
-                    });
-                }
-                week.clear();
-            }
-        }
-        // Fill the prev days
-        if (list[0].days.length < 7) {
-            const fillDays = 7 - list[0].days.length;
-            const days = list[0].days;
-            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
-                const day = new Date(startOfDate.getFullYear(), startOfDate.getMonth(), -fillIndex, 0, 0, 0, 0);
-                days.unshift({
-                    date: day,
-                    isDisabled: isDisabled(day),
-                    isToday: isToday(day),
-                });
-            }
-            list[0] = {
-                days,
-                weekNumber: calculateWeekNumber(days[0].date),
-            };
+        const year = needleDate.getFullYear();
+        const month = needleDate.getMonth();
+        const cacheKey = `${year}-${month}-${weekStartDay}-${minTime}-${maxTime}`;
+        const cached = weeksCache.current.get(cacheKey);
+        if (cached) {
+            return cached;
         }
-        // fill the next days
-        if (list[list.length - 1].days.length < 7) {
-            const fillDays = 7 - list[list.length - 1].days.length;
-            const days = list[list.length - 1].days;
-            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
-                const day = new Date(lastOfDate.getFullYear(), lastOfDate.getMonth() + 1, fillIndex + 1, 0, 0, 0, 0);
-                days.push({
-                    date: day,
-                    isDisabled: isDisabled(day),
-                    isToday: isToday(day),
-                });
+        // Первый и последний день месяца
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        // Вычисляем начало календарной сетки
+        const startOffset = (firstDay.getDay() - weekStartDayNumber + 7) % 7;
+        const startDate = new Date(year, month, 1 - startOffset);
+        // Вычисляем конец календарной сетки
+        const endOffset = (weekStartDayNumber + 6 - lastDay.getDay() + 7) % 7;
+        const endDate = new Date(year, month, lastDay.getDate() + endOffset);
+        const weeks = [];
+        const currentDate = new Date(startDate);
+        // Предаллоцируем массив для дней недели
+        const weekDays = new Array(7);
+        while (currentDate <= endDate) {
+            // Заполняем дни недели
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(currentDate);
+                weekDays[i] = {
+                    date,
+                    isToday: isToday(date),
+                    isDisabled: isDisabled(date),
+                };
+                currentDate.setDate(currentDate.getDate() + 1);
             }
-            list[list.length - 1] = {
-                days,
-                weekNumber: calculateWeekNumber(days[0].date),
-            };
-        }
-        // if weeks length is 4 only
-        // then prepend week
-        if (list.length === 4) {
-            const fillDays = 7;
-            const days = [];
-            const firstWeek = list[0];
-            const firstDate = firstWeek.days[0].date;
-            for (let fillIndex = 0; fillIndex < fillDays; fillIndex++) {
-                const day = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() - fillIndex, 0, 0, 0, 0);
-                days.unshift({
-                    date: day,
-                    isDisabled: isDisabled(day),
-                    isToday: isToday(day),
-                });
-            }
-            list.unshift({
-                days,
-                weekNumber: calculateWeekNumber(days[0].date),
+            // Создаем копию массива дней для недели
+            weeks.push({
+                weekNumber: calculateWeekNumber(weekDays[0].date),
+                days: [...weekDays],
             });
         }
-        // if weeks length is 5 only
-        // then append week
-        if (list.length === 5) {
-            const lastWeek = list[list.length - 1];
-            const lastDate = lastWeek.days[lastWeek.days.length - 1].date;
-            const days = [];
-            for (let fillIndex = 0; fillIndex < 7; fillIndex++) {
-                const day = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + fillIndex + 1, 0, 0, 0, 0);
-                days.push({
-                    date: day,
-                    isDisabled: isDisabled(day),
-                    isToday: isToday(day),
-                });
+        // Сохраняем в кэш
+        weeksCache.current.set(cacheKey, weeks);
+        // Очищаем старые записи кэша (если больше 10)
+        if (weeksCache.current.size > 10) {
+            const keys = Array.from(weeksCache.current.keys());
+            for (let i = 0; i < keys.length - 10; i++) {
+                weeksCache.current.delete(keys[i]);
             }
-            list.push({
-                days,
-                weekNumber: calculateWeekNumber(days[0].date),
-            });
         }
-        return list;
-    }, [weekDaysMap, weekStartDay, isToday, isDisabled, calculateWeekNumber]);
+        return weeks;
+    }, [weekStartDay, minTime, maxTime, weekStartDayNumber, calculateWeekNumber, isToday, isDisabled]);
     return {
         isSameDay,
         isToday,

package/DatePicker/index.js

@@ -119,7 +119,7 @@ const DatePicker = props => {
             } })),
         react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown" },
             react_1.default.createElement(Popper_1.default, { isOpen: isOpen, anchorElement: textFieldRef },
-                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, prevMonthButtonTooltip: prevMonthButtonTooltip, nextMonthButtonTooltip: nextMonthButtonTooltip, changeMonthButtonTooltip: changeMonthButtonTooltip, changeYearButtonTooltip: changeYearButtonTooltip, resetButtonLabel: resetButtonLabel, toodayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, initialView: initialView, footer: footer, value: currentValue || new Date(), onChange: date => {
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, prevMonthButtonTooltip: prevMonthButtonTooltip, nextMonthButtonTooltip: nextMonthButtonTooltip, changeMonthButtonTooltip: changeMonthButtonTooltip, changeYearButtonTooltip: changeYearButtonTooltip, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, initialView: initialView, footer: footer, value: currentValue || new Date(), onChange: date => {
                         onChange(date);
                         setOpenSate(false);
                     }, overrides: {

package/Highlighted/index.d.ts

@@ -42,15 +42,15 @@ export interface HighlightedOverrides {
     /**
      * Container element
      */
-    readonly Container?: React.ForwardRefExoticComponent<HighlightedContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<HighlightedContainerProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Mark element (HTML <mark>)
      */
-    readonly Mark?: React.ForwardRefExoticComponent<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
+    readonly Mark?: React.ComponentType<HighlightedMarkProps & React.RefAttributes<HTMLElement>>;
     /**
      * Text element (HTML <span>)regex
      */
-    readonly Text?: React.ForwardRefExoticComponent<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Text?: React.ComponentType<HighlightedTextProps & React.RefAttributes<HTMLSpanElement>>;
 }
 export declare const escapeRegex: (pattern: string) => string;
 declare const _default: React.ForwardRefExoticComponent<HighlightedProps & React.RefAttributes<HTMLSpanElement>>;

package/Menu/MenuContainer.d.ts

@@ -137,11 +137,11 @@ export interface MenuOverrides {
     /**
      * Element wrapper
      */
-    readonly List?: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;
+    readonly List?: React.ComponentType<MenuListProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Popper wrapper
      */
-    readonly Popper?: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Popper?: React.ComponentType<PopperProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type MenuRef = {
     /**

package/Menu/MenuContainer.js

@@ -33,7 +33,7 @@ const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
 const onRequestCloseDefault = () => undefined;
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement, overrides, children, closeOutsideClick = true, isOpen = props.anchorPos === 'static', anchorPos = 'auto', multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, zIndex, onSelectItem, getOptionSelected, } = props;
+    const { items, value, anchorElement, overrides, children, closeOutsideClick = true, isOpen = false, anchorPos = 'bottom', multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, zIndex, onSelectItem, getOptionSelected, } = props;
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,
@@ -356,7 +356,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         }
     }, [dispatch]);
     return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: closeOutsideClick ? 'onMouseDown' : false },
-        react_1.default.createElement(overridesMap.Popper, { isOpen: Boolean(isOpen), ref: menuPopperRef, zindex: zIndex, anchorPos: anchorPos, anchorElement: anchorElement },
+        react_1.default.createElement(overridesMap.Popper, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, anchorElement: anchorElement },
             react_1.default.createElement(overridesMap.List, { isOpen: Boolean(isOpen), ref: menuListRef, onKeyDown: listKeydownEvent }, items.map((item, index) => children({
                 item,
                 index,

package/Menu/index.js

@@ -21,12 +21,7 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("./context");
 const MenuContainer_1 = __importDefault(require("./MenuContainer"));
 __exportStar(require("./MenuContainer"), exports);
-const Menu = react_1.default.forwardRef((props, ref) => {
-    if (props.anchorPos !== 'static' && typeof props.anchorElement === 'undefined') {
-        throw new Error(`[@via-profit/ui-kit] You set «anchorPos» property as «static». In this case you should use «anchorElement» property`);
-    }
-    return (react_1.default.createElement(context_1.MenuContextProvider, null,
-        react_1.default.createElement(MenuContainer_1.default, Object.assign({}, props, { ref: ref }))));
-});
+const Menu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(context_1.MenuContextProvider, null,
+    react_1.default.createElement(MenuContainer_1.default, Object.assign({}, props, { ref: ref })))));
 Menu.displayName = 'Menu';
 exports.default = Menu;

package/Modal/BaseModal/RenderModal.d.ts

@@ -5,9 +5,9 @@ import { ModalInnerContainerProps } from './ModalInnerContainer';
 interface RenderModalProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly overrides: {
-        readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
-        readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
-        readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
+        readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+        readonly Inner?: React.ComponentType<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+        readonly InnerContainer?: React.ComponentType<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
     };
 }
 declare const RenderModal: React.FC<RenderModalProps>;

package/Modal/BaseModal/index.d.ts

@@ -45,9 +45,9 @@ export interface BaseModalProps {
     readonly overrides?: BaseModalOverrides;
 }
 export interface BaseModalOverrides {
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
-    readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
-    readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Inner?: React.ComponentType<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InnerContainer?: React.ComponentType<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const BaseModal: React.FC<BaseModalProps>;
 export default BaseModal;

package/Modal/ConfirmBox/index.d.ts

@@ -37,23 +37,23 @@ export interface ConfirmBoxOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<ConfirmBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<ConfirmBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<ConfirmBoxContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<ConfirmBoxContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<ConfirmBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<ConfirmBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<ConfirmBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<ConfirmBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay element
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const ConfirmBox: React.FC<ConfirmBoxProps>;
 export default ConfirmBox;

package/Modal/Drawer/index.d.ts

@@ -43,23 +43,23 @@ export interface DrawerOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay element
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/Modal/MessageBox/index.d.ts

@@ -28,23 +28,23 @@ export interface MessageBoxOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<MessageBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<MessageBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<MessageBoxContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<MessageBoxContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<MessageBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<MessageBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<MessageBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<MessageBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay header
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const MessageBox: React.FC<MessageBoxProps>;
 export default MessageBox;