@transferwise/components 0.0.0-experimental-93bf218 → 0.0.0-experimental-4aed95c

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -16,7 +16,6 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     onClose,
     open = false,
     position = Position.BOTTOM,
-    anchorWidth = false,
   }: PanelProps,
   reference,
 ) {
@@ -36,7 +35,6 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
       arrow={arrow}
       open={open}
       position={position}
-      anchorWidth={anchorWidth}
       anchorRef={anchorRef}
       className={className}
       onClose={onClose}

package/src/i18n/en.json

@@ -23,8 +23,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
-  "neptune.SelectOption.action.label": "Choose",
-  "neptune.SelectOption.selected.action.label": "Change chosen option",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/index.ts

@@ -3,7 +3,6 @@
  */
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
@@ -87,7 +86,6 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
-export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';

package/src/inputs/SelectInput.css

@@ -2,67 +2,37 @@
   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;
@@ -71,30 +41,50 @@
   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;
@@ -141,10 +131,10 @@
   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;

package/src/inputs/_BottomSheet.less

@@ -3,98 +3,84 @@
   z-index: 1060;
 }
 
-.np-bottom-sheet-v2-backdrop-container {
-  &--enter, &--leave {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-
-  &--enter-from, &--leave-to {
-    opacity: 0;
-  }
-}
-
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+
+  &--closed {
+    opacity: 0;
+  }
 }
 
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: var(--size-8);
+  margin-right: var(--size-8);
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: var(--size-8);
-  padding-right: var(--size-8);
-  padding-top: var(--size-64);
 }
 
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
 
-  &--enter, &--leave {
+  @media (prefers-reduced-motion: no-preference) {
     transition-property: transform;
     transition-timing-function: ease-out;
     transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        transition-property: opacity;
-      }
+    &--closed {
+      transform: translateY(100%);
     }
   }
 
-  &--enter-from, &--leave-to {
-    @media (prefers-reduced-motion: no-preference) {
-      & {
-        transform: translateY(100%);
-      }
-    }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        opacity: 0;
-      }
+    &--closed {
+      opacity: 0;
     }
   }
 }
 
-.np-bottom-sheet-v2-content-inner-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
-  background-color: var(--color-background-elevated);
-  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-
-  &:focus {
-    outline: none;
-  }
-}
-
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: var(--size-16);
 }
 
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 
   &--has-title {
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
   }
 
   &--padding-md {
     padding: var(--size-16);
+    padding-top: 0px;
   }
 }
 

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

@@ -1484,53 +1484,6 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.form-group label > .np-select-option {
-  margin-bottom: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
@@ -2447,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;
@@ -2516,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;
@@ -2586,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;

package/src/main.less

@@ -13,7 +13,6 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
-@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/ssr.spec.js

@@ -226,7 +226,6 @@ describe('Server side rendering', () => {
       DateLookup: { value: new Date() },
       Link: { size: 16 },
       Tooltip: { children: <>yo</> },
-      SelectOption: { placeholder: { media: <img alt="img" /> } },
     };
 
     const { Provider } = exposedLibraryItems;

package/build/styles/selectOption/SelectOption.css

@@ -1,47 +0,0 @@
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.form-group label > .np-select-option {
-  margin-bottom: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}