@transferwise/components 43.13.8 → 43.13.10

package/build/es/no-polyfill/common/focusBoundary/FocusBoundary.js

@@ -1 +1 @@
-import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{isKey,isUndefined}from"@transferwise/neptune-validation";import{useEffect,useRef,useState}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(null),d=isUndefined(document)?void 0:document,e=useState({}),f=_slicedToArray(e,2),g=f[0],h=f[1];return useEffect(function(){null!==c&&void 0!==c&&c.current&&(c.current.focus(),h(getFocusableElements(c.current)))},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:g})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};export default FocusBoundary;

package/build/es/no-polyfill/common/focusBoundary/FocusBoundary.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,screen,userEvent}from"../../test-utils";import FocusBoundary from"./FocusBoundary";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var props={onClose:jest.fn()};describe("FocusBoundary",function(){beforeEach(function(){jest.clearAllMocks()}),it("renders component",function(){var a=render(/*#__PURE__*/_jsx(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:/*#__PURE__*/_jsx("a",{href:"test",children:"Test"})}))),b=a.container;expect(b).toMatchSnapshot()}),it("focus on container by default",function(){render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"not focusable"}),/*#__PURE__*/_jsx(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:/*#__PURE__*/_jsx("a",{href:"test",children:"Test"})}))]})),expect(c()).toHaveFocus()}),it("traps the focus when user presses tab",function(){render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"not focusable"}),/*#__PURE__*/_jsxs(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"firstFocusable"}),/*#__PURE__*/_jsx("a",{href:"test",children:"lastFocusable"})]}))]})),userEvent.tab(),expect(a()).toHaveFocus(),userEvent.tab(),expect(b()).toHaveFocus(),userEvent.tab(),expect(a()).toHaveFocus(),userEvent.tab({shift:!0}),expect(b()).toHaveFocus(),userEvent.tab({shift:!0}),expect(a()).toHaveFocus()});var a=function(){return screen.getByText("firstFocusable")},b=function(){return screen.getByText("lastFocusable")},c=function(){return document.querySelector(".np-focus-boundary")}});

package/build/es/no-polyfill/common/hooks/useConditionalListener/useConditionalListener.js

