@transferwise/components 0.0.0-experimental-a087360 → 0.0.0-experimental-73ab65e

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

@@ -6,19 +6,23 @@ 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 justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
+      class="np-flow-header d-flex flex-wrap align-items-center np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
-      <div>
-        BackButton
-      </div>
       <div
-        class="m-x-1"
-        data-testid="activeLabel-1"
+        class="np-flow-header__left flex__item--8"
       >
-        AnimatedLabel
+        <div>
+          BackButton
+          <div
+            class="m-x-1"
+            data-testid="activeLabel-0"
+          >
+            AnimatedLabel
+          </div>
+        </div>
       </div>
       <div
-        class="d-flex align-items-center"
+        class="align-items-center d-flex np-flow-header__right justify-content-end flex__item--4 "
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -30,7 +34,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="m-x-1"
+          class="separator"
         />
         <button
           aria-label="Close"
@@ -118,16 +122,20 @@ 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 justify-content-between flex__item--12 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 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="d-flex align-items-center order-2"
+        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"
       >
         <div
           class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
@@ -139,7 +147,7 @@ exports[`FlowNavigation renders as expected 1`] = `
           </div>
         </div>
         <span
-          class="m-x-1"
+          class="separator"
         />
         <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{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)}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less

@@ -28,4 +28,10 @@
     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,6 +14,12 @@ 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');
@@ -22,33 +28,41 @@ describe('AnimatedLabel', () => {
 
   it('renders only one label with class out', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--out');
+    expect(container.querySelectorAll('.np-animated-label--out')).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])).not.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[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])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.labels[2])).toHaveClass('np-animated-label--out');
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    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');
+    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');
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.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[2])).not.toHaveClass('np-animated-label--in');
   });
 });

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

@@ -0,0 +1,22 @@
+import { select } from '@storybook/addon-knobs';
+
+import AnimatedLabel from './AnimatedLabel';
+
+export default {
+  component: AnimatedLabel,
+  title: 'Internal/AnimatedLabel',
+};
+
+export const Basic = () => {
+  const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  const activeLabel = select('active label', labels, 10);
+
+  return (
+    <div style={{ width: '120px' }} className="p-a-1">
+      <AnimatedLabel
+        labels={labels.map((element) => `label-${element}`)}
+        activeLabel={activeLabel}
+      />
+    </div>
+  );
+};

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -1,32 +1,41 @@
 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 }: AnimatedLabelProps) => {
+const AnimatedLabel = ({
+  activeLabel,
+  className,
+  labels,
+  'aria-label': ariaLabel,
+}: AnimatedLabelProps) => {
+  const numberLabels = labels.length - 1;
+
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
+    <div
+      aria-label={ariaLabel}
+      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
+    >
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
           <div
             key={nextLabel}
-            className={classNames('text-xs-center', {
-              'np-animated-label--in text-ellipsis': index === activeLabel,
+            className={classNames('text-xs-left', {
+              'np-animated-label--in': index === activeLabel,
+              'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels,
             })}
           >
             {label}
           </div>
         );
       })}
-    </Body>
+    </div>
   );
 };
 

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

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

package/src/flowNavigation/backButton/BackButton.js

@@ -2,23 +2,18 @@ import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-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>
+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>
 );
 
 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 { render } from '../../test-utils';
-import messages from '../FlowNavigation.messages';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
 
 import BackButton from '.';
 
@@ -7,7 +7,6 @@ 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,36 +2,29 @@
 
 exports[`BackButton renders as expected 1`] = `
 <div>
-  <div
-    class="tw-avatar tw-avatar--40 tw-avatar--icon"
+  <button
+    class="np-back-button align-items-center btn-unstyled className"
+    type="button"
   >
-    <div
-      class="tw-avatar__content"
+    <span
+      aria-hidden="true"
+      class="tw-icon tw-icon-arrow-left "
+      data-testid="arrow-left-icon"
+      role="presentation"
     >
-      <button
-        class="np-back-button btn-unstyled className"
-        type="button"
+      <svg
+        fill="currentColor"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
       >
-        <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>
+        <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>
 </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;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-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

@@ -169,6 +169,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={(normalizedQuery) =>
+          normalizedQuery != null && normalizedQuery.length === 3 ? (
+            <>
+              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,7 @@ 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?: (normalizedQuery: string | null | undefined) => React.ReactNode;
   renderTrigger?: (args: {
     content: React.ReactNode;
     placeholderShown: boolean;
@@ -211,6 +212,7 @@ export function SelectInput<T = string>({
   value: controlledValue,
   compareValues,
   renderValue = wrapInFragment,
+  renderFooter,
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
@@ -296,6 +298,7 @@ export function SelectInput<T = string>({
           <SelectInputOptions
             items={items}
             renderValue={renderValue}
+            renderFooter={renderFooter}
             filterable={filterable}
             filterPlaceholder={filterPlaceholder}
             searchInputRef={searchInputRef}
@@ -351,17 +354,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 +381,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 +392,7 @@ interface SelectInputOptionsProps<T = string>
 function SelectInputOptions<T = string>({
   items,
   renderValue = wrapInFragment,
+  renderFooter,
   filterable = false,
   filterPlaceholder,
   searchInputRef,
@@ -451,7 +463,7 @@ function SelectInputOptions<T = string>({
         </div>
       ) : null}
 
-      <div
+      <section
         ref={listboxContainerRef}
         className={classNames(
           'np-select-input-listbox-container',
@@ -471,7 +483,7 @@ function SelectInputOptions<T = string>({
           id={listboxId}
           role="listbox"
           aria-orientation="vertical"
-          tabIndex={0}
+          tabIndex={!filterable ? 0 : undefined}
           className="np-select-input-listbox"
         >
           {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
@@ -484,7 +496,23 @@ 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(needle)}
+            </div>
+          </footer>
+        ) : null}
+      </section>
     </ListboxBase.Options>
   );
 }
@@ -547,7 +575,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 {