@transferwise/components 46.12.0 → 46.13.0

package/build/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.js"],"names":[],"mappings":";AAWA;;;;;;;;gCA0BC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.js"],"names":[],"mappings":";AAYA;;;;;;;;gCAoCC"}

package/build/types/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAG1C,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,wHAYR,UAAU,gCAiHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAG1C,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,wHAYR,UAAU,gCAmHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/popover/Popover.d.ts

@@ -11,6 +11,7 @@ export interface PopoverProps {
      * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
      */
     preferredPlacement?: PopoverPreferredPlacement;
+    onClose?: (...args: any[])=>any;
     title?: React.ReactNode;
 }
 

package/build/types/popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.js"],"names":[],"mappings":";AAUA;;;;;;gCA2CC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.js"],"names":[],"mappings":";AAUA;;;;;;;gCA8CC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.12.0",
+  "version": "46.13.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/drawer/Drawer.js

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -16,17 +17,27 @@ const Drawer = ({ children, className, footerContent, headerTitle, onClose, open
   );
 
   const { isMobile } = useLayout();
+  const titleId = useId();
 
   return (
     <Dimmer open={open} onClose={onClose}>
       <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
-        <div className={classNames('np-drawer', className)} role="dialog">
+        <div
+          role="dialog"
+          aria-modal
+          aria-labelledby={headerTitle ? titleId : undefined}
+          className={classNames('np-drawer', className)}
+        >
           <div
             className={classNames('np-drawer-header', {
               'np-drawer-header--withborder': headerTitle,
             })}
           >
-            {headerTitle && <Title type={Typography.TITLE_BODY}>{headerTitle}</Title>}
+            {headerTitle && (
+              <Title id={titleId} type={Typography.TITLE_BODY}>
+                {headerTitle}
+              </Title>
+            )}
             <CloseButton onClick={onClose} />
           </div>
           {children && <div className={classNames('np-drawer-content')}>{children}</div>}

package/src/drawer/__snapshots__/Drawer.rtl.spec.js.snap

@@ -11,6 +11,7 @@ exports[`Drawer renders content when open 1`] = `
       class="sliding-panel"
     >
       <div
+        aria-modal="true"
         class="np-drawer"
         role="dialog"
       >

package/src/modal/Modal.tsx

@@ -1,3 +1,4 @@
+import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import { ReactNode, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -59,6 +60,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
 
   const contentReference = useRef<HTMLDivElement>(null);
+  const titleId = useId();
 
   return !isMedium ? (
     <Drawer
@@ -99,11 +101,12 @@ const Modal = ({
           {...otherProps}
         >
           <div
+            role="dialog"
+            aria-modal
+            aria-labelledby={titleId}
             className={classNames('tw-modal-dialog', 'd-flex', {
               [`tw-modal-${size}`]: size,
             })}
-            aria-modal
-            role="dialog"
           >
             <div
               className={classNames(
@@ -129,7 +132,7 @@ const Modal = ({
                   },
                 )}
               >
-                <Title type={Typography.TITLE_BODY} className="tw-modal-title">
+                <Title id={titleId} type={Typography.TITLE_BODY} className="tw-modal-title">
                   {title}
                 </Title>
                 <CloseButton onClick={onClose} />

package/src/popover/Popover.js

@@ -8,13 +8,16 @@ import ResponsivePanel from '../common/responsivePanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
 
-const Popover = ({ children, className, content, preferredPlacement, title }) => {
+const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
   logActionRequired({ preferredPlacement });
   const anchorReference = useRef(null);
   const [open, setOpen] = useState(false);
   const { isModern } = useTheme();
 
-  const onClose = () => setOpen(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
 
   return (
     <span className={classnames('np-popover', className)}>
@@ -34,7 +37,7 @@ const Popover = ({ children, className, content, preferredPlacement, title }) =>
         position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
         arrow
         className="np-popover__container"
-        onClose={onClose}
+        onClose={handleOnClose}
       >
         <div
           className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
@@ -84,6 +87,7 @@ Popover.propTypes = {
     'bottom-right',
     'bottom-left',
   ]),
+  onClose: PropTypes.func,
   title: PropTypes.node,
 };
 

package/src/popover/Popover.spec.js

@@ -10,14 +10,6 @@ jest.mock('react-transition-group', () => ({
   CSSTransition: (props) => (props.in ? props.children : null),
 }));
 
-jest.mock(
-  '../dimmer',
-  () =>
-    function ({ open, children }) {
-      return open ? <div className="dimmer">{children}</div> : null;
-    },
-);
-
 describe('Popover', () => {
   const props = {
     arrow: true,
@@ -114,7 +106,23 @@ describe('Popover', () => {
     });
   });
 
+  it('onClose fires when close Popover', async () => {
+    const handleOnClose = jest.fn();
+    render(
+      <Popover {...props} onClose={handleOnClose}>
+        <button type="button">Open</button>
+      </Popover>,
+    );
+
+    expect(handleOnClose).not.toHaveBeenCalled();
+    userEvent.click(screen.getByText('Open'));
+    await waitForPanel();
+    userEvent.click(getDimmer());
+    expect(handleOnClose).toHaveBeenCalledTimes(1);
+  });
+
   const waitForPanel = async () => screen.findByText('content');
+  const getDimmer = () => document.querySelector('.dimmer');
   const getPanel = () => document.querySelector('.np-panel');
   const getBottomSheet = () => document.querySelector('.np-bottom-sheet');
   const getTitle = () => screen.queryByText('title');

package/src/popover/__snapshots__/Popover.spec.js.snap

@@ -45,62 +45,6 @@ exports[`Popover on mobile renders when is open 1`] = `
         Open
       </button>
     </span>
-    <div
-      class="dimmer"
-    >
-      <div
-        class="sliding-panel sliding-panel--open-bottom np-bottom-sheet np-popover__container"
-      >
-        <div
-          class="np-bottom-sheet--top-bar"
-        >
-          <div
-            class="np-bottom-sheet--handler"
-          />
-          <button
-            aria-label="Close"
-            class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="tw-icon tw-icon-cross "
-              data-testid="cross-icon"
-              role="presentation"
-            >
-              <svg
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                viewBox="0 0 24 24"
-                width="16"
-              >
-                <path
-                  d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <div
-          class="np-bottom-sheet--content"
-          style="max-height: calc(768px - 64px - 32px);"
-        >
-          <div
-            aria-hidden="false"
-            class="np-popover__content"
-            role="dialog"
-          >
-            <h4
-              class="np-text-title-body m-b-1"
-            >
-              title
-            </h4>
-            content
-          </div>
-        </div>
-      </div>
-    </div>
   </span>
 </div>
 `;