@@ -1,3 +1 @@
-// @ts-expect-error remove this when `@transferwise/neptune-validation` provides types
-import{isUndefined}from"@transferwise/neptune-validation";import{useEffect}from"react";export var useConditionalListener=function(a){var b=a.attachListener,c=a.callback,d=a.eventType,e=a.parent;useEffect(function(){return b&&// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-!isUndefined(e)&&e.addEventListener(d,c,!0),function(){isUndefined(e)||e.removeEventListener(d,c,!0)}},[b,c,d,e])};
+import{isUndefined}from"@transferwise/neptune-validation";import{useEffect}from"react";export var useConditionalListener=function(a){var b=a.attachListener,c=a.callback,d=a.eventType,e=a.parent;useEffect(function(){return b&&!isUndefined(e)&&e.addEventListener(d,c,!0),function(){isUndefined(e)||e.removeEventListener(d,c,!0)}},[b,c,d,e])};

package/build/es/no-polyfill/dimmer/Dimmer.js

@@ -1,6 +1,6 @@
 import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{addNoScrollBodyClass,removeNoScrollBodyClass}from"../common";import{isIosDevice}from"../common/deviceDetection";import FocusBoundary from"../common/focusBoundary";import withNextPortal from"../withNextPortal/withNextPortal";import DimmerManager from"./dimmerManager";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var dimmerManager=new DimmerManager;export var handleTouchMove=function(a){var b=a.target.classList.contains("dimmer");// disable scroll on iOS devices for Dimmer area
 // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
 // note: scrolling still works for children(s) as expected
-isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.fadeContentOnEnter,f=void 0!==e&&e,g=a.fadeContentOnExit,h=a.open,i=void 0!==h&&h,j=a.scrollable,k=a.transparent,l=void 0!==k&&k,m=a.onClose,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useTheme(),s=r.screenMode,t=r.theme,u=useRef(null),v=function(a){a.target===u.current&&(null===m||void 0===m?void 0:m(a))},w=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&u.current&&dimmerManager.isTop(u.current)&&m(a))},[m]);return useEffect(function(){var a=u.current;return i&&(document.addEventListener("keydown",w),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",w),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[w,i]),/*#__PURE__*/_jsx(DimmerWrapper,{open:i,hasNotExited:p,children:/*#__PURE__*/_jsx(CSSTransition,{in:i,appear:!0// Wait for animation to finish before unmount.
-,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":f}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":f}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==g&&g})},unmountOnExit:!0,onEnter:function onEnter(){q(!0),u.current&&dimmerManager.add(u.current)},onExited:function onExited(){q(!1),u.current&&dimmerManager.remove(u.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:u,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||v(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
+isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.fadeContentOnEnter,f=void 0!==e&&e,g=a.fadeContentOnExit,h=a.open,i=void 0!==h&&h,j=a.scrollable,k=a.transparent,l=void 0!==k&&k,m=a.onClose,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(null),s=function(a){a.target===r.current&&(null===m||void 0===m?void 0:m(a))},t=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&r.current&&dimmerManager.isTop(r.current)&&m(a))},[m]);return useEffect(function(){var a=r.current;return i&&(document.addEventListener("keydown",t),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",t),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[t,i]),/*#__PURE__*/_jsx(DimmerWrapper,{open:i,hasNotExited:p,children:/*#__PURE__*/_jsx(CSSTransition,{in:i,appear:!0// Wait for animation to finish before unmount.
+,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":f}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":f}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==g&&g})},unmountOnExit:!0,onEnter:function onEnter(){q(!0),r.current&&dimmerManager.add(r.current)},onExited:function onExited(){q(!1),r.current&&dimmerManager.remove(r.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:r,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||s(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
 export{Dimmer};export default withNextPortal(Dimmer);

package/build/es/no-polyfill/loader/Loader.js

@@ -7,5 +7,5 @@ import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutPropert
  * @param root0.small
  * @param root0.size
  * @param root0.classNames
- */var Loader=function(a){var b=a.small,c=a.size,d=void 0===c?Size.EXTRA_LARGE:c,e=a.classNames,f=void 0===e?{}:e,g=_objectWithoutProperties(a,_excluded),h=useTheme(),i=h.isModern,j=function(a){return f[a]||a},k=void 0!==b&&b?Size.SMALL:d,l=getSupportedSize(i,k);return/*#__PURE__*/_jsx("div",{className:classnames(j("tw-loader"),j("tw-loader--".concat(l))),"data-testid":g["data-testid"],children:!i&&[,,,,,].fill(void 0).map(function(a,b){return/*#__PURE__*/ (// eslint-disable-next-line react/no-array-index-key
-_jsx("div",{className:j("tw-loader__stripe")},b))})})},getSupportedSize=function(a,b){if(a)switch(b){case Size.EXTRA_LARGE:case Size.LARGE:return Size.LARGE;case Size.MEDIUM:return Size.MEDIUM;case Size.SMALL:case Size.EXTRA_SMALL:return Size.SMALL;}return b};export default Loader;
+ */var Loader=function(a){var b=a.small,c=a.size,d=void 0===c?Size.EXTRA_LARGE:c,e=a.classNames,f=void 0===e?{}:e,g=_objectWithoutProperties(a,_excluded),h=useTheme(),i=h.isModern,j=function(a){return f[a]||a},k=void 0!==b&&b?Size.SMALL:d,l=getSupportedSize(k);return/*#__PURE__*/_jsx("div",{className:classnames(j("tw-loader"),j("tw-loader--".concat(l))),"data-testid":g["data-testid"],children:!i&&[,,,,,].fill(void 0).map(function(a,b){return/*#__PURE__*/ (// eslint-disable-next-line react/no-array-index-key
+_jsx("div",{className:j("tw-loader__stripe")},b))})})},getSupportedSize=function(a){switch(a){case Size.EXTRA_LARGE:case Size.LARGE:return Size.LARGE;case Size.SMALL:case Size.EXTRA_SMALL:return Size.SMALL;case Size.MEDIUM:default:return Size.MEDIUM;}};export default Loader;

package/build/es/no-polyfill/modal/Modal.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useTheme}from"@wise/components-theming";import classNames from"classnames";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=useTheme(),r=q.isModern,s=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},t=useLayout(),u=t.isMobile,v=s("compact"),w=s("no-divider");return u?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,className:classNames("d-flex","justify-content-center"),onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({className:classNames("tw-modal","d-flex","fade","outline-none",h,{"align-self-center":o===Position.CENTER,"tw-modal--scrollable":m===Scroll.CONTENT})},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":v,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||w}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":w}),children:f})]})})}))})})};export default Modal;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider");return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,className:classNames("d-flex","justify-content-center",{"align-items-center":o===Position.CENTER}),onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({className:classNames("tw-modal","d-flex","fade","outline-none",h,{"align-self-center":o===Position.CENTER,"tw-modal--scrollable":m===Scroll.CONTENT})},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;

