@transferwise/components 46.34.0 → 46.35.1

package/build/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var reactId = require('@radix-ui/react-id');
 var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@transferwise/icons');
@@ -12,7 +11,6 @@ var componentsTheming = require('@wise/components-theming');
 var reactTransitionGroup = require('react-transition-group');
 var focus = require('@react-aria/focus');
 var reactDom = require('react-dom');
-var index_js = require('use-sync-external-store/shim/index.js');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
@@ -561,7 +559,7 @@ const AccordionItem = ({
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : null;
-  const fallbackId = reactId.useId();
+  const fallbackId = React.useId();
   const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     id: accordionId,
@@ -1281,68 +1279,67 @@ const radius = {
 };
 const ANIMATION_DURATION_IN_MS = 1500;
 class ProcessIndicator extends React.Component {
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm'
+  };
+  interval = 0;
+  timeout = 0;
   constructor(props) {
     super(props);
     this.state = {
       status: props.status,
       size: props.size
     };
-    this.interval = null;
-    this.timeout = null;
   }
-
   /**
    * Create interval for animation duration (1500ms)
    * Update state only at the end of every interval
    * (end of animation loop) if props changed before end of animation
    */
   componentDidMount() {
-    this.interval = setInterval(() => {
-      const statusFromState = this.state.status;
-      const sizeFromState = this.state.size;
-      const statusFromProps = this.props.status;
-      const sizeFromProps = this.props.size;
-      if (statusFromState !== statusFromProps) {
+    this.interval = window.setInterval(() => {
+      const {
+        status: targetStatus,
+        size: targetSize,
+        onAnimationCompleted
+      } = this.props;
+      const {
+        status: currentStatus,
+        size: currentSize
+      } = this.state;
+      if (currentStatus !== targetStatus) {
         this.setState({
-          status: statusFromProps
-        }, this.runCallBack(statusFromProps));
+          status: targetStatus
+        }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
       }
-      if (sizeFromState !== sizeFromProps) {
+      if (currentSize !== targetSize) {
         this.setState({
-          size: sizeFromProps
+          size: targetSize
         });
       }
     }, ANIMATION_DURATION_IN_MS);
   }
-
   /**
    * Only trigger render if comopnent's state got
    * updated from interval callback
-   *
-   * @param nextProps
-   * @param nextState
    */
   shouldComponentUpdate(nextProps, nextState) {
     const isSameStatus = nextProps.status === nextState.status;
     const isSameSize = nextProps.size === nextState.size;
     return isSameStatus && isSameSize;
   }
-
   // Clear interval before destroying component
   componentWillUnmount() {
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
   }
-  runCallBack = statusFromProps => {
-    const {
-      onAnimationCompleted
-    } = this.props;
-    if (onAnimationCompleted) {
-      this.timeouts = setTimeout(() => {
-        onAnimationCompleted(statusFromProps);
-      }, ANIMATION_DURATION_IN_MS);
-    }
-  };
   render() {
     const {
       className,
@@ -1373,28 +1370,13 @@ class ProcessIndicator extends React.Component {
           className: "process-circle",
           cx: "50%",
           cy: "50%",
-          r: radius[this.state.size],
+          r: radius[size],
           fillOpacity: "0.0"
         })
       })]
     });
   }
 }
