@transferwise/components 46.12.0 → 46.13.0

package/build/index.esm.js

@@ -1867,6 +1867,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
+  const titleId = useId();
   return /*#__PURE__*/jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -1874,13 +1875,16 @@ const Drawer = ({
       open: open,
       position: isMobile ? Position.BOTTOM : position,
       children: /*#__PURE__*/jsxs("div", {
-        className: classNames('np-drawer', className),
         role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames('np-drawer', className),
         children: [/*#__PURE__*/jsxs("div", {
           className: classNames('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsx(Title, {
+            id: titleId,
             type: Typography.TITLE_BODY,
             children: headerTitle
           }), /*#__PURE__*/jsx(CloseButton, {
@@ -5922,6 +5926,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
+  const titleId = useId();
   return !isMedium ? /*#__PURE__*/jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -5949,11 +5954,12 @@ const Modal = ({
         className: classNames('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsx("div", {
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": titleId,
           className: classNames('tw-modal-dialog', 'd-flex', {
             [`tw-modal-${size}`]: size
           }),
-          "aria-modal": true,
-          role: "dialog",
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between', {
               'tw-modal-compact': isCompact,
@@ -5964,6 +5970,7 @@ const Modal = ({
                 'modal--withoutborder': !title || noDivider
               }),
               children: [/*#__PURE__*/jsx(Title, {
+                id: titleId,
                 type: Typography.TITLE_BODY,
                 className: "tw-modal-title",
                 children: title
@@ -5993,7 +6000,8 @@ const Popover$1 = ({
   className,
   content,
   preferredPlacement,
-  title
+  title,
+  onClose
 }) => {
   logActionRequired({
     preferredPlacement
@@ -6003,7 +6011,10 @@ const Popover$1 = ({
   const {
     isModern
   } = useTheme();
-  const onClose = () => setOpen(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
   return /*#__PURE__*/jsxs("span", {
     className: classNames('np-popover', className),
     children: [/*#__PURE__*/jsx("span", {
@@ -6023,7 +6034,7 @@ const Popover$1 = ({
       position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
       arrow: true,
       className: "np-popover__container",
-      onClose: onClose,
+      onClose: handleOnClose,
       children: /*#__PURE__*/jsxs("div", {
         className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
         "aria-hidden": !open,
@@ -6056,6 +6067,7 @@ Popover$1.propTypes = {
    * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
    */
   preferredPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
+  onClose: PropTypes.func,
   title: PropTypes.node
 };
 const deprecatedPlacements = {