package/build/es/polyfill/common/focusBoundary/FocusBoundary.js

@@ -1 +1 @@
-import{isKey,isUndefined}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useEffect,useRef}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(),d=isUndefined(document)?void 0:document,e={};return useEffect(function(){c.current.focus(),e=getFocusableElements(c.current)},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){return isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:e})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};FocusBoundary.propTypes={children:PropTypes.node};export default FocusBoundary;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{isKey,isUndefined}from"@transferwise/neptune-validation";import{useEffect,useRef,useState}from"react";import{useConditionalListener}from"../hooks";import{Key}from"../key";import{getFocusableElements,resetFocus}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";var TAB=Key.TAB,FocusBoundary=function(a){var b=a.children,c=useRef(null),d=isUndefined(document)?void 0:document,e=useState({}),f=_slicedToArray(e,2),g=f[0],h=f[1];return useEffect(function(){null!==c&&void 0!==c&&c.current&&(c.current.focus(),h(getFocusableElements(c.current)))},[]),useConditionalListener({eventType:"keydown",callback:function callback(a){isKey({keyType:TAB,event:a})&&resetFocus({event:a,focusableEls:g})},attachListener:!0,parent:d}),/*#__PURE__*/_jsx("span",{ref:c,tabIndex:-1,className:"np-focus-boundary outline-none",children:b})};export default FocusBoundary;

package/build/es/polyfill/common/focusBoundary/FocusBoundary.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,screen,userEvent}from"../../test-utils";import FocusBoundary from"./FocusBoundary";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var props={onClose:jest.fn()};describe("FocusBoundary",function(){beforeEach(function(){jest.clearAllMocks()}),it("renders component",function(){var a=render(/*#__PURE__*/_jsx(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:/*#__PURE__*/_jsx("a",{href:"test",children:"Test"})}))),b=a.container;expect(b).toMatchSnapshot()}),it("focus on container by default",function(){render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"not focusable"}),/*#__PURE__*/_jsx(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:/*#__PURE__*/_jsx("a",{href:"test",children:"Test"})}))]})),expect(c()).toHaveFocus()}),it("traps the focus when user presses tab",function(){render(/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"not focusable"}),/*#__PURE__*/_jsxs(FocusBoundary,_objectSpread(_objectSpread({},props),{},{children:[/*#__PURE__*/_jsx("a",{href:"test",children:"firstFocusable"}),/*#__PURE__*/_jsx("a",{href:"test",children:"lastFocusable"})]}))]})),userEvent.tab(),expect(a()).toHaveFocus(),userEvent.tab(),expect(b()).toHaveFocus(),userEvent.tab(),expect(a()).toHaveFocus(),userEvent.tab({shift:!0}),expect(b()).toHaveFocus(),userEvent.tab({shift:!0}),expect(a()).toHaveFocus()});var a=function(){return screen.getByText("firstFocusable")},b=function(){return screen.getByText("lastFocusable")},c=function(){return document.querySelector(".np-focus-boundary")}});

