@via-profit/ui-kit 0.2.5 → 0.3.0

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

package/DatePicker/index.js

@@ -49,23 +49,38 @@ const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
     `}
 `;
 const DatePicker = props => {
-    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, 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', badges = [], displayLeadingZero = false, resetButtonLabel, toodayButtonLabel, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "view", "views", "footer", "overrides"]);
-    const { 
-    // Calendar overrides
-    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
-    // Textfield overrides
-    Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container, } = overrides || {};
+    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, 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', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides"]);
+    const todayButtonLabel = todayButtonLabelProp !== null && todayButtonLabelProp !== void 0 ? todayButtonLabelProp : toodayButtonLabel;
+    const calendarOverrides = react_1.default.useMemo(() => {
+        if (!overrides) {
+            return undefined;
+        }
+        const { Input: _Input, ErrorText: _ErrorText, IconWrapper: _IconWrapper, InputWrapper: _InputWrapper, Label: _Label, Asterisk: _Asterisk, Container: _Container } = overrides, rest = __rest(overrides, ["Input", "ErrorText", "IconWrapper", "InputWrapper", "Label", "Asterisk", "Container"]);
+        return rest;
+    }, [overrides]);
+    const textFieldOverrides = react_1.default.useMemo(() => {
+        if (!overrides) {
+            return undefined;
+        }
+        const { Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container } = overrides;
+        return { Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container };
+    }, [overrides]);
     const [currentValue, setCurrentValue] = react_1.default.useState(value);
     const valueRef = react_1.default.useRef(value);
     const [textFieldRef, setTextFieldRef] = react_1.default.useState(null);
     const [isOpen, setOpenSate] = react_1.default.useState(false);
     const { getMaskByTemplate, formatInputByTemplate, parseInputByTemplate } = (0, useDatePickerFormat_1.default)();
     react_1.default.useEffect(() => {
-        const a = value || new Date();
-        const b = valueRef.current || new Date();
-        if (a.getFullYear() !== b.getFullYear() ||
-            a.getMonth() !== b.getMonth() ||
-            a.getDate() !== b.getDate()) {
+        const a = value;
+        const b = valueRef.current;
+        // null <-> date transitions must be detected too
+        const isSameDay = a === b ||
+            (a !== null &&
+                b !== null &&
+                a.getFullYear() === b.getFullYear() &&
+                a.getMonth() === b.getMonth() &&
+                a.getDate() === b.getDate());
+        if (!isSameDay) {
             valueRef.current = value;
             setCurrentValue(value);
         }
@@ -118,7 +133,6 @@ const DatePicker = props => {
         parseInputByTemplate,
         template,
     ]);
-    const calendarValue = react_1.default.useMemo(() => currentValue || new Date(), [currentValue]);
     const calendarChange = react_1.default.useCallback(date => {
         if (date) {
             onChange(date);
@@ -126,9 +140,9 @@ const DatePicker = props => {
         setOpenSate(false);
     }, [onChange]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange })),
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
         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, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: calendarValue, onChange: calendarChange })))));
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
 };
 exports.default = DatePicker;

