@via-profit/ui-kit 0.2.6 → 0.4.0

package/Menu/MenuContainer.js

@@ -46,28 +46,35 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 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 { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, 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 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();
+    // Whether the focus is inside the list: then it is returned to the anchor on close
+    const hasFocusRef = react_1.default.useRef(false);
+    // The parent often resets the anchor together with isOpen, so the last one is kept
+    const lastAnchorRef = react_1.default.useRef(anchorElement);
+    if (anchorElement) {
+        lastAnchorRef.current = anchorElement;
+    }
+    // Keyboard navigation scrolls the list under a still pointer, and the browser fires
+    // mouseenter on the item that appears under it. Such events must not move the highlight
+    const isKeyboardNavigationRef = react_1.default.useRef(false);
     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 +91,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,40 +101,41 @@ 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;
         const item = items[index];
-        if (!item)
+        // Falsy items such as 0 or an empty string are valid options
+        if (item === undefined)
             return;
         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,14 +145,16 @@ 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) {
-            dispatch((0, context_1.actionSetmenuState)({ markedIndex: validIndex }));
-            scrollToIndex(validIndex);
-        }
-    }, [dispatch, items.length, markedIndex, scrollToIndex]);
+        isKeyboardNavigationRef.current = true;
+        // Always dispatched: markedIndex of this closure can be outdated (e.g. the items effect
+        // has just reset it), the reducer skips the update when nothing changes.
+        // The mouse and the keyboard share one highlight
+        dispatch((0, context_1.actionSetmenuState)({ markedIndex: validIndex, hoveredIndex: -1 }));
+        scrollToIndex(validIndex);
+    }, [dispatch, items.length, scrollToIndex]);
     const highlightPrevItem = react_1.default.useCallback(() => {
         const newIndex = markedIndex - 1;
         highlightIndex(newIndex >= 0 ? newIndex : 0);
@@ -189,12 +199,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) {
@@ -225,6 +229,12 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
                 event.preventDefault();
                 onRequestClose(event);
                 break;
+            case 'Tab':
+                // The list is rendered in a portal at the end of the page, so the next Tab stop
+                // would be lost: close the menu instead, the focus returns to the anchor
+                event.preventDefault();
+                onRequestClose(event);
+                break;
             default:
                 break;
         }
@@ -240,27 +250,35 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     ]);
     // Управление открытием/закрытием меню
     react_1.default.useEffect(() => {
+        var _a;
         if (isOpenRef.current === isOpen)
             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 }));
+            // Otherwise the focus is lost together with the unmounted list
+            if (hasFocusRef.current) {
+                hasFocusRef.current = false;
+                (_a = lastAnchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
             return;
         }
         // При открытии
         scrollToFirstSelected();
-        if (autofocus) {
-            // Очищаем предыдущий таймаут
-            if (focusTimeoutRef.current) {
-                clearTimeout(focusTimeoutRef.current);
-            }
-            focusTimeoutRef.current = setTimeout(() => {
-                var _a;
-                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 15);
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
         }
-    }, [isOpen, autofocus, dispatch, onRequestClose, scrollToFirstSelected]);
+        // A menu mounted in the open state gets its list only after the portal is mounted,
+        // so the scroll is repeated when the list surely exists
+        focusTimeoutRef.current = setTimeout(() => {
+            var _a;
+            scrollToFirstSelected();
+            if (autofocus) {
+                (_a = menuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }, 15);
+    }, [isOpen, autofocus, dispatch, scrollToFirstSelected]);
     // Обновление выбранных индексов
     react_1.default.useEffect(() => {
         const indexes = getSelectedIndexes();
@@ -275,23 +293,65 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
             });
         }
     }, [getSelectedIndexes, dispatch]);
+    // The highlight is an index, so when the items change it follows the same item
+    // or is removed. Otherwise a filtered list highlights a random item at the old index
+    const prevItemsRef = react_1.default.useRef(items);
+    const markedIndexRef = react_1.default.useRef(markedIndex);
+    markedIndexRef.current = markedIndex;
+    react_1.default.useEffect(() => {
+        const prevItems = prevItemsRef.current;
+        prevItemsRef.current = items;
+        // A new array with the same items (e.g. `items={list.filter(...)}`) is not a change
+        const isSameList = prevItems.length === items.length && prevItems.every((item, i) => item === items[i]);
+        if (isSameList) {
+            return;
+        }
+        const prevIndex = markedIndexRef.current;
+        const markedItem = prevIndex === -1 ? undefined : prevItems[prevIndex];
+        const newIndex = markedItem === undefined
+            ? -1
+            : items.findIndex(item => item === markedItem || compareFunc(item, markedItem));
+        if (newIndex !== prevIndex) {
+            dispatch((0, context_1.actionSetmenuState)({ markedIndex: newIndex, hoveredIndex: -1 }));
+        }
+        // The old scroll position means nothing for the new list
+        if (newIndex === -1) {
+            if (menuListRef.current) {
+                menuListRef.current.scrollTop = 0;
+            }
+        }
+        else {
+            scrollToIndex(newIndex);
+        }
+    }, [items, compareFunc, dispatch, scrollToIndex]);
     const itemClickHandler = react_1.default.useCallback((index) => () => selectItem(index), [selectItem]);
