@transferwise/components 46.42.0 → 46.43.0

package/src/inputs/_BottomSheet.tsx

@@ -10,9 +10,10 @@ import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
+import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 import { Size } from '../common/propsValues/size';
 
@@ -42,6 +43,8 @@ export function BottomSheet({
   onClose,
   onCloseEnd,
 }: BottomSheetProps) {
+  useVirtualKeyboard();
+
   const { refs, context } = useFloating<Element>({
     open,
     onOpenChange: (value) => {
@@ -82,28 +85,22 @@ export function BottomSheet({
             afterLeave={onCloseEnd}
           >
             <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"
-            >
-              <div className="np-bottom-sheet-v2-backdrop" />
-            </Transition.Child>
+              className="np-bottom-sheet-v2-backdrop"
+              enterFrom="np-bottom-sheet-v2-backdrop--closed"
+              leaveTo="np-bottom-sheet-v2-backdrop--closed"
+            />
 
             <div className="np-bottom-sheet-v2">
-              <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"
-              >
-                <FocusScope>
-                  <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
-                    <div
-                      key={floatingKey} // Force inner state invalidation on open
+              <FocusScope>
+                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+                  <Fragment
+                    key={floatingKey} // Force inner state invalidation on open
+                  >
+                    <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()}
                     >
                       <div className="np-bottom-sheet-v2-header">
@@ -118,9 +115,7 @@ export function BottomSheet({
                         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',
-                          },
+                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',
                         )}
                       >
                         {title ? (
@@ -130,10 +125,10 @@ export function BottomSheet({
                           {children}
                         </div>
                       </div>
-                    </div>
-                  </FloatingFocusManager>
-                </FocusScope>
-              </Transition.Child>
+                    </Transition.Child>
+                  </Fragment>
+                </FloatingFocusManager>
+              </FocusScope>
             </div>
           </Transition>
         </ThemeProvider>

package/src/inputs/_Popover.less

@@ -26,10 +26,10 @@
   display: grid;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 
   &--has-title {
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
   }
 
   &--padding-md {

package/src/main.css

@@ -2400,67 +2400,37 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  overflow: auto;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
   border-top-right-radius: 32px;
@@ -2469,30 +2439,50 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -2539,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
   padding: 16px;