package/DatePicker/useDatePickerFormat.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerFormat = void 0;
 const react_1 = __importDefault(require("react"));
 const useDatePickerFormat = () => {
-    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm'], []);
+    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'YYYY', 'd', 'dd', 'D', 'DD', 'm', 'mm'], []);
     const isValidTemplate = react_1.default.useCallback((template) => {
         const matches = template.match(/[yYmMdD]+/g);
         if (!matches) {
@@ -48,12 +48,14 @@ const useDatePickerFormat = () => {
         template.split('').forEach((char, charIndex) => {
             switch (char) {
                 case 'y':
+                case 'Y':
                     data.years.push(input[charIndex]);
                     break;
                 case 'm':
                     data.months.push(input[charIndex]);
                     break;
                 case 'd':
+                case 'D':
                     data.days.push(input[charIndex]);
                     break;
                 default:
@@ -61,8 +63,23 @@ const useDatePickerFormat = () => {
                     break;
             }
         });
-        return new Date(parseInt(data.years.join(''), 10), parseInt(data.months.join(''), 10) - 1, // Fucking month indexes
-        parseInt(data.days.join(''), 10));
+        let year = parseInt(data.years.join(''), 10);
+        const month = parseInt(data.months.join(''), 10) - 1; // Fucking month indexes
+        const day = parseInt(data.days.join(''), 10);
+        if (isNaN(year) || isNaN(month) || isNaN(day)) {
+            return null;
+        }
+        // Two-digit year means the current century (new Date() maps 0-99 to 1900-1999)
+        if (data.years.length <= 2) {
+            year += 2000;
+        }
+        const date = new Date(year, month, day);
+        date.setFullYear(year);
+        // Reject overflowed dates like 31.02 instead of silently moving them to March
+        if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+            return null;
+        }
+        return date;
     }, [validateTemplate]);
     /**
      * Format date to string by template

package/MaskedField/useMasked.js

@@ -44,28 +44,38 @@ const useMasked = () => {
         if (parsedValue === '') {
             return data;
         }
+        const requiredCount = mask.filter(pattern => pattern instanceof RegExp).length;
+        let filledCount = 0;
         let patternIndex = 0;
         for (patternIndex = 0; patternIndex < mask.length; patternIndex++) {
-            data.isValid = false;
             if (data.charIndex >= parsedValue.length) {
                 break;
             }
             const char = parsedValue[data.charIndex];
             const pattern = mask[patternIndex];
+            // A mask literal (e.g. a shifted separator) got into a RegExp position:
+            // drop the char and try the same pattern with the next one, otherwise the rest of input is lost
+            if (pattern instanceof RegExp && !new RegExp(pattern).test(char) && mask.includes(char)) {
+                if (data.charIndex < (caret || 0)) {
+                    data.caret -= 1;
+                }
+                data.charIndex += 1;
+                patternIndex -= 1;
+                continue;
+            }
             // If char is correct (matched with Regexp pattern)
             // then accept char into text
             // and increment the charIndex and caret
             if (pattern instanceof RegExp && new RegExp(pattern).test(char)) {
                 data.text = `${data.text}${char}`;
                 data.charIndex += 1;
-                data.isValid = true;
+                filledCount += 1;
             }
             // If char is correct (equal with pattern string)
-            // then accept char into text
-            // and increment the charIndex and caret
+            // then accept char into text and increment the charIndex.
+            // The caret is not changed: this char is already counted by parseInput
             if (typeof pattern === 'string' && pattern === char) {
                 data.text = `${data.text}${char}`;
-                data.caret += 1;
                 data.charIndex += 1;
             }
             // If pattern is a string and char is not correct
@@ -81,7 +91,8 @@ const useMasked = () => {
         const result = {
             text: data.text,
             caret: data.caret,
-            isValid: data.isValid,
+            // Valid when every RegExp position of the mask is filled
+            isValid: requiredCount > 0 && filledCount === requiredCount,
         };
         return result;
     }, []);

package/Menu/MenuContainer.d.ts

@@ -97,7 +97,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * if the preferred placement doesn't fit in the viewport.
      * The component will iterate through possible placements until it finds one that fits.
      *
-     * **Default**: `true`
+     * **Default**: `false`
      * ```
      */
     readonly autoFlip?: boolean;
@@ -115,7 +115,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * - `'absolute'`: Positions relative to the nearest positioned ancestor.
      *                 When using 'absolute', make sure a parent element has `position: relative`.
      *
-     * **Default**: `'`absolute`'`
+     * **Default**: `fixed`
      * ```
      */
     readonly positionStrategy?: PositionStrategy;
@@ -124,7 +124,7 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * Used to prevent the popper from being positioned too close to the screen boundaries.
      * The popper will try to flip to another placement if it cannot maintain this margin.
      *
-     * **Default**: `8`
+     * **Default**: `30`
      * ```
      */
     readonly viewportMargin?: number;

package/Menu/MenuContainer.js

@@ -47,27 +47,24 @@ const isEqual = (a, b) => {
 };
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
     const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
-    // const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
-    const [currentAnchorElement, setAnchorElement] = react_1.default.useState(anchorElement);
     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,
     }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper]);
     const menuListRef = react_1.default.useRef(null);
     const menuPopperRef = react_1.default.useRef(null);
-    const isOpenRef = react_1.default.useRef(isOpen);
+    // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
+    const isOpenRef = react_1.default.useRef(false);
     const focusTimeoutRef = react_1.default.useRef();
     const { dispatch, state: { selectedIndexes, markedIndex, hoveredIndex }, } = (0, context_1.default)();
     const selectedIndexesRef = react_1.default.useRef(selectedIndexes);
