@transferwise/components 0.0.0-experimental-45ef85b → 0.0.0-experimental-cbe505a

package/build/types/selectOption/SelectOption.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    actionLabel: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=SelectOption.messages.d.ts.map

package/build/types/selectOption/SelectOption.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/build/types/selectOption/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SelectOption';
+export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';
+//# sourceMappingURL=index.d.ts.map

package/build/types/selectOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selectOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-45ef85b",
+  "version": "0.0.0-experimental-cbe505a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -16,6 +16,7 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     onClose,
     open = false,
     position = Position.BOTTOM,
+    anchorWidth = false,
   }: PanelProps,
   reference,
 ) {
@@ -35,6 +36,7 @@ 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,6 +23,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
+  "neptune.SelectOption.action.label": "Choose",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/index.ts

@@ -3,6 +3,7 @@
  */
 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';
@@ -86,6 +87,7 @@ 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,37 +2,67 @@
   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;
@@ -41,50 +71,30 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content:focus {
+.np-bottom-sheet-v2-content-inner-container: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: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto 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;
@@ -131,10 +141,10 @@
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/src/inputs/_BottomSheet.less

@@ -3,84 +3,98 @@
   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 {
-  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;
-  }
+  max-height: 100%;
 
-  @media (prefers-reduced-motion: no-preference) {
+  &--enter, &--leave {
     transition-property: transform;
     transition-timing-function: ease-out;
     transition-duration: 300ms;
 
-    &--closed {
-      transform: translateY(100%);
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        transition-property: opacity;
+      }
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
+  &--enter-from, &--leave-to {
+    @media (prefers-reduced-motion: no-preference) {
+      & {
+        transform: translateY(100%);
+      }
+    }
 
-    &--closed {
-      opacity: 0;
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        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: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
 
   &--has-title {
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
   }
 
   &--padding-md {
     padding: var(--size-16);
-    padding-top: 0px;
   }
 }
 

package/src/inputs/_BottomSheet.tsx

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

package/src/main.css

@@ -1484,6 +1484,48 @@ 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:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-select-option-placeholder:focus,
+.np-select-option-placeholder: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-section {
+  margin-top: 0 !important;
+}
+.has-error * .np-select-option {
+  --ring-outline-color: var(--color-sentiment-negative);
+  --ring-outline-offset: 0;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  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;
@@ -2400,37 +2442,67 @@ 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;
@@ -2439,50 +2511,30 @@ 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:focus {
+.np-bottom-sheet-v2-content-inner-container: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: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto 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;
@@ -2529,10 +2581,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: minmax(0, 1fr);
+  grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/src/main.less

@@ -13,6 +13,7 @@
 @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";