@transferwise/components 0.0.0-experimental-92d8ee4 → 0.0.0-experimental-5535cba

package/src/inputs/SelectInput.tsx

@@ -1,9 +1,4 @@
-import {
-  Listbox as ListboxBase,
-  ListboxButton,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/react';
+import { Listbox as ListboxBase } from '@headlessui/react';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
@@ -359,7 +354,7 @@ export function SelectInput<T = string, M extends boolean = false>({
           multiple && Array.isArray(value) ? value.length === 0 : value == null;
         return (
           <OptionsOverlay
-            placement="bottom-end"
+            placement="bottom-start"
             open={open}
             renderTrigger={({ ref, getInteractionProps }) => (
               <SelectInputTriggerButtonPropsContext.Provider
@@ -472,7 +467,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
   );
 
   return (
-    <ListboxButton
+    <ListboxBase.Button
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
@@ -639,8 +634,7 @@ function SelectInputOptions<T = string>({
   };
 
   return (
-    <ListboxOptions
-      modal
+    <ListboxBase.Options
       as={SelectInputOptionsContainer}
       static
       className="np-select-input-options-container"
@@ -763,7 +757,7 @@ function SelectInputOptions<T = string>({
           </footer>
         ) : null}
       </section>
-    </ListboxOptions>
+    </ListboxBase.Options>
   );
 }
 
@@ -870,7 +864,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
   const itemsCount = useContext(SelectInputItemsCountContext);
   const itemPosition = useContext(SelectInputItemPositionContext);
   return (
-    <ListboxOption
+    <ListboxBase.Option
       as="div"
       value={value}
       aria-setsize={itemsCount}
@@ -896,7 +890,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
           />
         </>
       )}
-    </ListboxOption>
+    </ListboxBase.Option>
   );
 }
 

package/src/inputs/_BottomSheet.tsx

@@ -6,7 +6,7 @@ import {
   useInteractions,
   useRole,
 } from '@floating-ui/react';
-import { Transition, TransitionChild } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
@@ -77,7 +77,6 @@ export function BottomSheet({
           isNotRootProvider
         >
           <Transition
-            as="div"
             show={open}
             className="np-bottom-sheet-v2-container"
             beforeEnter={() => {
@@ -85,8 +84,7 @@ export function BottomSheet({
             }}
             afterLeave={onCloseEnd}
           >
-            <TransitionChild
-              as="div"
+            <Transition.Child
               className="np-bottom-sheet-v2-backdrop"
               enterFrom="np-bottom-sheet-v2-backdrop--closed"
               leaveTo="np-bottom-sheet-v2-backdrop--closed"
@@ -98,9 +96,8 @@ export function BottomSheet({
                   <Fragment
                     key={floatingKey} // Force inner state invalidation on open
                   >
-                    <TransitionChild
+                    <Transition.Child
                       ref={refs.setFloating}
-                      as="div"
                       className="np-bottom-sheet-v2-content"
                       enterFrom="np-bottom-sheet-v2-content--closed"
                       leaveTo="np-bottom-sheet-v2-content--closed"
@@ -128,7 +125,7 @@ export function BottomSheet({
                           {children}
                         </div>
                       </div>
-                    </TransitionChild>
+                    </Transition.Child>
                   </Fragment>
                 </FloatingFocusManager>
               </FocusScope>

package/src/inputs/_Popover.tsx

@@ -54,7 +54,7 @@ export function Popover({
     placement,
     middleware: [
       offset(8),
-      flip({ padding: floatingPadding }),
+      flip({ padding: floatingPadding, crossAxis: false }),
       shift(),
       floatingSize({
         padding: floatingPadding,
@@ -96,7 +96,6 @@ export function Popover({
           isNotRootProvider
         >
           <Transition
-            as="div"
             show={open}
             leave="transition-opacity"
             leaveTo="opacity-0"

package/src/upload/steps/completeStep/completeStep.tsx

@@ -1,6 +1,6 @@
 import { Document as DocumentIcon } from '@transferwise/icons';
 
-import { Typography } from '../../..';
+import { Typography } from '../../../common';
 import Body from '../../../body';
 import Button from '../../../button';
 import Title from '../../../title';