package/build/es/polyfill/common/hooks/useConditionalListener/useConditionalListener.js

@@ -1,3 +1 @@
-// @ts-expect-error remove this when `@transferwise/neptune-validation` provides types
-import{isUndefined}from"@transferwise/neptune-validation";import{useEffect}from"react";export var useConditionalListener=function(a){var b=a.attachListener,c=a.callback,d=a.eventType,e=a.parent;useEffect(function(){return b&&// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-!isUndefined(e)&&e.addEventListener(d,c,!0),function(){isUndefined(e)||e.removeEventListener(d,c,!0)}},[b,c,d,e])};
+import{isUndefined}from"@transferwise/neptune-validation";import{useEffect}from"react";export var useConditionalListener=function(a){var b=a.attachListener,c=a.callback,d=a.eventType,e=a.parent;useEffect(function(){return b&&!isUndefined(e)&&e.addEventListener(d,c,!0),function(){isUndefined(e)||e.removeEventListener(d,c,!0)}},[b,c,d,e])};

package/build/es/polyfill/dimmer/Dimmer.js

@@ -1,6 +1,6 @@
 import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{addNoScrollBodyClass,removeNoScrollBodyClass}from"../common";import{isIosDevice}from"../common/deviceDetection";import FocusBoundary from"../common/focusBoundary";import withNextPortal from"../withNextPortal/withNextPortal";import DimmerManager from"./dimmerManager";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var dimmerManager=new DimmerManager;export var handleTouchMove=function(a){var b=a.target.classList.contains("dimmer");// disable scroll on iOS devices for Dimmer area
 // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
 // note: scrolling still works for children(s) as expected
-isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.fadeContentOnEnter,f=void 0!==e&&e,g=a.fadeContentOnExit,h=a.open,i=void 0!==h&&h,j=a.scrollable,k=a.transparent,l=void 0!==k&&k,m=a.onClose,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useTheme(),s=r.screenMode,t=r.theme,u=useRef(null),v=function(a){a.target===u.current&&(null===m||void 0===m?void 0:m(a))},w=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&u.current&&dimmerManager.isTop(u.current)&&m(a))},[m]);return useEffect(function(){var a=u.current;return i&&(document.addEventListener("keydown",w),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",w),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[w,i]),/*#__PURE__*/_jsx(DimmerWrapper,{open:i,hasNotExited:p,children:/*#__PURE__*/_jsx(CSSTransition,{in:i,appear:!0// Wait for animation to finish before unmount.
-,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":f}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":f}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==g&&g})},unmountOnExit:!0,onEnter:function onEnter(){q(!0),u.current&&dimmerManager.add(u.current)},onExited:function onExited(){q(!1),u.current&&dimmerManager.remove(u.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:u,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||v(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
+isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.fadeContentOnEnter,f=void 0!==e&&e,g=a.fadeContentOnExit,h=a.open,i=void 0!==h&&h,j=a.scrollable,k=a.transparent,l=void 0!==k&&k,m=a.onClose,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useRef(null),s=function(a){a.target===r.current&&(null===m||void 0===m?void 0:m(a))},t=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&r.current&&dimmerManager.isTop(r.current)&&m(a))},[m]);return useEffect(function(){var a=r.current;return i&&(document.addEventListener("keydown",t),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",t),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[t,i]),/*#__PURE__*/_jsx(DimmerWrapper,{open:i,hasNotExited:p,children:/*#__PURE__*/_jsx(CSSTransition,{in:i,appear:!0// Wait for animation to finish before unmount.
+,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":f}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":f}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==g&&g})},unmountOnExit:!0,onEnter:function onEnter(){q(!0),r.current&&dimmerManager.add(r.current)},onExited:function onExited(){q(!1),r.current&&dimmerManager.remove(r.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:r,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||s(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
 export{Dimmer};export default withNextPortal(Dimmer);

package/build/es/polyfill/loader/Loader.js

@@ -7,5 +7,5 @@ import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutPropert
  * @param root0.small
  * @param root0.size
  * @param root0.classNames
- */var Loader=function(a){var b=a.small,c=a.size,d=void 0===c?Size.EXTRA_LARGE:c,e=a.classNames,f=void 0===e?{}:e,g=_objectWithoutProperties(a,_excluded),h=useTheme(),i=h.isModern,j=function(a){return f[a]||a},k=void 0!==b&&b?Size.SMALL:d,l=getSupportedSize(i,k);return/*#__PURE__*/_jsx("div",{className:classnames(j("tw-loader"),j("tw-loader--".concat(l))),"data-testid":g["data-testid"],children:!i&&[,,,,,].fill(void 0).map(function(a,b){return/*#__PURE__*/ (// eslint-disable-next-line react/no-array-index-key
-_jsx("div",{className:j("tw-loader__stripe")},b))})})},getSupportedSize=function(a,b){if(a)switch(b){case Size.EXTRA_LARGE:case Size.LARGE:return Size.LARGE;case Size.MEDIUM:return Size.MEDIUM;case Size.SMALL:case Size.EXTRA_SMALL:return Size.SMALL;}return b};export default Loader;
+ */var Loader=function(a){var b=a.small,c=a.size,d=void 0===c?Size.EXTRA_LARGE:c,e=a.classNames,f=void 0===e?{}:e,g=_objectWithoutProperties(a,_excluded),h=useTheme(),i=h.isModern,j=function(a){return f[a]||a},k=void 0!==b&&b?Size.SMALL:d,l=getSupportedSize(k);return/*#__PURE__*/_jsx("div",{className:classnames(j("tw-loader"),j("tw-loader--".concat(l))),"data-testid":g["data-testid"],children:!i&&[,,,,,].fill(void 0).map(function(a,b){return/*#__PURE__*/ (// eslint-disable-next-line react/no-array-index-key
+_jsx("div",{className:j("tw-loader__stripe")},b))})})},getSupportedSize=function(a){switch(a){case Size.EXTRA_LARGE:case Size.LARGE:return Size.LARGE;case Size.SMALL:case Size.EXTRA_SMALL:return Size.SMALL;case Size.MEDIUM:default:return Size.MEDIUM;}};export default Loader;

package/build/es/polyfill/modal/Modal.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.split.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=useTheme(),r=q.isModern,s=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},t=useLayout(),u=t.isMobile,v=s("compact"),w=s("no-divider");return u?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,className:classNames("d-flex","justify-content-center"),onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({className:classNames("tw-modal","d-flex","fade","outline-none",h,{"align-self-center":o===Position.CENTER,"tw-modal--scrollable":m===Scroll.CONTENT})},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":v,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||w}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":w}),children:f})]})})}))})})};export default Modal;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.includes.js";import"core-js/modules/es.string.includes.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.split.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import classNames from"classnames";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider");return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,className:classNames("d-flex","justify-content-center",{"align-items-center":o===Position.CENTER}),onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({className:classNames("tw-modal","d-flex","fade","outline-none",h,{"align-self-center":o===Position.CENTER,"tw-modal--scrollable":m===Scroll.CONTENT})},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;

package/build/types/common/focusBoundary/FocusBoundary.d.ts

@@ -1,10 +1,6 @@
+import { ReactNode } from 'react';
+type FocusBoundaryProps = {
+    children: ReactNode;
+};
+declare const FocusBoundary: ({ children }: FocusBoundaryProps) => JSX.Element;
 export default FocusBoundary;
-declare function FocusBoundary({ children }: {
-    children: any;
-}): JSX.Element;
-declare namespace FocusBoundary {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import PropTypes from "prop-types";

package/build/types/common/focusBoundary/FocusBoundary.spec.d.ts

@@ -0,0 +1 @@
+export {};