@transferwise/components 45.21.3 → 45.22.0

package/build/index.esm.js

@@ -5396,19 +5396,8 @@ const FlowHeader = /*#__PURE__*/React.forwardRef(({
   const isVertical = layout === Layout$1.VERTICAL;
   return /*#__PURE__*/jsxs("div", {
     ref: reference,
-    className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', className),
-    children: [/*#__PURE__*/jsx("div", {
-      className: classNames('np-flow-header__left', {
-        'flex__item--8': isVertical
-      }),
-      children: leftContent
-    }), /*#__PURE__*/jsx("div", {
-      className: classNames('align-items-center', 'd-flex', 'np-flow-header__right', 'justify-content-end', {
-        'flex__item--4 ': isVertical,
-        'order-2': !isVertical
-      }),
-      children: rightContent
-    }), /*#__PURE__*/jsx("div", {
+    className: classNames('np-flow-header', 'd-flex', 'flex-wrap', 'align-items-center', 'justify-content-between', 'flex__item--12', className),
+    children: [leftContent, rightContent, /*#__PURE__*/jsx("div", {
       className: classNames('align-items-center', 'd-flex', 'justify-content-center', {
         'flex__item--12': isVertical,
         'order-1 flex-grow-1': !isVertical
@@ -5711,19 +5700,16 @@ var messages$5 = defineMessages({
 const AnimatedLabel = ({
   activeLabel,
   className,
-  labels,
-  'aria-label': ariaLabel
+  labels
 }) => {
-  const numberLabels = labels.length - 1;
-  return /*#__PURE__*/jsx("div", {
-    "aria-label": ariaLabel,
-    className: classNames('np-animated-label', 'np-text-body-large-bold', className),
+  return /*#__PURE__*/jsx(Body, {
+    type: Typography.BODY_LARGE_BOLD,
+    className: classNames('np-animated-label', className),
     children: labels.map((label, index) => {
       const nextLabel = index - 1;
       return /*#__PURE__*/jsx("div", {
-        className: classNames('text-xs-left', {
-          'np-animated-label--in': index === activeLabel,
-          'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels
+        className: classNames('text-xs-center', {
+          'np-animated-label--in text-ellipsis': index === activeLabel
         }),
         children: label
       }, nextLabel);
@@ -5732,18 +5718,24 @@ const AnimatedLabel = ({
 };
 
 const BackButton = ({
-  label,
   className,
-  onClick
-}) => /*#__PURE__*/jsxs("button", {
-  type: "button",
-  className: classNames('np-back-button', 'align-items-center', 'btn-unstyled', className),
-  onClick: onClick,
-  children: [/*#__PURE__*/jsx(ArrowLeft, {
-    size: 24
-  }), label]
+  onClick,
+  'aria-label': ariaLabel
+}) => /*#__PURE__*/jsx(Avatar, {
+  type: AvatarType.ICON,
+  size: 40,
+  children: /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    className: classNames('np-back-button', 'btn-unstyled', className),
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(ArrowLeft, {
+      size: 24
+    })
+  })
 });
 BackButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func
@@ -5773,21 +5765,9 @@ const FlowNavigation = ({
     onClick: onClose
   });
   const isSmall = clientWidth != null && clientWidth < Breakpoint.SMALL;
+  const isLarge = clientWidth != null && clientWidth >= Breakpoint.LARGE;
   const newAvatar = done ? null : avatar;
-  const getLeftContentSmall = () => {
-    const displayGoBack = onGoBack != null && activeStep > 0;
-    return /*#__PURE__*/jsx(Fragment, {
-      children: displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
-        label: /*#__PURE__*/jsx(AnimatedLabel, {
-          className: "m-x-1",
-          labels: steps.map(step => step.label),
-          activeLabel: activeStep - 1,
-          "aria-label": intl.formatMessage(messages$5.back)
-        }),
-        onClick: onGoBack
-      }) : logo
-    });
-  };
+  const displayGoBack = onGoBack != null && activeStep > 0;
   return /*#__PURE__*/jsx("div", {
     ref: reference,
     className: classNames('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
@@ -5799,12 +5779,24 @@ const FlowNavigation = ({
         'np-flow-navigation--xs-max': isSmall,
         // Size switches on parent container which may or may not have the same size as the window.
         'np-flow-navigation--sm': clientWidth != null && clientWidth >= Breakpoint.SMALL,
-        'np-flow-navigation--lg': clientWidth != null && clientWidth >= Breakpoint.LARGE
+        'np-flow-navigation--lg': isLarge
+      }),
+      leftContent: /*#__PURE__*/jsxs(Fragment, {
+        children: [isSmall && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
+          "aria-label": intl.formatMessage(messages$5.back),
+          onClick: onGoBack
+        }) : logo, isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
+          className: "m-x-1",
+          labels: steps.map(step => step.label),
+          activeLabel: activeStep
+        })]
       }),
-      leftContent: isSmall ? getLeftContentSmall() : logo,
-      rightContent: /*#__PURE__*/jsxs(Fragment, {
+      rightContent: /*#__PURE__*/jsxs("div", {
+        className: classNames('d-flex', 'align-items-center', {
+          'order-2': isLarge
+        }),
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "separator"
+          className: "m-x-1"
         }), closeButton]
       }),
       bottomContent: !done && /*#__PURE__*/jsx(Stepper, {
@@ -6749,6 +6741,7 @@ function SelectInput({
   value: controlledValue,
   compareValues,
   renderValue = wrapInFragment,
+  renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
@@ -6822,6 +6815,7 @@ function SelectInput({
       children: /*#__PURE__*/jsx(SelectInputOptions, {
         items: items,
         renderValue: renderValue,
+        renderFooter: renderFooter,
         filterable: filterable,
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
@@ -6864,29 +6858,32 @@ const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInput
   useEffect(() => {
     handleAriaActiveDescendantChange(ariaActiveDescendant);
   }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", {
-      ref: ref,
-      onKeyDown: event => {
-        // Prevent absorbing dismissal requests too early
-        if (event.key === 'Escape') {
-          return;
-        }
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
-          return;
-        }
-        onKeyDown?.(event);
-      },
-      ...restProps
-    })
-  );
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    role: "none",
+    onKeyDown: event => {
+      // Prevent confirmation close without an active item
+      if (event.key === 'Enter' && ariaActiveDescendant == null) {
+        return;
+      }
+      // Prevent absorbing actions early
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        onKeyDown?.({
+          ...event,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        });
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    ...restProps
+  });
 });
 function SelectInputOptions({
   items,
   renderValue = wrapInFragment,
+  renderFooter,
   filterable = false,
   filterPlaceholder,
   searchInputRef,
@@ -6901,14 +6898,14 @@ function SelectInputOptions({
     }
     return undefined;
   }, [filterable, query]);
-  const empty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
   const listboxContainerRef = useRef(null);
   useEffect(() => {
     if (listboxContainerRef.current != null) {
       listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
     }
   }, []);
-  const showStatus = empty;
+  const showStatus = resultsEmpty;
   const statusId = useId();
   const listboxId = useId();
   return /*#__PURE__*/jsxs(Listbox.Options, {
@@ -6944,10 +6941,10 @@ function SelectInputOptions({
           setQuery(event.currentTarget.value);
         }
       })
-    }) : null, /*#__PURE__*/jsxs("div", {
+    }) : null, /*#__PURE__*/jsxs("section", {
       ref: listboxContainerRef,
       className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      children: [empty ? /*#__PURE__*/jsxs("div", {
+      children: [resultsEmpty ? /*#__PURE__*/jsxs("div", {
         id: statusId,
         className: "np-select-input-options-status",
         children: [/*#__PURE__*/jsx(CrossCircle, {
@@ -6968,7 +6965,22 @@ function SelectInputOptions({
           renderValue: renderValue,
           needle: needle
         }, index))
-      })]
+      }), renderFooter != null ? /*#__PURE__*/jsx("footer", {
+        className: "np-select-input-footer",
+        children: /*#__PURE__*/jsx("div", {
+          role: "none",
+          onKeyDown: event => {
+            // Prevent interfering with Headless UI
+            if (event.key !== 'Escape') {
+              event.stopPropagation();
+            }
+          },
+          children: renderFooter({
+            resultsEmpty,
+            normalizedQuery: needle
+          })
+        })
+      }) : null]
     })]
   });
 }
@@ -7025,7 +7037,7 @@ function SelectInputGroupItemView({
       className: classNames(needle === null && 'np-select-input-group-item--without-needle'),
       children: [needle == null ? /*#__PURE__*/jsx("header", {
         id: headerId,
-        role: "presentation",
+        role: "none",
         className: "np-select-input-group-item-header np-text-title-group",
         children: item.label
       }) : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
@@ -8803,6 +8815,7 @@ const OverlayHeader = ({
   logo
 }) => {
   const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
+    size: Size.LARGE,
     onClick: onClose
   });
   return /*#__PURE__*/jsx("div", {
@@ -8810,9 +8823,10 @@ const OverlayHeader = ({
     children: /*#__PURE__*/jsx(FlowHeader, {
       className: "np-overlay-header__content p-a-3",
       leftContent: logo,
-      rightContent: /*#__PURE__*/jsxs(Fragment, {
+      rightContent: /*#__PURE__*/jsxs("div", {
+        className: classNames('d-flex', 'align-items-center', 'order-2'),
         children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: "separator"
+          className: classNames('m-x-1')
         }), closeButton]
       })
     })