@transferwise/components 46.12.0 → 46.13.0

package/build/index.js

@@ -1901,6 +1901,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
+  const titleId = reactId.useId();
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -1908,13 +1909,16 @@ const Drawer = ({
       open: open,
       position: isMobile ? exports.Position.BOTTOM : position,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-drawer', className),
         role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames__default.default('np-drawer', className),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: classNames__default.default('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            id: titleId,
             type: exports.Typography.TITLE_BODY,
             children: headerTitle
           }), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
@@ -5956,6 +5960,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
+  const titleId = reactId.useId();
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -5983,11 +5988,12 @@ const Modal = ({
         className: classNames__default.default('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === exports.Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": titleId,
           className: classNames__default.default('tw-modal-dialog', 'd-flex', {
             [`tw-modal-${size}`]: size
           }),
-          "aria-modal": true,
-          role: "dialog",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: classNames__default.default('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between', {
               'tw-modal-compact': isCompact,
@@ -5998,6 +6004,7 @@ const Modal = ({
                 'modal--withoutborder': !title || noDivider
               }),
               children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
+                id: titleId,
                 type: exports.Typography.TITLE_BODY,
                 className: "tw-modal-title",
                 children: title
@@ -6027,7 +6034,8 @@ const Popover$1 = ({
   className,
   content,
   preferredPlacement,
-  title
+  title,
+  onClose
 }) => {
   logActionRequired({
     preferredPlacement
@@ -6037,7 +6045,10 @@ const Popover$1 = ({
   const {
     isModern
   } = componentsTheming.useTheme();
-  const onClose = () => setOpen(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: classNames__default.default('np-popover', className),
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -6057,7 +6068,7 @@ const Popover$1 = ({
       position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
       arrow: true,
       className: "np-popover__container",
-      onClose: onClose,
+      onClose: handleOnClose,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
         "aria-hidden": !open,
@@ -6090,6 +6101,7 @@ Popover$1.propTypes = {
    * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
    */
   preferredPlacement: PropTypes__default.default.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
+  onClose: PropTypes__default.default.func,
   title: PropTypes__default.default.node
 };
 const deprecatedPlacements = {