@transferwise/components 45.21.3 → 45.23.0

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);