+    // The hovered item becomes the highlighted one, so the keyboard continues from it
+    // and Enter selects it
     const itemMouseEnterHandler = react_1.default.useCallback((index) => () => {
-        if (index !== hoveredIndex) {
-            dispatch((0, context_1.actionSetmenuState)({
-                hoveredIndex: index,
-                markedIndex: -1,
-            }));
+        if (isKeyboardNavigationRef.current) {
+            return;
         }
-    }, [dispatch, hoveredIndex]);
+        if (index !== markedIndex || index !== hoveredIndex) {
+            dispatch((0, context_1.actionSetmenuState)({ hoveredIndex: index, markedIndex: index }));
+        }
+    }, [dispatch, hoveredIndex, markedIndex]);
     const itemMouseLeaveHandler = react_1.default.useCallback((index) => () => {
         if (index === hoveredIndex) {
-            dispatch((0, context_1.actionSetmenuState)({
-                hoveredIndex: -1,
-                markedIndex: -1,
-            }));
+            dispatch((0, context_1.actionSetmenuState)({ hoveredIndex: -1 }));
         }
     }, [dispatch, hoveredIndex]);
+    // A real pointer movement ends the keyboard navigation
+    const listMouseMoveHandler = react_1.default.useCallback(() => {
+        isKeyboardNavigationRef.current = false;
+    }, []);
+    const listFocusHandler = react_1.default.useCallback(() => {
+        hasFocusRef.current = true;
+    }, []);
+    const listBlurHandler = react_1.default.useCallback((event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            hasFocusRef.current = false;
+        }
+    }, []);
     const onAnchorPosChangedMemo = react_1.default.useCallback((newPlacement) => {
         if (typeof onAnchorPosChanged === 'function') {
             onAnchorPosChanged(newPlacement);
@@ -300,15 +360,17 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     const renderedChildren = react_1.default.useMemo(() => items.map((item, index) => children({ item, index }, {
         key: index,
         onMouseEnter: itemMouseEnterHandler(index),
+        // mouseenter is skipped during the keyboard navigation, so the item under a moving
+        // pointer is highlighted by mousemove
+        onMouseMove: itemMouseEnterHandler(index),
         onMouseLeave: itemMouseLeaveHandler(index),
         onClick: itemClickHandler(index),
         selected: selectedIndexes.includes(index),
-        hovered: hoveredIndex === index || markedIndex === index,
+        hovered: markedIndex === index,
     })), [
         items,
         children,
         selectedIndexes,
-        hoveredIndex,
         markedIndex,
         itemMouseEnterHandler,
         itemMouseLeaveHandler,
@@ -323,9 +385,9 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     // Мемоизация компонентов
     const PopperComponent = overridesMap.Popper;
     const ListComponent = overridesMap.List;
-    return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false },
+    return (react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false, ignoreElements: closeOnAnchorClick ? undefined : [anchorElement] },
         react_1.default.createElement(PopperComponent, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, alternativePlacements: alternativePlacements, anchorElement: anchorElement, onAnchorPosChanged: onAnchorPosChangedMemo, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
-            react_1.default.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent }, renderedChildren))));
+            react_1.default.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
 });
 MenuContainer.displayName = 'MenuContainer';
 exports.default = MenuContainer;

package/Menu/MenuItem.js

@@ -62,7 +62,7 @@ exports.MenuItem = react_1.default.forwardRef((props, ref) => {
         }
         return react_1.default.createElement(ItemIconWrapper, null, startIcon);
     }, [startIcon]);
-    return (react_1.default.createElement(StyledMenuItem, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, selected: selected, hovered: hovered }),
+    return (react_1.default.createElement(StyledMenuItem, Object.assign({}, nativeProps, { ref: ref, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, onClick: onClick, role: "option", "aria-selected": selected, selected: selected, hovered: hovered }),
         renderStartIcon(),
         children));
 });

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/Menu/context.js

