@transferwise/components 45.21.2 → 45.22.0

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -6,23 +6,19 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
     class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
+      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
+      <div>
+        BackButton
+      </div>
       <div
-        class="np-flow-header__left flex__item--8"
+        class="m-x-1"
+        data-testid="activeLabel-1"
       >
-        <div>
-          BackButton
-          <div
-            class="m-x-1"
-            data-testid="activeLabel-0"
-          >
-            AnimatedLabel
-          </div>
-        </div>
+        AnimatedLabel
       </div>
       <div
-        class="align-items-center d-flex np-flow-header__right justify-content-end flex__item--4 "
+        class="d-flex align-items-center"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -34,7 +30,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="separator"
+          class="m-x-1"
         />
         <button
           aria-label="Close"
@@ -122,20 +118,16 @@ exports[`FlowNavigation renders as expected 1`] = `
     class="np-flow-navigation d-flex align-items-center justify-content-center p-y-3 np-flow-navigation--border-bottom"
   >
     <div
-      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
+      class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--sm np-flow-navigation--lg"
     >
+      <img
+        alt="logo"
+        height="24"
+        src="logo.svg"
+        width="138"
+      />
       <div
-        class="np-flow-header__left"
-      >
-        <img
-          alt="logo"
-          height="24"
-          src="logo.svg"
-          width="138"
-        />
-      </div>
-      <div
-        class="align-items-center d-flex np-flow-header__right justify-content-end order-2"
+        class="d-flex align-items-center order-2"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -147,7 +139,7 @@ exports[`FlowNavigation renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="separator"
+          class="m-x-1"
         />
         <button
           aria-label="Close"

package/src/flowNavigation/animatedLabel/AnimatedLabel.css

@@ -1 +1 @@
-.np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}.np-animated-label--out{position:relative;top:-24px;transform:translateX(8px)}
+.np-animated-label{height:24px;overflow:hidden;padding-top:1px;position:relative}.np-animated-label>*{height:0;opacity:0;position:absolute;transform:translateX(-8px);transition:all .3s ease-in}.np-animated-label--in{height:auto;opacity:1;position:relative;top:auto;transform:translateX(0);transition:all .3s ease-in .3s}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

