@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-5cd0315

package/build/styles/main.css

@@ -3976,49 +3976,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  outline: none;
-}
-.np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}
-.np-select-input-option-container--disabled {
-  opacity: 0.45;
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.np-select-input-option {
-  flex: 1;
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
 }
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 }
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
+.np-select-input-options-container:focus {
+  outline: none;
 }
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
 }
 .np-select-input-options-status {
   display: flex;
@@ -4084,22 +4062,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-option-container {
   display: flex;
-  height: 100%;
-  flex-direction: column;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-select-input-options-container:focus {
+.np-select-input-option-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -4138,6 +4148,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -4149,21 +4163,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -4193,6 +4192,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}
 .np-text-area {
   min-height: 72px;
   min-height: var(--size-72);

package/build/types/inputs/{SelectInput/SelectInput.types.d.ts → SelectInput.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Merge } from '../../utils';
-import { ButtonProps } from '../../button/Button.types';
-import { WithInputAttributesProps } from '../contexts';
+import { Merge } from '../utils';
+import { WithInputAttributesProps } from './contexts';
+import { ButtonProps } from '../button/Button.types';
 export interface SelectInputOptionItem<T = string> {
     type: 'option';
     value: T;
@@ -87,21 +87,18 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
     onClose?: () => void;
     onClear?: () => void;
 }
+export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, parentId, name, multiple, placeholder, autocomplete, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, sortFilteredOptions, disabled, size, className, UNSAFE_triggerButtonProps, triggerRef: externalTriggerRef, onFilterChange, onChange, onOpen, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
     as?: T;
 }>;
+export declare function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({ as, ...restProps }: SelectInputTriggerButtonProps<T>): import("react").JSX.Element;
 export interface SelectInputOptionContentProps {
     title: string;
     note?: string;
     description?: string;
     icon?: React.ReactNode;
 }
-export interface SelectInputItemViewProps<T = string, I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
-    item: I;
-    needle: string | null | undefined;
-}
-export interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {
-}
+export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=SelectInput.types.d.ts.map
+//# sourceMappingURL=SelectInput.d.ts.map

package/build/types/inputs/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

package/build/types/inputs/SelectInput.messages.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bcfa03a",
+  "version": "0.0.0-experimental-5cd0315",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,8 +87,8 @@
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.26.1",
     "@wise/components-theming": "1.10.1",
+    "@transferwise/neptune-css": "14.26.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/inputs/{SelectInput/SelectInput.css → SelectInput.css}

@@ -148,49 +148,27 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  outline: none;
-}
-.np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}
-.np-select-input-option-container--disabled {
-  opacity: 0.45;
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.np-select-input-option {
-  flex: 1;
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
 }
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 }
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
+.np-select-input-options-container:focus {
+  outline: none;
 }
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
 }
 .np-select-input-options-status {
   display: flex;
@@ -256,22 +234,54 @@
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-option-container {
   display: flex;
-  height: 100%;
-  flex-direction: column;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-select-input-options-container:focus {
+.np-select-input-option-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -310,6 +320,10 @@
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -321,21 +335,6 @@
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -365,3 +364,9 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/{SelectInput/SelectInput.docs.mdx → SelectInput.docs.mdx}

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { MoneyInput } from '..';
 
 <Meta title="Forms/SelectInput/Accessibility" />
 

package/src/inputs/SelectInput.less

@@ -0,0 +1,219 @@
+@import "./_BottomSheet.less";
+@import "./_ButtonInput.less";
+@import "./_Popover.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-placeholder {
+  color: var(--color-content-tertiary);
+}
+
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (--screen-sm) {
+    & {
+      max-height: 28rem /* 448px */;
+    }
+  }
+}
+
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  padding: var(--size-8) var(--size-24) 0px;
+}
+
+.np-select-input-options-status-icon {
+  padding: 0 var(--size-4);
+  color: var(--color-content-tertiary);
+}
+
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-8);
+}
+
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+
+  @media (--screen-sm) {
+    & {
+      height: auto;
+    }
+  }
+
+  &--virtualized {
+    /* The wrapping element shrinks this as needed */
+    height: 100vh;
+  }
+
+  &--has-group {
+    scroll-padding-top: var(--size-32);
+  }
+}
+
+.np-select-input-listbox {
+  border-radius: var(--radius-small);
+  padding: var(--size-8);
+
+  .focus-ring();
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+
+  .np-select-input-listbox-container--virtualized & {
+    /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+    overflow-y: auto;
+    contain: strict;
+    height: 100%;
+  }
+}
+
+.np-select-input-separator-item {
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+
+.np-select-input-group-item {
+  &--without-needle:first-child {
+    margin-top: calc(-1 * var(--size-8));
+  }
+}
+
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: var(--color-background-elevated);
+}
+
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  column-gap: var(--size-8);
+  border-radius: var(--radius-small);
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+
+  &:focus {
+    outline: none;
+  }
+
+  &--active {
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  }
+
+  &--disabled {
+    opacity: 0.45;
+  }
+}
+
+.np-select-input-option-check {
+  &--not-selected {
+    visibility: hidden;
+  }
+}
+
+.np-select-input-option {
+  flex: 1;
+}
+
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  column-gap: var(--size-8);
+  color: var(--color-content-primary);
+}
+
+.np-select-input-option-content-icon {
+  display: flex;
+
+  &--not-within-trigger {
+    align-self: flex-start;
+  }
+}
+
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.np-select-input-option-content-text-secondary {
+  color: var(--color-content-secondary);
+}
+
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.np-select-input-option-content-text-line-1 {
+  > :not([hidden]) ~ :not([hidden]) {
+    margin-right: var(--size-8);
+    margin-left: var(--size-8);
+  }
+}
+
+.np-select-input-footer {
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
+
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-inline-start: var(--size-4);
+  }
+}
+
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+
+  display: inline-flex;
+  height: var(--size-24);
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */; /* TODO: Tokenize */
+
+  &--interactive {
+    pointer-events: auto;
+    color: var(--color-interactive-secondary);
+
+    &:hover {
+      color: var(--color-interactive-secondary-hover);
+    }
+
+    .focus-ring();
+  }
+}
+
+.np-select-input-addon-separator {
+  height: var(--size-24);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/src/inputs/{SelectInput/SelectInput.story.tsx → SelectInput.story.tsx}

@@ -5,19 +5,19 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../../button';
-import { getMonthNames } from '../../common/dateUtils';
-import Drawer from '../../drawer';
-import { Field } from '../../field/Field';
-import Modal from '../../modal';
-import { wait } from '../../test-utils/wait';
+import Button from '../button';
+import { getMonthNames } from '../common/dateUtils';
+import Drawer from '../drawer';
+import { Field } from '../field/Field';
+import Modal from '../modal';
+import { wait } from '../test-utils/wait';
 import {
   SelectInput,
   type SelectInputItem,
   SelectInputOptionContent,
   type SelectInputProps,
   SelectInputTriggerButton,
-} from '.';
+} from './SelectInput';
 
 const meta = {
   title: 'Forms/SelectInput',