@via-profit/ui-kit 0.3.0 → 0.5.0

package/Menu/MenuContainer.js

@@ -31,6 +31,7 @@ const context_1 = __importStar(require("./context"));
 const MenuList_1 = __importDefault(require("./MenuList"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const onRequestCloseDefault = () => undefined;
 const isEqual = (a, b) => {
     if (a === b) {
@@ -46,7 +47,7 @@ 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 { 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, } = (0, useThemeProps_1.default)('Menu', 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,
@@ -56,6 +57,16 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     // 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]);
@@ -113,7 +124,8 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
         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) {
@@ -137,11 +149,13 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     }, [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);
@@ -216,6 +230,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;
         }
@@ -231,26 +251,34 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     ]);
     // Управление открытием/закрытием меню
     react_1.default.useEffect(() => {
+        var _a;
         if (isOpenRef.current === isOpen)
             return;
         isOpenRef.current = isOpen;
         if (!isOpen) {
             // 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);
         }
+        // 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(() => {
@@ -266,23 +294,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);
@@ -291,15 +361,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,
@@ -314,9 +386,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/MenuList.js

@@ -18,6 +18,7 @@ exports.MenuList = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledMenuList = styled_1.default.div `
   display: flex;
   flex-direction: column;
@@ -25,7 +26,7 @@ const StyledMenuList = styled_1.default.div `
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  box-shadow: 0 0.5em 1.5em ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
 
   ${({ $maxWidth }) => {
     if (typeof $maxWidth === 'number') {

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/index.js

@@ -12,8 +12,9 @@ const ModalInnerContainer_1 = __importDefault(require("./ModalInnerContainer"));
 const ModalWrapper_1 = __importDefault(require("./ModalWrapper"));
 const RenderModal_1 = __importDefault(require("./RenderModal"));
 const NoSSR_1 = __importDefault(require("../../NoSSR"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 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 { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = (0, useThemeProps_1.default)('Modal', props);
     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,

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,11 @@ 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 useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 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 _a = (0, useThemeProps_1.default)('ConfirmBox', props), { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = _a, otherProps = __rest(_a, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
+    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,20 @@ 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 useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 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 _a = (0, useThemeProps_1.default)('Dialog', props), { children, overrides } = _a, restProps = __rest(_a, ["children", "overrides"]);
+    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
      */

package/Modal/Drawer/DrawerHeader.js

@@ -51,11 +51,11 @@ const StyledDrawerCloseButton = (0, styled_1.default)(Button_1.default) `
   cursor: pointer;
 `;
 const DrawerHeader = (props, ref) => {
-    const { header, children, showCloseButton, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "onRequestClose"]);
+    const { header, children, showCloseButton, closeButtonLabel = 'Close', dialogID, onRequestClose } = props, nativeProps = __rest(props, ["header", "children", "showCloseButton", "closeButtonLabel", "dialogID", "onRequestClose"]);
     return (react_1.default.createElement(StyledDrawerHeader, Object.assign({}, nativeProps, { ref: ref }),
-        typeof header !== 'undefined' && react_1.default.createElement(DrawerTitle, null, header),
+        typeof header !== 'undefined' && (react_1.default.createElement(DrawerTitle, { id: dialogID ? `${dialogID}-title` : undefined }, header)),
         typeof children !== 'undefined' && react_1.default.createElement(DrawerToolbar, null, children),
-        typeof onRequestClose === 'function' && showCloseButton && (react_1.default.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": Boolean(toolbar), onClick: onRequestClose },
+        typeof onRequestClose === 'function' && showCloseButton && (react_1.default.createElement(StyledDrawerCloseButton, { type: "button", "$withToolbar": typeof children !== 'undefined' && children !== null, "aria-label": closeButtonLabel, onClick: onRequestClose },
             react_1.default.createElement(DrawerCloseIcon_1.default, null)))));
 };
 exports.default = react_1.default.forwardRef(DrawerHeader);

package/Modal/Drawer/DrawerInner.js

@@ -30,6 +30,8 @@ const StyledDrawerBottomInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -56,6 +58,8 @@ const StyledDrawerTopInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -82,6 +86,8 @@ const StyledDrawerRightInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-left-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -108,6 +114,8 @@ const StyledDrawerLeftInner = (0, styled_1.default)(ModalInner_1.default) `
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.modal};
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  /* Only the corners facing the page are rounded: the others touch the edge of the window */
+  border-radius: 0;
   border-top-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   border-bottom-right-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   transition:
@@ -137,6 +145,6 @@ const DrawerInner = (props, ref) => {
                 return StyledDrawerBottomInner;
         }
     }, [anchor]);
-    return (react_1.default.createElement(Element, Object.assign({ isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Element, Object.assign({ role: "dialog", "aria-modal": "true", isOpen: isOpen, id: `${dialogID}-description`, onRequestClose: onRequestClose }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(DrawerInner);

package/Modal/Drawer/index.d.ts

@@ -6,6 +6,7 @@ import { DrawerHeaderProps } from './DrawerHeader';
 import { DrawerContentProps } from './DrawerContent';
 import { DrawerFooterProps } from './DrawerFooter';
 import { ModalOverlayProps } from '../BaseModal/ModalOverlay';
+export type { AnchorVariant } from './DrawerInner';
 export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
     /**
      * Drawer position\
@@ -34,6 +35,12 @@ export interface DrawerProps extends Omit<BaseModalProps, 'overrides'> {
      * Display close button in the header
      */
     readonly showCloseButton?: boolean;
+    /**
+     * Accessible label of the close button (it contains only an icon)\
+     * \
+     * **Default**: `'Close'`
+     */
+    readonly closeButtonLabel?: string;
     /**
      * Overridable components map
      */

package/Modal/Drawer/index.js

@@ -45,13 +45,21 @@ const DrawerHeader_1 = __importDefault(require("./DrawerHeader"));
 const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const Drawer = props => {
-    const { children, onRequestClose, showCloseButton, header, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "anchor", "toolbar", "footer", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('Drawer', props), { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = _a, otherProps = __rest(_a, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||
         typeof showCloseButton !== 'undefined', [showCloseButton, header, toolbar]);
-    const dialogID = React.useMemo(() => `drawer-${new Date().getTime()}`, []);
+    const dialogID = (0, useDialogID_1.default)('drawer');
+    const hasTitle = typeof header !== 'undefined' && header !== null;
+    // Created once: a component created during the render is a new type on every render,
+    // so React would remount the whole drawer content (inputs lose the focus and the state)
+    const Inner = React.useMemo(() => React.forwardRef(function Inner(innerProps, ref) {
+        return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, "aria-labelledby": hasTitle ? `${dialogID}-title` : undefined, ref: ref }, innerProps)));
+    }), [anchor, dialogID, hasTitle]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || DrawerContainer_1.default,
         Header: (overrides === null || overrides === void 0 ? void 0 : overrides.Header) || DrawerHeader_1.default,
@@ -59,16 +67,11 @@ const Drawer = props => {
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || DrawerFooter_1.default,
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,
     }), [overrides]);
+    const modalOverrides = React.useMemo(() => ({ Overlay: overridesMap.Overlay, Inner }), [overridesMap.Overlay, Inner]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(BaseModal_1.default, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: {
-                Overlay: overridesMap.Overlay,
-                Inner: React.forwardRef(function Inner(props, ref) {
-                    const { children } = props;
-                    return (React.createElement(DrawerInner_1.default, Object.assign({ anchor: anchor, dialogID: dialogID, ref: ref }, props), children));
-                }),
-            } }),
+        React.createElement(BaseModal_1.default, Object.assign({ onRequestClose: onRequestClose }, otherProps, { overrides: modalOverrides }),
             React.createElement(overridesMap.Container, { anchor: anchor },
-                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, header: header, onRequestClose: onRequestClose }, toolbar)),
+                hasHeader && (React.createElement(overridesMap.Header, { showCloseButton: showCloseButton, closeButtonLabel: closeButtonLabel, dialogID: dialogID, header: header, onRequestClose: onRequestClose }, toolbar)),
                 React.createElement(overridesMap.Content, { anchor: anchor }, children),
                 hasFooter && React.createElement(overridesMap.Footer, { anchor: anchor }, footer)))));
 };

package/Modal/MessageBox/MessageBoxContainer.js

@@ -23,6 +23,6 @@ const Container = styled_1.default.div `
 `;
 const MessageBoxContainer = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(Container, Object.assign({ role: "modal-MessageBox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(Container, Object.assign({ role: "dialog", "aria-modal": "true", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(MessageBoxContainer);

package/Modal/MessageBox/index.js

@@ -44,9 +44,11 @@ const MessageBoxContent_1 = __importDefault(require("./MessageBoxContent"));
 const MessageBoxFooter_1 = __importDefault(require("./MessageBoxFooter"));
 const MessageBoxHeader_1 = __importDefault(require("./MessageBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
+const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
+const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const MessageBox = props => {
-    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
-    const dialogID = React.useMemo(() => `dialog-Message-${new Date().getTime()}`, []);
+    const _a = (0, useThemeProps_1.default)('MessageBox', props), { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = _a, otherProps = __rest(_a, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const dialogID = (0, useDialogID_1.default)('dialog-message');
     const buttonRef = React.useRef(null);
     React.useEffect(() => {
         setTimeout(() => {

package/PhoneField/CountryFlagComponent.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const Unknown_1 = __importDefault(require("./flags/Unknown"));
 const CountryFlagContainer = styled_1.default.span `
   display: flex;
   align-items: center;
@@ -39,6 +39,6 @@ const CountryFlagContainer = styled_1.default.span `
 `;
 const CountryFlagComponent = props => {
     const { flag } = props, otherProps = __rest(props, ["flag"]);
-    return (react_1.default.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? react_1.default.createElement(UnknownFlag_1.default, null) : flag));
+    return (react_1.default.createElement(CountryFlagContainer, Object.assign({}, otherProps), typeof flag === 'undefined' || flag === null ? react_1.default.createElement(Unknown_1.default, null) : flag));
 };
 exports.default = CountryFlagComponent;

package/PhoneField/UnknownFlag.d.ts

@@ -1,3 +1,6 @@
-import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;
+/// <reference types="react" />
+/**
+ * The placeholder that PhoneField shows instead of the flag when the country is not detected
+ */
+declare const UnknownFlag: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default UnknownFlag;