@@ -28,10 +28,4 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
-
-  &--out {
-    position: relative;
-    top: -@label-height;
-    transform: translateX(@slide-length);
-  }
 }

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,12 +14,6 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('renders aria-label if provided', () => {
-    render(<AnimatedLabel {...props} aria-label="hello" />);
-    const checkbox = screen.getByLabelText('hello');
-    expect(checkbox).toBeInTheDocument();
-  });
-
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
@@ -28,41 +22,33 @@ describe('AnimatedLabel', () => {
 
   it('renders only one label with class out', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-    expect(container.querySelectorAll('.np-animated-label--out')).toHaveLength(1);
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
+    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-
     expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--out');
     expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
-
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--out');
+    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
     expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,41 +1,32 @@
 import classNames from 'classnames';
 import React from 'react';
 
+import Body from '../../body';
+import { Typography } from '../../common';
+
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
   labels: React.ReactNode[];
-  'aria-label': string;
 }
 
-const AnimatedLabel = ({
-  activeLabel,
-  className,
-  labels,
-  'aria-label': ariaLabel,
-}: AnimatedLabelProps) => {
-  const numberLabels = labels.length - 1;
-
+const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
   return (
-    <div
-      aria-label={ariaLabel}
-      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
-    >
+    <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
           <div
             key={nextLabel}
-            className={classNames('text-xs-left', {
-              'np-animated-label--in': index === activeLabel,
-              'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels,
+            className={classNames('text-xs-center', {
+              'np-animated-label--in text-ellipsis': index === activeLabel,
             })}
           >
             {label}
           </div>
         );
       })}
-    </div>
+    </Body>
   );
 };
 

package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap

@@ -3,20 +3,20 @@
 exports[`AnimatedLabel renders all labels 1`] = `
 <div>
   <div
-    class="np-animated-label np-text-body-large-bold"
+    class="np-text-body-large-bold np-animated-label"
   >
     <div
-      class="text-xs-left np-animated-label--in"
+      class="text-xs-center np-animated-label--in text-ellipsis"
     >
       label1
     </div>
     <div
-      class="text-xs-left np-animated-label--out"
+      class="text-xs-center"
     >
       label2
     </div>
     <div
-      class="text-xs-left"
+      class="text-xs-center"
     >
       label3
     </div>

package/src/flowNavigation/backButton/BackButton.js

@@ -2,18 +2,23 @@ import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-const BackButton = ({ label, className, onClick }) => (
-  <button
-    type="button"
-    className={classNames('np-back-button', 'align-items-center', 'btn-unstyled', className)}
-    onClick={onClick}
-  >
-    <ArrowLeftIcon size={24} />
-    {label}
-  </button>
+import Avatar, { AvatarType } from '../../avatar';
+
+const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
+  <Avatar type={AvatarType.ICON} size={40}>
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={classNames('np-back-button', 'btn-unstyled', className)}
+      onClick={onClick}
+    >
+      <ArrowLeftIcon size={24} />
+    </button>
+  </Avatar>
 );
 
 BackButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
   className: PropTypes.string,
   label: PropTypes.element,
   onClick: PropTypes.func,

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render } from '../../test-utils';
+import messages from '../FlowNavigation.messages';
 
 import BackButton from '.';
 
@@ -7,6 +7,7 @@ const props = {
   label: <>label</>,
   className: 'className',
   onClick: jest.fn(),
+  'aria-label': messages.back.defaultMessage,
 };
 describe('BackButton', () => {
   it(`renders as expected`, () => {

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -2,29 +2,36 @@
 
 exports[`BackButton renders as expected 1`] = `
 <div>
-  <button
-    class="np-back-button align-items-center btn-unstyled className"
-    type="button"
+  <div
+    class="tw-avatar tw-avatar--40 tw-avatar--icon"
   >
-    <span
-      aria-hidden="true"
-      class="tw-icon tw-icon-arrow-left "
-      data-testid="arrow-left-icon"
-      role="presentation"
+    <div
+      class="tw-avatar__content"
     >
-      <svg
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
+      <button
+        class="np-back-button btn-unstyled className"
+        type="button"
       >
-        <path
-          d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-        />
-      </svg>
-    </span>
-    label
-  </button>
+        <span
+          aria-hidden="true"
+          class="tw-icon tw-icon-arrow-left "
+          data-testid="arrow-left-icon"
+          role="presentation"
+        >
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;

package/src/inputs/SelectInput.css

@@ -1 +1 @@
-.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;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);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@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{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select: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:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--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-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;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-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
+.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.3s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;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);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@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{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;overflow:hidden;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8)}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{--ring-outline-offset:calc(var(--ring-outline-width)*-1);border-radius:10px;border-radius:var(--radius-small);padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-listbox:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select: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:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--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-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;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-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right: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{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}

package/src/inputs/SelectInput.less

@@ -42,13 +42,6 @@
   display: flex;
   flex-direction: column;
   padding: var(--size-8);
-  padding-top: 0px;
-
-  @media (--screen-sm) {
-    & {
-      padding-top: var(--size-8);
-    }
-  }
 }
 
 .np-select-input-listbox-container {
@@ -70,11 +63,11 @@
 }
 
 .np-select-input-listbox {
+  border-radius: var(--radius-small);
   padding: var(--size-8);
 
-  &:focus {
-    outline: none;
-  }
+  .focus-ring();
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
 
 .np-select-input-separator-item {
@@ -169,6 +162,10 @@
   }
 }
 
+.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);

package/src/inputs/SelectInput.spec.tsx

@@ -47,6 +47,46 @@ describe('SelectInput', () => {
     expect(screen.getByText('Currency')).toBeInTheDocument();
   });
 
