@transferwise/components 45.5.0 → 45.5.1

package/build/es/no-polyfill/common/DOMOperations/DOMOperations.js

@@ -1,9 +1,9 @@
 /**
  * Defined in `Dimmer.less`
- */var NO_SCROLL_BODY_CLASS="no-scroll";/**
- * Apply {@link NO_SCROLL_BODY_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
+ */var NO_SCROLL_CLASS="no-scroll";/**
+ * Apply {@link NO_SCROLL_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
  *
- * For a proper disabling, the CSS class needs to be applied for `html` and `body` elements.
- */export var addNoScrollBodyClass=function(){document.documentElement.classList.add(NO_SCROLL_BODY_CLASS),document.body.classList.add(NO_SCROLL_BODY_CLASS)};/**
- * Clean up after {@link addNoScrollBodyClass} function
- */export var removeNoScrollBodyClass=function(){document.documentElement.classList.remove(NO_SCROLL_BODY_CLASS),document.body.classList.remove(NO_SCROLL_BODY_CLASS)};
+ * CSS class needs to be applied for `html` and not `body`, as this doing both will break any position sticky in the document.
+ */export var addNoScrollClass=function(){document.documentElement.classList.add(NO_SCROLL_CLASS)};/**
+ * Clean up after {@link addNoScrollClass} function
+ */export var removeNoScrollClass=function(){document.documentElement.classList.remove(NO_SCROLL_CLASS)};

package/build/es/no-polyfill/common/DOMOperations/index.js

@@ -1 +1 @@
-import{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export{addNoScrollBodyClass,removeNoScrollBodyClass};
+import{addNoScrollClass,removeNoScrollClass}from"./DOMOperations";export{addNoScrollClass,removeNoScrollClass};

package/build/es/no-polyfill/common/index.js

@@ -1,2 +1,2 @@
-export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
+export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollClass,removeNoScrollClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
 export*from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/typography";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export{Variant}from"./propsValues/variant";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";

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
+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{addNoScrollClass,removeNoScrollClass}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.contentPosition,f=a.fadeContentOnEnter,g=void 0!==f&&f,h=a.fadeContentOnExit,i=a.open,j=void 0!==i&&i,k=a.scrollable,l=a.transparent,m=void 0!==l&&l,n=a.onClose,o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(null),t=function(a){a.target===s.current&&(null===n||void 0===n?void 0:n(a))},u=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),n&&s.current&&dimmerManager.isTop(s.current)&&n(a))},[n]);return useEffect(function(){var a=s.current;return j&&(document.addEventListener("keydown",u),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",u),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[u,j]),/*#__PURE__*/_jsx(DimmerWrapper,{open:j,hasNotExited:q,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:s,in:j,appear:!0// Wait for animation to finish before unmount.
-,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),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
+,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),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&&addNoScrollClass(),function(){c&&removeNoScrollClass()}},[c]),b};// Export without the Portal for tests only
 export{Dimmer};export default withNextPortal(Dimmer);

package/build/es/polyfill/common/DOMOperations/DOMOperations.js

@@ -1,9 +1,9 @@
 /**
  * Defined in `Dimmer.less`
- */var NO_SCROLL_BODY_CLASS="no-scroll";/**
- * Apply {@link NO_SCROLL_BODY_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
+ */var NO_SCROLL_CLASS="no-scroll";/**
+ * Apply {@link NO_SCROLL_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
  *
- * For a proper disabling, the CSS class needs to be applied for `html` and `body` elements.
- */export var addNoScrollBodyClass=function(){document.documentElement.classList.add(NO_SCROLL_BODY_CLASS),document.body.classList.add(NO_SCROLL_BODY_CLASS)};/**
- * Clean up after {@link addNoScrollBodyClass} function
- */export var removeNoScrollBodyClass=function(){document.documentElement.classList.remove(NO_SCROLL_BODY_CLASS),document.body.classList.remove(NO_SCROLL_BODY_CLASS)};
+ * CSS class needs to be applied for `html` and not `body`, as this doing both will break any position sticky in the document.
+ */export var addNoScrollClass=function(){document.documentElement.classList.add(NO_SCROLL_CLASS)};/**
+ * Clean up after {@link addNoScrollClass} function
+ */export var removeNoScrollClass=function(){document.documentElement.classList.remove(NO_SCROLL_CLASS)};

package/build/es/polyfill/common/DOMOperations/index.js

@@ -1 +1 @@
-import{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export{addNoScrollBodyClass,removeNoScrollBodyClass};
+import{addNoScrollClass,removeNoScrollClass}from"./DOMOperations";export{addNoScrollClass,removeNoScrollClass};

package/build/es/polyfill/common/index.js

@@ -1,2 +1,2 @@
-export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
+export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollClass,removeNoScrollClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
 export*from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/typography";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export{Variant}from"./propsValues/variant";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";

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
+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{addNoScrollClass,removeNoScrollClass}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.contentPosition,f=a.fadeContentOnEnter,g=void 0!==f&&f,h=a.fadeContentOnExit,i=a.open,j=void 0!==i&&i,k=a.scrollable,l=a.transparent,m=void 0!==l&&l,n=a.onClose,o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(null),t=function(a){a.target===s.current&&(null===n||void 0===n?void 0:n(a))},u=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),n&&s.current&&dimmerManager.isTop(s.current)&&n(a))},[n]);return useEffect(function(){var a=s.current;return j&&(document.addEventListener("keydown",u),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",u),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[u,j]),/*#__PURE__*/_jsx(DimmerWrapper,{open:j,hasNotExited:q,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:s,in:j,appear:!0// Wait for animation to finish before unmount.
-,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),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
+,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),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&&addNoScrollClass(),function(){c&&removeNoScrollClass()}},[c]),b};// Export without the Portal for tests only
 export{Dimmer};export default withNextPortal(Dimmer);