@transferwise/components 45.15.0 → 45.16.0

package/src/inputs/SelectInput.story.tsx

@@ -4,6 +4,8 @@ import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
+import Drawer from '../drawer';
+import Modal from '../modal';
 
 import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
 
@@ -141,7 +143,10 @@ export const Months: StoryObj<{
       <div className="d-flex flex-column">
         <SelectInput
           placeholder="Month"
-          items={months.map((month) => ({ type: 'option', value: month }))}
+          items={months.map((month) => ({
+            type: 'option',
+            value: month,
+          }))}
           value={selectedMonth}
           renderValue={(month) => <SelectInputOptionContent title={month.name} />}
           onChange={(month) => {
@@ -206,6 +211,14 @@ const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sor
   a.code.localeCompare(b.code),
 );
 
+function currencyOption(currency: Currency) {
+  return {
+    type: 'option',
+    value: currency,
+    filterMatchers: [currency.code, currency.name, ...(currency.countries ?? [])],
+  } satisfies SelectInputItem<Currency>;
+}
+
 export const Currencies: StoryObj<{
   onChange: (value: Currency) => void;
 }> = {
@@ -219,18 +232,12 @@ export const Currencies: StoryObj<{
             {
               type: 'group',
               label: 'Popular currencies',
-              options: popularCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
+              options: popularCurrencies.map((currency) => currencyOption(currency)),
             },
             {
               type: 'group',
               label: 'All currencies',
-              options: allCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
+              options: allCurrencies.map((currency) => currencyOption(currency)),
             },
           ]}
           value={selectedCurrency}
@@ -257,3 +264,23 @@ export const Currencies: StoryObj<{
     },
   },
 };
+
+export const WithinDrawer: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [
+    (Story) => (
+      <Drawer open headerTitle="This is the title of the drawer">
+        <Story />
+      </Drawer>
+    ),
+  ],
+};
+
+export const WithinModal: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [(Story) => <Modal open body={<Story />} onClose={() => {}} />],
+};

package/src/inputs/_BottomSheet.less

@@ -1,6 +1,6 @@
 .np-bottom-sheet-v2-container {
   position: relative;
-  z-index: 50;
+  z-index: 1060;
 }
 
 .np-bottom-sheet-v2-backdrop-container {

package/src/inputs/_BottomSheet.tsx

@@ -7,6 +7,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
 
@@ -55,6 +56,8 @@ export function BottomSheet({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -64,64 +67,66 @@ export function BottomSheet({
       })}
 
       <FloatingPortal>
-        <Transition
-          show={open}
-          className="np-bottom-sheet-v2-container"
-          beforeEnter={() => {
-            setFloatingKey((prev) => prev + 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"
+        <ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
+          <Transition
+            show={open}
+            className="np-bottom-sheet-v2-container"
+            beforeEnter={() => {
+              setFloatingKey((prev) => prev + 1);
+            }}
           >
-            <div className="np-bottom-sheet-v2-backdrop" />
-          </Transition.Child>
+            <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>
 
-          <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
-            <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"
-              >
-                <div
-                  key={floatingKey} // Force inner state invalidation on open
-                  ref={refs.setFloating}
-                  className="np-bottom-sheet-v2-content-inner-container"
-                  {...getFloatingProps()}
+            <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+              <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"
                 >
-                  <div className="np-bottom-sheet-v2-header">
-                    <CloseButton
-                      size={Size.SMALL}
-                      onClick={() => {
-                        onClose?.();
-                      }}
-                    />
-                  </div>
                   <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',
-                      },
-                    )}
+                    key={floatingKey} // Force inner state invalidation on open
+                    ref={refs.setFloating}
+                    className="np-bottom-sheet-v2-content-inner-container"
+                    {...getFloatingProps()}
                   >
-                    {title ? (
-                      <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
-                    ) : null}
-                    <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                    <div className="np-bottom-sheet-v2-header">
+                      <CloseButton
+                        size={Size.SMALL}
+                        onClick={() => {
+                          onClose?.();
+                        }}
+                      />
+                    </div>
+                    <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',
+                        },
+                      )}
+                    >
+                      {title ? (
+                        <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                      ) : null}
+                      <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                    </div>
                   </div>
-                </div>
-              </Transition.Child>
-            </div>
-          </FloatingFocusManager>
-        </Transition>
+                </Transition.Child>
+              </div>
+            </FloatingFocusManager>
+          </Transition>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );

package/src/inputs/_Popover.less

@@ -1,5 +1,5 @@
 .np-popover-v2-container {
-  z-index: 10;
+  z-index: 1060;
   display: flex;
   max-height: var(--max-height);
   width: var(--width);

package/src/inputs/_Popover.tsx

@@ -13,6 +13,7 @@ import {
   useRole,
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
 
@@ -75,6 +76,8 @@ export function Popover({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -84,34 +87,38 @@ export function Popover({
       })}
 
       <FloatingPortal>
-        <FloatingFocusManager context={context}>
-          <Transition
-            show={open}
-            leave="transition-opacity"
-            leaveTo="opacity-0"
-            beforeEnter={() => {
-              setFloatingKey((prev) => prev + 1);
-            }}
-          >
-            <div
-              key={floatingKey} // Force inner state invalidation on open
-              ref={refs.setFloating}
-              className="np-popover-v2-container"
-              // eslint-disable-next-line react/forbid-dom-props
-              style={floatingStyles}
-              {...getFloatingProps()}
+        <ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
+          <FloatingFocusManager context={context}>
+            <Transition
+              show={open}
+              leave="transition-opacity"
+              leaveTo="opacity-0"
+              beforeEnter={() => {
+                setFloatingKey((prev) => prev + 1);
+              }}
             >
               <div
-                className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md',
-                })}
+                key={floatingKey} // Force inner state invalidation on open
+                ref={refs.setFloating}
+                className="np-popover-v2-container"
+                // eslint-disable-next-line react/forbid-dom-props
+                style={floatingStyles}
+                {...getFloatingProps()}
               >
-                {title ? <h2 className="np-popover-v2-title np-text-title-body">{title}</h2> : null}
-                <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                <div
+                  className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md',
+                  })}
+                >
+                  {title ? (
+                    <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                  ) : null}
+                  <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                </div>
               </div>
-            </div>
-          </Transition>
-        </FloatingFocusManager>
+            </Transition>
+          </FloatingFocusManager>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );

package/src/listItem/ListItem.story.tsx

@@ -100,7 +100,7 @@ export const Variants = () => {
       </div>
       <div className="m-t-4 m-b-2">
         <Title type="title-body">Text Only List</Title>
-        <ul style={{ paddingLeft: 0 }}>
+        <ul className="list-unstyled">
           <Template title="Sort code" value="23-14-71" />
           <Template title="Account number" value="12345678" />
         </ul>