+    const compareFunc = react_1.default.useCallback((item, val) => getOptionSelected ? getOptionSelected({ item, value: val }) : isEqual(item, val), [getOptionSelected]);
     // Оптимизированная функция получения выбранных индексов
     const getSelectedIndexes = react_1.default.useCallback(() => {
         if (value === null || (multiple && value.length === 0)) {
             return [];
         }
         const indexes = [];
-        const compareFunc = getOptionSelected
-            ? (item, val) => getOptionSelected({ item, value: val })
-            : (item, val) => isEqual(item, val);
         if (multiple) {
             const valueArray = value;
             items.forEach((item, index) => {
@@ -84,7 +81,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             }
         }
         return indexes;
-    }, [items, value, multiple, getOptionSelected]);
+    }, [items, value, multiple, compareFunc]);
     const scrollToIndex = react_1.default.useCallback((index) => {
         if (index === -1) {
             return;
@@ -94,20 +91,24 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         if (container && option) {
             const containerRect = container.getBoundingClientRect();
             const optionRect = option.getBoundingClientRect();
-            const scrollOffset = optionRect.top - containerRect.top + container.scrollTop;
-            container.scrollTo({
-                top: scrollOffset,
-                behavior: 'instant'
-            });
+            // Scroll only when the option is out of the visible area
+            if (optionRect.top < containerRect.top) {
+                container.scrollTop -= containerRect.top - optionRect.top;
+            }
+            else if (optionRect.bottom > containerRect.bottom) {
+                container.scrollTop += optionRect.bottom - containerRect.bottom;
+            }
         }
     }, []);
     const scrollToFirstSelected = react_1.default.useCallback(() => {
-        if (selectedIndexes.length === 0)
+        // Computed from the props, the context state may not be updated yet
+        const indexes = getSelectedIndexes();
+        if (indexes.length === 0)
             return;
-        const firstSelectedIndex = Math.min(...selectedIndexes);
+        const firstSelectedIndex = Math.min(...indexes);
         dispatch((0, context_1.actionSetmenuState)({ markedIndex: firstSelectedIndex }));
         scrollToIndex(firstSelectedIndex);
-    }, [dispatch, selectedIndexes, scrollToIndex]);
+    }, [dispatch, getSelectedIndexes, scrollToIndex]);
     const selectItem = react_1.default.useCallback((index) => {
         if (index < 0 || index >= items.length)
             return;
@@ -117,17 +118,13 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         if (typeof onSelectItem === 'function') {
             if (multiple) {
                 // Для multiple режима
-                const selectedSet = new Set();
-                if (value !== null) {
-                    value.forEach(v => selectedSet.add(v));
-                }
-                if (selectedIndexes.includes(index)) {
-                    selectedSet.delete(item);
-                }
-                else {
-                    selectedSet.add(item);
-                }
-                onSelectItem(Array.from(selectedSet));
+                // Value entries may be other instances than items, so compare them by compareFunc
+                const currentValue = value || [];
+                const isSelected = currentValue.some(v => compareFunc(item, v));
+                const newValue = isSelected
+                    ? currentValue.filter(v => !compareFunc(item, v))
+                    : [...currentValue, item];
+                onSelectItem(newValue);
             }
             else {
                 // Для single режима
@@ -137,7 +134,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
                 onRequestClose();
             }
         }
-    }, [onSelectItem, onRequestClose, selectedIndexes, closeOnSelect, items, value, multiple]);
+    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple]);
     const highlightIndex = react_1.default.useCallback((index) => {
         const validIndex = Math.max(-1, Math.min(index, items.length - 1));
         if (validIndex !== markedIndex) {
@@ -189,12 +186,6 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         scrollToFirstSelected,
         selectItem,
     ]);
-    // Обновление anchor элемента
-    react_1.default.useEffect(() => {
-        if (anchorElement !== currentAnchorElement) {
-            setAnchorElement(anchorElement);
-        }
-    }, [anchorElement, currentAnchorElement]);
     // Обработчик клавиатуры
     const listKeydownEvent = react_1.default.useCallback((event) => {
         switch (event.code) {
@@ -244,7 +235,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             return;
         isOpenRef.current = isOpen;
         if (!isOpen) {
-            onRequestClose();
+            // The menu is already closed by the parent, so onRequestClose must not be called again
             dispatch((0, context_1.actionSetmenuState)({ markedIndex: -1, hoveredIndex: -1 }));
             return;
         }
@@ -260,7 +251,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
                 (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 15);
         }
-    }, [isOpen, autofocus, dispatch, onRequestClose, scrollToFirstSelected]);
+    }, [isOpen, autofocus, dispatch, scrollToFirstSelected]);
     // Обновление выбранных индексов
     react_1.default.useEffect(() => {
         const indexes = getSelectedIndexes();

package/Menu/VirtualizedList.js

@@ -21,8 +21,6 @@ const react_1 = __importDefault(require("react"));
 const AutoHeightWrapper_1 = __importDefault(require("./AutoHeightWrapper"));
 const VirtualizedListComponent_1 = __importDefault(require("./VirtualizedListComponent"));
 __exportStar(require("./VirtualizedListComponent"), exports);
-const VirtualizedList = react_1.default.forwardRef((props, ref) => {
-    return (react_1.default.createElement(AutoHeightWrapper_1.default, null, height => height > 0 && react_1.default.createElement(VirtualizedListComponent_1.default, Object.assign({}, props, { height: height, ref: ref }))));
-});
+const VirtualizedList = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AutoHeightWrapper_1.default, null, height => height > 0 && react_1.default.createElement(VirtualizedListComponent_1.default, Object.assign({}, props, { height: height, ref: ref })))));
 VirtualizedList.displayName = 'VirtualizedList';
 exports.default = VirtualizedList;

