@transferwise/components 43.11.34 → 43.11.35

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

@@ -1,6 +1,6 @@
-import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef}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";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
+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=useTheme(),o=n.screenMode,p=n.theme,q=useRef(null),r=function(a){a.target===q.current&&(null===m||void 0===m?void 0:m(a))},s=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&q.current&&dimmerManager.isTop(q.current)&&m(a))},[m]);return useEffect(function(){var a=q.current;return i&&(document.addEventListener("keydown",s),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",s),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[s,i]),i?/*#__PURE__*/_jsx(ThemeProvider,{theme:p,screenMode:o,isNotRootProvider:!0,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.current&&dimmerManager.add(q.current)},onExited:function onExited(){q.current&&dimmerManager.remove(q.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:q,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||r(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})}):null};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=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
 export{Dimmer};export default withNextPortal(Dimmer);

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

@@ -1,6 +1,6 @@
-import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef}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";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
+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=useTheme(),o=n.screenMode,p=n.theme,q=useRef(null),r=function(a){a.target===q.current&&(null===m||void 0===m?void 0:m(a))},s=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),m&&q.current&&dimmerManager.isTop(q.current)&&m(a))},[m]);return useEffect(function(){var a=q.current;return i&&(document.addEventListener("keydown",s),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",s),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[s,i]),i?/*#__PURE__*/_jsx(ThemeProvider,{theme:p,screenMode:o,isNotRootProvider:!0,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.current&&dimmerManager.add(q.current)},onExited:function onExited(){q.current&&dimmerManager.remove(q.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!l,children:/*#__PURE__*/_jsx("div",{ref:q,className:classNames("dimmer",{"dimmer--scrollable":void 0!==j&&j,"dimmer--transparent":l},c),role:"presentation",onMouseDown:function handleClick(a){void 0!==d&&d||!m||r(a)},children:/*#__PURE__*/_jsx(FocusBoundary,{children:b})})})})}):null};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=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
 export{Dimmer};export default withNextPortal(Dimmer);

package/build/types/dimmer/Dimmer.d.ts

@@ -12,7 +12,7 @@ type DimmerProps = CommonProps & {
     onClose?: (event: KeyboardEvent | MouseEvent) => void;
 };
 export declare const handleTouchMove: (event: Event) => void;
-declare const Dimmer: ({ children, className, disableClickToClose, fadeContentOnEnter, fadeContentOnExit, open, scrollable, transparent, onClose, }: DimmerProps) => JSX.Element | null;
+declare const Dimmer: ({ children, className, disableClickToClose, fadeContentOnEnter, fadeContentOnExit, open, scrollable, transparent, onClose, }: DimmerProps) => JSX.Element;
 export declare const DimmerContentWrapper: ({ children, scrollBody, }: {
     children: ReactElement;
     scrollBody: boolean;