@transferwise/components 0.0.0-experimental-94569f6 → 0.0.0-experimental-5769182

package/build/index.mjs

@@ -1,8 +1,8 @@
 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, Fragment as Fragment$1, Children } 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 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, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
+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';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -717,7 +717,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsx("span", {
     "data-testid": "status-icon",
-    className: classNames('status-circle', 'status-circle-' + size, sentiment),
+    className: classNames('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: classNames('status-icon', iconColor)
     })
@@ -4837,14 +4837,20 @@ function InlineAlert({
   className,
   children
 }) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     role: "alert",
     id: id,
-    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-      children: children
-    })]
+    className: classNames('alert alert-detach', `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "d-inline-flex",
+      children: [type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && /*#__PURE__*/jsx(StatusIcon, {
+        sentiment: type,
+        size: Size.SMALL
+      }), /*#__PURE__*/jsx("div", {
+        className: "np-text-body-default",
+        children: children
+      })]
+    })
   });
 }
 
@@ -4865,13 +4871,15 @@ const Label = ({
 const Field = ({
   id,
   label,
-  hint,
-  error,
+  message: propMessage,
+  sentiment: propType,
   className,
-  children
+  children,
+  ...props
 }) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === Sentiment.NEGATIVE;
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4881,26 +4889,24 @@ const Field = ({
     children: /*#__PURE__*/jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
+        value: message ? descriptionId : undefined,
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
+              'has-success': sentiment === Sentiment.POSITIVE,
+              'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': hasHint
+              'has-info': sentiment === Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEUTRAL,
+            }), message && /*#__PURE__*/jsx(InlineAlert, {
+              type: sentiment,
               id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
+              children: message
             })]
           })
         })
@@ -6230,21 +6236,6 @@ const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWit
   });
 });
 
-function useVirtualKeyboard() {
-  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() {
   usePreventScroll();
   return null;
@@ -6260,7 +6251,6 @@ function BottomSheet({
   onClose,
   onCloseEnd
 }) {
-  useVirtualKeyboard();
   const {
     refs,
     context
@@ -6300,21 +6290,29 @@ function BottomSheet({
           },
           afterLeave: onCloseEnd,
           children: [/*#__PURE__*/jsx(Transition.Child, {
-            className: "np-bottom-sheet-v2-backdrop",
-            enterFrom: "np-bottom-sheet-v2-backdrop--closed",
-            leaveTo: "np-bottom-sheet-v2-backdrop--closed"
+            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"
+            })
           }), /*#__PURE__*/jsx("div", {
             className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsx(FocusScope, {
-              children: /*#__PURE__*/jsx(FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsx(Fragment$1, {
-                  children: /*#__PURE__*/jsxs(Transition.Child, {
+            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
                     ref: refs.setFloating,
-                    className: "np-bottom-sheet-v2-content",
-                    enterFrom: "np-bottom-sheet-v2-content--closed",
-                    leaveTo: "np-bottom-sheet-v2-content--closed",
+                    className: "np-bottom-sheet-v2-content-inner-container",
                     ...getFloatingProps(),
                     children: [/*#__PURE__*/jsx("div", {
                       className: "np-bottom-sheet-v2-header",
@@ -6325,7 +6323,9 @@ function BottomSheet({
                         }
                       })
                     }), /*#__PURE__*/jsxs("div", {
-                      className: classNames('np-bottom-sheet-v2-content-inner', padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md'),
+                      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'
+                      }),
                       children: [title ? /*#__PURE__*/jsx("h2", {
                         className: "np-bottom-sheet-v2-title np-text-title-body",
                         children: title
@@ -6334,8 +6334,8 @@ function BottomSheet({
                         children: children
                       })]
                     })]
-                  })
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]