package/Modal/BaseModal/ModalWrapper.js

@@ -7,12 +7,17 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@emotion/react");
 const context_1 = require("./context");
 const TabManager_1 = __importDefault(require("../../utils/TabManager"));
+/**
+ * Count of the modals which lock the body scroll
+ */
+let bodyLocksCount = 0;
 const ModalWrapper = props => {
     const { children, isOpen: isOpenProp, autofocus = true } = props;
     const { state, dispatch } = (0, context_1.useContext)();
-    const initialOpenStateRef = react_1.default.useRef(isOpenProp);
-    const [alreadyMounted, setMountState] = react_1.default.useState(true);
     const { closeOnEscape, isMounted, isOpen, destroyTimeout, onRequestClose } = state;
+    const timerRef = react_1.default.useRef(null);
+    const bodyLockedRef = react_1.default.useRef(false);
+    const isFirstRunRef = react_1.default.useRef(true);
     const containerRef = react_1.default.useRef(null);
     const id = context_1.PORTAL_ID + react_1.default.useId();
     react_1.default.useEffect(() => {
@@ -53,13 +58,34 @@ const ModalWrapper = props => {
         (_a = outer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(outer);
         return widthNoScroll - widthWithScroll;
     }, []);
+    const lockBody = react_1.default.useCallback(() => {
+        var _a;
+        if (!bodyLockedRef.current) {
+            bodyLockedRef.current = true;
+            bodyLocksCount += 1;
+            (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+        }
+    }, []);
+    const unlockBody = react_1.default.useCallback(() => {
+        var _a;
+        if (bodyLockedRef.current) {
+            bodyLockedRef.current = false;
+            bodyLocksCount = Math.max(0, bodyLocksCount - 1);
+            if (bodyLocksCount === 0) {
+                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
+            }
+        }
+    }, []);
     /**
      * Component will unmount
-     * Mark component as unmounted
+     * Clear pending timers and unlock the body scroll even if the modal is still open
      */
     react_1.default.useEffect(() => () => {
-        setMountState(false);
-    }, []);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        unlockBody();
+    }, [unlockBody]);
     react_1.default.useEffect(() => {
         /**
          * The last dialog will be found and closed
@@ -101,40 +127,41 @@ const ModalWrapper = props => {
      * and sets visibility property to false otherwise
      */
     react_1.default.useEffect(() => {
-        var _a;
-        if (isOpen !== isOpenProp || initialOpenStateRef.current) {
-            /**
-             * Mark as mounted and wait minimum loop of event (15ms) then mark as open
-             */
-            if (isOpenProp) {
-                dispatch((0, context_1.actionSetState)({ isMounted: true }));
-                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
-                setTimeout(() => {
-                    if (alreadyMounted) {
-                        dispatch((0, context_1.actionSetState)({ isOpen: true }));
-                    }
-                }, 120);
-                return;
-            }
-            /**
-             * Mark as closed and wait destroyTimeout then mark as unmounted
-             */
-            if (!isOpenProp) {
-                dispatch((0, context_1.actionSetState)({ isOpen: false }));
-                setTimeout(() => {
-                    var _a, _b;
-                    if (alreadyMounted) {
-                        const portal = window.document.querySelector(`#${context_1.PORTAL_ID}`);
-                        if (((_a = portal === null || portal === void 0 ? void 0 : portal.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-                            (_b = window.document.body) === null || _b === void 0 ? void 0 : _b.classList.remove('-modal-over');
-                        }
-                        dispatch((0, context_1.actionSetState)({ isMounted: false }));
-                    }
-                }, destroyTimeout);
-                return;
-            }
+        const isFirstRun = isFirstRunRef.current;
+        isFirstRunRef.current = false;
+        // Nothing to close on mount
+        if (isFirstRun && !isOpenProp) {
+            return;
         }
-    }, [isOpenProp, isOpen, alreadyMounted, destroyTimeout, dispatch, getScrollWidth]);
+        // Previous transition (open or close) must not finish after the new one started
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        /**
+         * Mark as mounted and wait minimum loop of event then mark as open
+         */
+        if (isOpenProp) {
+            dispatch((0, context_1.actionSetState)({ isMounted: true }));
+            lockBody();
+            timerRef.current = setTimeout(() => {
+                timerRef.current = null;
+                dispatch((0, context_1.actionSetState)({ isOpen: true }));
+            }, 120);
+            return;
+        }
+        /**
+         * Mark as closed and wait destroyTimeout then mark as unmounted
+         */
+        dispatch((0, context_1.actionSetState)({ isOpen: false }));
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            unlockBody();
+            dispatch((0, context_1.actionSetState)({ isMounted: false }));
+        }, destroyTimeout);
+        // destroyTimeout is read at the moment of closing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpenProp, dispatch, lockBody, unlockBody]);
     return react_1.default.useMemo(() => isMounted ? (react_1.default.createElement("div", { ref: containerRef, tabIndex: -1, id: id },
         children,
         react_1.default.createElement(react_2.Global, { styles: (0, react_2.css) `

package/Modal/BaseModal/context.js

@@ -31,6 +31,12 @@ const context = react_1.default.createContext({ state: exports.defaultState, dis
 const ContextProvider = props => {
     const { children, initialState } = props;
     const [state, dispatch] = react_1.default.useReducer(reducer, Object.assign(Object.assign({}, exports.defaultState), initialState));
+    // Keep the props up to date (isOpen is managed by ModalWrapper itself),
+    // otherwise a stale onRequestClose callback would be called
+    const { onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout } = initialState;
+    react_1.default.useEffect(() => {
+        dispatch((0, exports.actionSetState)({ onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout }));
+    }, [onRequestClose, closeOnEscape, closeOnOverlayClick, destroyTimeout]);
     return react_1.default.createElement(context.Provider, { value: { state, dispatch } }, children);
 };
 exports.ContextProvider = ContextProvider;

package/Modal/BaseModal/index.js

@@ -14,7 +14,6 @@ const RenderModal_1 = __importDefault(require("./RenderModal"));
 const NoSSR_1 = __importDefault(require("../../NoSSR"));
 const BaseModal = props => {
     const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = props;
-    const destroyTimeoutRef = react_1.default.useRef(null);
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
     const overridesMap = react_1.default.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,
@@ -26,13 +25,6 @@ const BaseModal = props => {
          * Client render detection
          */
         setDomLoaded(true);
-        const timeout = destroyTimeoutRef.current;
-        // unload destroy timeout
-        return () => {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-        };
     }, []);
     const portalEl = react_1.default.useMemo(() => {
         if (typeof window === 'undefined') {

package/Popper/Popper.d.ts

@@ -56,7 +56,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * if the preferred placement doesn't fit in the viewport.
      * The component will iterate through possible placements until it finds one that fits.
      *
-     * @default true
+     * @default false
      * @example
      * ```tsx
      * <Popper autoFlip={true}>...</Popper> // Will flip if needed
@@ -95,7 +95,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * Used to prevent the popper from being positioned too close to the screen boundaries.
      * The popper will try to flip to another placement if it cannot maintain this margin.
      *
-     * @default 8
+     * @default 30
      * @example
      * ```tsx
      * // Larger margin for better visibility