+  it('renders footer', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+        renderFooter={({ normalizedQuery }) =>
+          normalizedQuery != null ? (
+            <>Showing results for ‘{normalizedQuery}’</>
+          ) : (
+            <>All items shown</>
+          )
+        }
+        filterable
+      />,
+    );
+
+    // eslint-disable-next-line @typescript-eslint/require-await
+    await act(async () => {
+      userEvent.tab();
+      userEvent.keyboard(specialChars.enter);
+    });
+
+    const footer = screen.getByText('All items shown');
+    expect(footer).toBeInTheDocument();
+
+    userEvent.keyboard('u');
+    expect(footer).toHaveTextContent(/‘u’$/);
+
+    userEvent.keyboard('r');
+    expect(footer).toHaveTextContent(/‘ur’$/);
+
+    userEvent.keyboard('x');
+    expect(footer).toHaveTextContent(/‘urx’$/);
+
+    userEvent.keyboard(specialChars.backspace);
+    expect(footer).toHaveTextContent(/‘ur’$/);
+  });
+
   it('shows item selected via mouse', async () => {
     render(
       <SelectInput

package/src/inputs/SelectInput.story.tsx

@@ -266,6 +266,24 @@ export const Currencies: StoryObj<{
             icon={<Flag code={currency.code} intrinsicSize={24} />}
           />
         )}
+        renderFooter={({ resultsEmpty, normalizedQuery }) =>
+          resultsEmpty && normalizedQuery != null && /^[a-z]{3}$/u.test(normalizedQuery) ? (
+            <>
+              It’s not possible use {normalizedQuery.toUpperCase()} yet.{' '}
+              <a href="#_" className="np-text-link-default">
+                Email me when it’s available.
+              </a>
+            </>
+          ) : (
+            <>
+              Can’t find it?{' '}
+              <a href="#_" className="np-text-link-default">
+                Request the currency you need,
+              </a>{' '}
+              and we’ll notify you once it’s available.
+            </>
+          )
+        }
         filterable
         filterPlaceholder="Type a currency / country"
         size="lg"

package/src/inputs/SelectInput.tsx

@@ -135,6 +135,10 @@ export interface SelectInputProps<T = string> {
     | (keyof NonNullable<T> & string)
     | ((a: T | undefined, b: T | undefined) => boolean);
   renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
+  renderFooter?: (args: {
+    resultsEmpty: boolean;
+    normalizedQuery: string | null | undefined;
+  }) => React.ReactNode;
   renderTrigger?: (args: {
     content: React.ReactNode;
     placeholderShown: boolean;
@@ -211,6 +215,7 @@ export function SelectInput<T = string>({
   value: controlledValue,
   compareValues,
   renderValue = wrapInFragment,
+  renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
@@ -296,6 +301,7 @@ export function SelectInput<T = string>({
           <SelectInputOptions
             items={items}
             renderValue={renderValue}
+            renderFooter={renderFooter}
             filterable={filterable}
             filterPlaceholder={filterPlaceholder}
             searchInputRef={searchInputRef}
@@ -351,17 +357,22 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
   }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       ref={ref}
+      role="none"
       onKeyDown={(event) => {
-        // Prevent absorbing dismissal requests too early
-        if (event.key === 'Escape') {
+        // Prevent confirmation close without an active item
+        if (event.key === 'Enter' && ariaActiveDescendant == null) {
           return;
         }
 
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
+        // Prevent absorbing actions early
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          onKeyDown?.({
+            ...event,
+            preventDefault: () => {},
+            stopPropagation: () => {},
+          });
           return;
         }
 
@@ -373,7 +384,10 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
 });
 
 interface SelectInputOptionsProps<T = string>
-  extends Pick<SelectInputProps<T>, 'items' | 'renderValue' | 'filterable' | 'filterPlaceholder'> {
+  extends Pick<
+    SelectInputProps<T>,
+    'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder'
+  > {
   searchInputRef: React.RefObject<HTMLInputElement>;
   listboxRef: React.RefObject<HTMLDivElement>;
 }
@@ -381,6 +395,7 @@ interface SelectInputOptionsProps<T = string>
 function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
+  renderFooter,
   filterable = false,
   filterPlaceholder,
   searchInputRef,
@@ -397,7 +412,7 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterable, query]);
-  const empty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -409,7 +424,7 @@ function SelectInputOptions<T = string>({
     }
   }, []);
 
-  const showStatus = empty;
+  const showStatus = resultsEmpty;
   const statusId = useId();
   const listboxId = useId();
 
@@ -451,7 +466,7 @@ function SelectInputOptions<T = string>({
         </div>
       ) : null}
 
-      <div
+      <section
         ref={listboxContainerRef}
         className={classNames(
           'np-select-input-listbox-container',
@@ -459,7 +474,7 @@ function SelectInputOptions<T = string>({
             'np-select-input-listbox-container--has-group',
         )}
       >
-        {empty ? (
+        {resultsEmpty ? (
           <div id={statusId} className="np-select-input-options-status">
             <CrossCircle size={16} className="np-select-input-options-status-icon" />
             {intl.formatMessage(messages.noResultsFound)}
@@ -484,7 +499,26 @@ function SelectInputOptions<T = string>({
             />
           ))}
         </div>
-      </div>
+
+        {renderFooter != null ? (
+          <footer className="np-select-input-footer">
+            <div
+              role="none"
+              onKeyDown={(event) => {
+                // Prevent interfering with Headless UI
+                if (event.key !== 'Escape') {
+                  event.stopPropagation();
+                }
+              }}
+            >
+              {renderFooter({
+                resultsEmpty,
+                normalizedQuery: needle,
+              })}
+            </div>
+          </footer>
+        ) : null}
+      </section>
     </ListboxBase.Options>
   );
 }
@@ -547,7 +581,7 @@ function SelectInputGroupItemView<T = string>({
       {needle == null ? (
         <header
           id={headerId}
-          role="presentation"
+          role="none"
           className="np-select-input-group-item-header np-text-title-group"
         >
           {item.label}

package/src/inputs/_BottomSheet.less

@@ -7,7 +7,7 @@
   &--enter, &--leave {
     transition-property: opacity;
     transition-timing-function: ease-out;
-    transition-duration: 150ms;
+    transition-duration: 300ms;
   }
 
   &--enter-from, &--leave-to {

package/src/inputs/_Popover.less

@@ -5,6 +5,7 @@
   width: var(--width);
   min-width: 20rem;
   flex-direction: column;
+  overflow: hidden;
   border-radius: var(--radius-small);
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);