@transferwise/components 46.42.0 → 46.43.0

package/build/index.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Fragment as Fragment$1, Children } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
@@ -5737,25 +5737,45 @@ function InputGroup({
   className,
   children
 }) {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
   const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
   const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
-  return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
-    value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
-    children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
-      value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
-      children: /*#__PURE__*/jsxs("fieldset", {
-        disabled: disabled,
-        className: classNames(className, 'np-input-group'),
-        children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
-          placement: "start",
-          ...addonStart
-        }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
-          placement: "end",
-          ...addonEnd
-        }) : null]
+  return (
+    /*#__PURE__*/
+    /* Prevent nested controls from being labeled redundantly */
+    jsx(FieldLabelIdContextProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsx(InputIdContextProvider, {
+        value: undefined,
+        children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsx(InputInvalidProvider, {
+            value: undefined,
+            children: /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
+              value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+              children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
+                value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+                children: /*#__PURE__*/jsxs("fieldset", {
+                  ...inputAttributes,
+                  disabled: disabled,
+                  className: classNames(className, 'np-input-group'),
+                  children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
+                    placement: "start",
+                    ...addonStart
+                  }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
+                    placement: "end",
+                    ...addonEnd
+                  }) : null]
+                })
+              })
+            })
+          })
+        })
       })
     })
-  });
+  );
 }
 const inputAddonContentWidthAddendByPadding = {
   none: 0,
@@ -6233,6 +6253,26 @@ const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWit
   });
 });
 
+/**
+ * This progressive enhancement uses an experimental API, it might change,
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
+function useVirtualKeyboard() {
+  useEffect(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+    if ('virtualKeyboard' in navigator) {
+      const virtualKeyboard = navigator.virtualKeyboard;
+      const initialOverlaysContent = virtualKeyboard.overlaysContent;
+      virtualKeyboard.overlaysContent = true;
+      return () => {
+        virtualKeyboard.overlaysContent = initialOverlaysContent;
+      };
+    }
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+  }, []);
+}
+
 function PreventScroll() {
   usePreventScroll();
   return null;
@@ -6248,6 +6288,7 @@ function BottomSheet({
   onClose,
   onCloseEnd
 }) {
+  useVirtualKeyboard();
   const {
     refs,
     context
@@ -6287,29 +6328,21 @@ function BottomSheet({
           },
           afterLeave: onCloseEnd,
           children: [/*#__PURE__*/jsx(Transition.Child, {
-            enter: "np-bottom-sheet-v2-backdrop-container--enter",
-            enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-            leave: "np-bottom-sheet-v2-backdrop-container--leave",
-            leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-            children: /*#__PURE__*/jsx("div", {
-              className: "np-bottom-sheet-v2-backdrop"
-            })
+            className: "np-bottom-sheet-v2-backdrop",
+            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
+            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
           }), /*#__PURE__*/jsx("div", {
             className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsx(Transition.Child, {
-              className: "np-bottom-sheet-v2-content",
-              enter: "np-bottom-sheet-v2-content--enter",
-              enterFrom: "np-bottom-sheet-v2-content--enter-from",
-              leave: "np-bottom-sheet-v2-content--leave",
-              leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsx(FocusScope, {
-                children: /*#__PURE__*/jsx(FloatingFocusManager, {
-                  context: context,
-                  initialFocus: initialFocusRef,
-                  children: /*#__PURE__*/jsxs("div", {
-                    // Force inner state invalidation on open
+            children: /*#__PURE__*/jsx(FocusScope, {
+              children: /*#__PURE__*/jsx(FloatingFocusManager, {
+                context: context,
+                initialFocus: initialFocusRef,
+                children: /*#__PURE__*/jsx(Fragment$1, {
+                  children: /*#__PURE__*/jsxs(Transition.Child, {
                     ref: refs.setFloating,
-                    className: "np-bottom-sheet-v2-content-inner-container",
+                    className: "np-bottom-sheet-v2-content",
+                    enterFrom: "np-bottom-sheet-v2-content--closed",
+                    leaveTo: "np-bottom-sheet-v2-content--closed",
                     ...getFloatingProps(),
                     children: [/*#__PURE__*/jsx("div", {
                       className: "np-bottom-sheet-v2-header",
@@ -6320,9 +6353,7 @@ function BottomSheet({
                         }
                       })
                     }), /*#__PURE__*/jsxs("div", {
-                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                      }),
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
                       children: [title ? /*#__PURE__*/jsx("h2", {
                         className: "np-bottom-sheet-v2-title np-text-title-body",
                         children: title
@@ -6331,8 +6362,8 @@ function BottomSheet({
                         children: children
                       })]
                     })]
-                  }, floatingKey)
-                })
+                  })
+                }, floatingKey)
               })
             })
           })]
@@ -6609,6 +6640,7 @@ function SelectInput({
   disabled,
   size = 'md',
   className,
+  UNSAFE_triggerButtonProps,
   onFilterChange = noop,
   onChange,
   onClose,
@@ -6677,6 +6709,7 @@ function SelectInput({
               triggerRef.current = node;
             },
             ...inputAttributes,
+            ...UNSAFE_triggerButtonProps,
             id,
             ...mergeProps({
               onClick: () => {