@@ -18,6 +18,11 @@ exports.defaultState = {
 const reducer = (state, action) => {
     switch (action.type) {
         case 'setMenuState': {
+            const keys = Object.keys(action.payload);
+            // Keep the state object when nothing changes, so the menu is not re-rendered
+            if (keys.every(key => state[key] === action.payload[key])) {
+                return state;
+            }
             return Object.assign(Object.assign({}, state), action.payload);
         }
         default:

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/Modal/BaseModal/useDialogID.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Unique and SSR-stable id of a modal, used to link its title and content by aria attributes.
+ * The colons of React.useId are removed, so the id can be used in CSS selectors too
+ */
+declare const useDialogID: (prefix: string) => string;
+export default useDialogID;

package/Modal/BaseModal/useDialogID.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Unique and SSR-stable id of a modal, used to link its title and content by aria attributes.
+ * The colons of React.useId are removed, so the id can be used in CSS selectors too
+ */
+const useDialogID = (prefix) => `${prefix}-${react_1.default.useId().replace(/:/g, '')}`;
+exports.default = useDialogID;

package/Modal/ConfirmBox/ConfirmBoxContainer.js

@@ -23,6 +23,10 @@ const StyledConfirmBoxContainer = styled_1.default.div `
 `;
 const ConfirmBoxContainer = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(StyledConfirmBoxContainer, Object.assign({ role: "modal-confirmbox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledConfirmBoxContainer
+    // A confirmation requires the user's response
+    , Object.assign({ 
+        // A confirmation requires the user's response
+        role: "alertdialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ConfirmBoxContainer);

package/Modal/ConfirmBox/index.js

@@ -21,9 +21,10 @@ const ConfirmBoxContent_1 = __importDefault(require("./ConfirmBoxContent"));
 const ConfirmBoxFooter_1 = __importDefault(require("./ConfirmBoxFooter"));
 const ConfirmBoxHeader_1 = __importDefault(require("./ConfirmBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const ConfirmBox = props => {
     const { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = props, otherProps = __rest(props, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
-    const dialogID = react_1.default.useMemo(() => `dialog-confirm-${new Date().getTime()}`, []);
+    const dialogID = (0, useDialogID_1.default)('dialog-confirm');
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || ConfirmBoxContainer_1.default,
         Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || ConfirmBoxContent_1.default,

package/Modal/Dialog/DialogInner.js

@@ -22,6 +22,6 @@ const StyledDialogInner = (0, styled_1.default)(ModalInner_1.default) `
 `;
 const DialogInner = (props, ref) => {
     const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(StyledDialogInner, Object.assign({ id: `${dialogID}-description` }, restProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledDialogInner, Object.assign({ role: "dialog", "aria-modal": "true", id: `${dialogID}-description` }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(DialogInner);

package/Modal/Dialog/index.js

@@ -40,14 +40,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const BaseModal_1 = __importDefault(require("../BaseModal"));
 const DialogInner_1 = __importDefault(require("./DialogInner"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
 const Dialog = props => {
-    var _a;
     const { children, overrides } = props, restProps = __rest(props, ["children", "overrides"]);
-    const dialogID = React.useMemo(() => `dialog-${new Date().getTime()}`, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(BaseModal_1.default, Object.assign({}, restProps, { overrides: Object.assign(Object.assign({}, overrides), { Inner: (_a = overrides === null || overrides === void 0 ? void 0 : overrides.Inner) !== null && _a !== void 0 ? _a : React.forwardRef(function Inner(props, ref) {
-                    const { children } = props;
-                    return (React.createElement(DialogInner_1.default, Object.assign({ dialogID: dialogID, ref: ref }, props), children));
-                }) }) }), children)));
+    const dialogID = (0, useDialogID_1.default)('dialog');
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole dialog content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => {
+        var _a;
+        return (_a = overrides === null || overrides === void 0 ? void 0 : overrides.Inner) !== null && _a !== void 0 ? _a : React.forwardRef(function Inner(innerProps, ref) {
+            return React.createElement(DialogInner_1.default, Object.assign({ dialogID: dialogID, ref: ref }, innerProps));
+        });
+    }, [overrides === null || overrides === void 0 ? void 0 : overrides.Inner, dialogID]);
+    const modalOverrides = React.useMemo(() => (Object.assign(Object.assign({}, overrides), { Inner })), [overrides, Inner]);
+    return (React.createElement(BaseModal_1.default, Object.assign({}, restProps, { overrides: modalOverrides }), children));
 };
 exports.default = Dialog;

package/Modal/Drawer/DrawerHeader.d.ts

@@ -8,6 +8,16 @@ export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'titl
      * Display close button in the header
      */
     readonly showCloseButton?: boolean;
+    /**
+     * Accessible label of the close button\
+     * \
+     * **Default**: `'Close'`
+     */
+    readonly closeButtonLabel?: string;
+    /**
+     * Drawer unique ID, the title gets the `${dialogID}-title` id for `aria-labelledby`
+     */
+    readonly dialogID?: string;
     /**
      * On close request
      */
@@ -22,6 +32,16 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
      * Display close button in the header
      */
     readonly showCloseButton?: boolean | undefined;
+    /**
+     * Accessible label of the close button\
+     * \
+     * **Default**: `'Close'`
+     */
+    readonly closeButtonLabel?: string | undefined;
+    /**
+     * Drawer unique ID, the title gets the `${dialogID}-title` id for `aria-labelledby`
+     */
+    readonly dialogID?: string | undefined;
     /**
      * On close request
      */