@transferwise/components 0.0.0-experimental-7709e0e → 0.0.0-experimental-94569f6

package/build/index.js

@@ -746,7 +746,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     "data-testid": "status-icon",
-    className: classNames__default.default('status-circle', `status-circle-${size}`, sentiment),
+    className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: classNames__default.default('status-icon', iconColor)
     })
@@ -4866,20 +4866,14 @@ function InlineAlert({
   className,
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "alert",
     id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${[exports.Sentiment.NEGATIVE, exports.Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "d-inline-flex",
-      children: [type !== exports.Sentiment.NEUTRAL && type !== exports.Sentiment.PENDING && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-        sentiment: type,
-        size: exports.Size.SMALL
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "np-text-body-default",
-        children: children
-      })]
-    })
+    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
+    })]
   });
 }
 
@@ -4900,15 +4894,13 @@ const Label = ({
 const Field = ({
   id,
   label,
-  message: propMessage,
-  sentiment: propType,
+  hint,
+  error,
   className,
-  children,
-  ...props
+  children
 }) => {
-  const sentiment = props.error ? exports.Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
-  const hasError = sentiment === exports.Sentiment.NEGATIVE;
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4918,24 +4910,26 @@ const Field = ({
     children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: message ? descriptionId : undefined,
+        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-success': sentiment === exports.Sentiment.POSITIVE,
-              'has-warning': sentiment === exports.Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': sentiment === exports.Sentiment.NEUTRAL
+              'has-info': hasHint
             }, className),
             children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: sentiment,
+            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEUTRAL,
               id: descriptionId,
-              children: message
+              children: hint
+            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
             })]
           })
         })
@@ -6265,6 +6259,21 @@ const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function Polymorp
   });
 });
 
+function useVirtualKeyboard() {
+  React.useEffect(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+    if ('virtualKeyboard' in navigator) {
+      navigator.virtualKeyboard.overlaysContent = true;
+    }
+    return () => {
+      if ('virtualKeyboard' in navigator) {
+        navigator.virtualKeyboard.overlaysContent = false;
+      }
+    };
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+  }, []);
+}
+
 function PreventScroll() {
   overlays.usePreventScroll();
   return null;
@@ -6280,6 +6289,7 @@ function BottomSheet({
   onClose,
   onCloseEnd
 }) {
+  useVirtualKeyboard();
   const {
     refs,
     context
@@ -6319,29 +6329,21 @@ function BottomSheet({
           },
           afterLeave: onCloseEnd,
           children: [/*#__PURE__*/jsxRuntime.jsx(react$1.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
             className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsxRuntime.jsx(react$1.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__*/jsxRuntime.jsx(focus.FocusScope, {
-                children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-                  context: context,
-                  initialFocus: initialFocusRef,
-                  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    // Force inner state invalidation on open
+            children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+              children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+                context: context,
+                initialFocus: initialFocusRef,
+                children: /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
+                  children: /*#__PURE__*/jsxRuntime.jsxs(react$1.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__*/jsxRuntime.jsx("div", {
                       className: "np-bottom-sheet-v2-header",
@@ -6352,9 +6354,7 @@ function BottomSheet({
                         }
                       })
                     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: classNames__default.default('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__default.default('np-bottom-sheet-v2-content-inner', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
                       children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
                         className: "np-bottom-sheet-v2-title np-text-title-body",
                         children: title
@@ -6363,8 +6363,8 @@ function BottomSheet({
                         children: children
                       })]
                     })]
-                  }, floatingKey)
-                })
+                  })
+                }, floatingKey)
               })
             })
           })]