-ProcessIndicator.propTypes = {
-  status: PropTypes__default.default.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes__default.default.oneOf(['xxs', 'xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes__default.default.func,
-  className: PropTypes__default.default.string,
-  'data-testid': PropTypes__default.default.string
-};
-ProcessIndicator.defaultProps = {
-  status: exports.Status.PROCESSING,
-  size: exports.Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null
-};
-var ProcessIndicator$1 = ProcessIndicator;
 
 var messages$b = reactIntl.defineMessages({
   loadingAriaLabel: {
@@ -1516,7 +1498,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     ...props,
     "aria-live": loading ? 'polite' : 'off',
     "aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
-    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
+    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
       size: processIndicatorSize(),
       className: "btn-loader"
     })]
@@ -1667,9 +1649,8 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
-// eslint-disable-next-line import/extensions
 function useMedia(query) {
-  return index_js.useSyncExternalStore(onStoreChange => {
+  return React.useSyncExternalStore(onStoreChange => {
     const mediaQueryList = window.matchMedia(query);
     mediaQueryList.addEventListener('change', onStoreChange);
     return () => {
@@ -1847,7 +1828,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
       setChecked(!checked); // Update local state for checkbox
     }
   };
-  const fallbackId = reactId.useId();
+  const fallbackId = React.useId();
   const componentId = id || fallbackId;
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
@@ -2837,7 +2818,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
-  const titleId = reactId.useId();
+  const titleId = React.useId();
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -2879,12 +2860,12 @@ Drawer.propTypes = {
   footerContent: PropTypes__default.default.node,
   /** The content to appear in the drawer header. */
   headerTitle: PropTypes__default.default.node,
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func,
   /** The status of Drawer either open or not. */
   open: PropTypes__default.default.bool,
   /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom'])
+  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom']),
+  /** The action to perform on close click. */
+  onClose: PropTypes__default.default.func
 };
 Drawer.defaultProps = {
   children: null,
@@ -3559,7 +3540,7 @@ const fallbackPlacements = {
   [exports.Position.LEFT]: [exports.Position.RIGHT, exports.Position.TOP, exports.Position.BOTTOM],
   [exports.Position.RIGHT]: [exports.Position.LEFT, exports.Position.TOP, exports.Position.BOTTOM]
 };
-const Panel = /*#__PURE__*/React.forwardRef(({
+const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   arrow = false,
   flip = true,
   altAxis = false,
@@ -3570,7 +3551,7 @@ const Panel = /*#__PURE__*/React.forwardRef(({
   anchorRef,
   anchorWidth = false,
   ...rest
-}, reference) => {
+}, reference) {
   const [arrowElement, setArrowElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const modifiers = [];
@@ -3648,7 +3629,7 @@ const Panel = /*#__PURE__*/React.forwardRef(({
       ...attributes.popper,
       className: classNames__default.default('np-panel', {
         'np-panel--open': open
-      }, rest['className']),
+      }, rest.className),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         ref: reference
         /* eslint-disable-next-line react/forbid-dom-props */,
@@ -3667,7 +3648,7 @@ const Panel = /*#__PURE__*/React.forwardRef(({
 });
 var Panel$1 = Panel;
 
-const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
+const ResponsivePanel = /*#__PURE__*/React.forwardRef(function ResponsivePanel({
   anchorRef,
   arrow = false,
   flip = true,
@@ -3676,7 +3657,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
   onClose,
   open = false,
   position = exports.Position.BOTTOM
-}, reference) => {
+}, reference) {
   const {
     isMobile
   } = useLayout();
@@ -5015,6 +4996,84 @@ const Emphasis = ({
   }) : null;
 };
 
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })]
+  });
+}
+
+const Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
+const Field = ({
+  id,
+  label,
+  hint,
+  error,
+  className,
+  children
+}) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
+  const labelId = React.useId();
+  const fallbackInputId = React.useId();
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const descriptionId = React.useId();
+  return /*#__PURE__*/jsxRuntime.jsx(FieldLabelIdContextProvider, {
+    value: labelId,
+    children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
+      value: inputId,
+      children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
+        value: hasError || hasHint ? descriptionId : undefined,
+        children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
+          value: hasError,
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classNames__default.default('form-group d-block', {
+              'has-error': hasError,
+              'has-info': hasHint
+            }, className),
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
+              id: labelId,
+              htmlFor: inputId,
+              children: [label, children]
+            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEUTRAL,
+              id: descriptionId,
+              children: hint
+            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+
 const FlowHeader = /*#__PURE__*/React__namespace.forwardRef(({
   bottomContent,
   className,
@@ -5221,7 +5280,7 @@ const Tooltip = ({
   const anchorReference = React.useRef(null);
   const [arrowElement, setArrowElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
-  const fallbackId = reactId.useId();
+  const fallbackId = React.useId();
   const tooltipId = id ?? fallbackId;
   const modifiers = [];
   modifiers.push({
@@ -5261,42 +5320,40 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
-      ref: anchorReference,
-      className: "tw-tooltip-container",
-      onMouseOver: () => setOpen(true),
-      onFocus: () => setOpen(true),
-      onMouseOut: () => setOpen(false),
-      onBlur: () => setOpen(false),
-      children: [children ? /*#__PURE__*/React.cloneElement(children, {
-        'aria-describedby': `${tooltipId}-tooltip`
-      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-        // @ts-expect-error
-        ref: setPopperElement,
-        className: classNames__default.default('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
-        // eslint-disable-next-line react/forbid-dom-props
-        ,
-        style: {
-          ...styles.popper
-        },
-        ...attributes.popper,
-        "aria-hidden": !open,
-        role: "tooltip",
-        id: `${tooltipId}-tooltip`,
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "np-panel__content tooltip-inner",
-          children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
-            // @ts-expect-error
-            ref: setArrowElement,
-            className: classNames__default.default('np-panel__arrow')
-            // eslint-disable-next-line react/forbid-dom-props
-            ,
-            style: styles.arrow
-          })]
-        })
-      })]
-    })
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    ref: anchorReference,
+    className: "tw-tooltip-container",
+    onMouseOver: () => setOpen(true),
+    onFocus: () => setOpen(true),
+    onMouseOut: () => setOpen(false),
+    onBlur: () => setOpen(false),
+    children: [children ? /*#__PURE__*/React.cloneElement(children, {
+      'aria-describedby': `${tooltipId}-tooltip`
+    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+      // @ts-expect-error
+      ref: setPopperElement,
+      className: classNames__default.default('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
+      "aria-hidden": !open,
+      role: "tooltip",
+      id: `${tooltipId}-tooltip`,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "np-panel__content tooltip-inner",
+        children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
+          // @ts-expect-error
+          ref: setArrowElement,
+          className: classNames__default.default('np-panel__arrow')
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: styles.arrow
+        })]
+      })
+    })]
   });
 };
 
@@ -5494,84 +5551,6 @@ const FlowNavigation = ({
   });
 };
 
-function InlineAlert({
-  id,
-  type = 'neutral',
-  className,
-  children
-}) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    role: "alert",
-    id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: children
-    })]
-  });
-}
-
-const Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
-const Field = ({
-  id,
-  label,
-  hint,
-  error,
-  className,
-  children
-}) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
-  const labelId = reactId.useId();
-  const fallbackInputId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
-  const inputId = id !== null ? id ?? fallbackInputId : undefined;
-  const descriptionId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
-  return /*#__PURE__*/jsxRuntime.jsx(FieldLabelIdContextProvider, {
-    value: labelId,
-    children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
-      value: inputId,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
-        children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
-          value: hasError,
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: classNames__default.default('form-group d-block', {
-              'has-error': hasError,
-              'has-info': hasHint
-            }, className),
-            children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
-            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEUTRAL,
-              id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
-            })]
-          })
-        })
-      })
-    })
-  });
-};
-
 const HeaderAction = ({
   action
 }) => {
@@ -5668,7 +5647,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
-  const titleId = reactId.useId();
+  const titleId = React.useId();
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -6181,10 +6160,9 @@ class WithDisplayFormat extends React.Component {
         return 'Backspace';
       }
       return triggerEvent.key;
-    } else {
-      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-      return 'Paste';
     }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
   };
   resetEvent = () => {
     this.setState({
@@ -6337,11 +6315,10 @@ class WithDisplayFormat extends React.Component {
       selectionEnd,
       pastedLength
     } = this.state;
+    const target = triggerEvent?.currentTarget;
     const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
-      if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
-      }
+      target?.setSelectionRange(cursorPosition, cursorPosition);
       this.setState({
         selectionStart: cursorPosition,
         selectionEnd: cursorPosition
@@ -7021,8 +6998,8 @@ function SelectInputOptions({
     }
   }, []);
   const showStatus = resultsEmpty;
-  const statusId = reactId.useId();
-  const listboxId = reactId.useId();
+  const statusId = React.useId();
+  const listboxId = React.useId();
   return /*#__PURE__*/jsxRuntime.jsxs(react$1.Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -7149,7 +7126,7 @@ function SelectInputGroupItemView({
   renderValue,
   needle
 }) {
-  const headerId = reactId.useId();
+  const headerId = React.useId();
   return (
     /*#__PURE__*/
     // An empty container may be rendered when no options match `needle`
@@ -10172,7 +10149,7 @@ function Select({
   }, [defaultOptions, search, searchValue]);
   const selectableOptions = React.useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const fallbackButtonId = reactId.useId();
+  const fallbackButtonId = React.useId();
   const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
@@ -12634,7 +12611,7 @@ const ProcessingStep = props => {
     "aria-hidden": isComplete,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "droppable-card-content",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
         size: exports.Size.Small,
         status: processStatus,
         onAnimationCompleted: status => onAnimationCompleted(status)
@@ -13457,7 +13434,7 @@ const UploadItem = ({
     switch (status) {
       case exports.Status.PROCESSING:
       case exports.Status.PENDING:
-        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
           size: exports.Size.EXTRA_SMALL,
           status: exports.Status.PROCESSING
         });
@@ -13468,7 +13445,7 @@ const UploadItem = ({
         processIndicator = isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: exports.Size.SMALL,
           sentiment: exports.Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
           size: exports.Size.EXTRA_SMALL,
           status: exports.Status.SUCCEEDED
         });
@@ -13483,7 +13460,7 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-  const getErrorMessage = () => typeof error === 'object' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
+  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
     if (error || status === exports.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
@@ -14880,7 +14857,7 @@ exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput;
 exports.Popover = Popover$1;
-exports.ProcessIndicator = ProcessIndicator$1;
+exports.ProcessIndicator = ProcessIndicator;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
 exports.PromoCard = PromoCard$1;