@transferwise/components 46.1.1 → 46.3.0

package/build/index.js

@@ -675,6 +675,7 @@ const AccordionItem = ({
   'aria-label': ariaLabel,
   id,
   title,
+  subtitle,
   content,
   onClick,
   open,
@@ -696,6 +697,7 @@ const AccordionItem = ({
       as: "button",
       media: iconElement,
       title: title,
+      content: subtitle,
       button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: open ? exports.Position.TOP : exports.Position.BOTTOM,
         size: exports.Size.MEDIUM
@@ -745,6 +747,7 @@ const Accordion = ({
     children: items.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(AccordionItem, {
       open: itemsOpen[index],
       title: item.title,
+      subtitle: item.subtitle,
       content: item.content,
       icon: item.icon,
       onClick: () => handleOnClick(index)
@@ -6511,7 +6514,8 @@ function BottomSheet({
   initialFocusRef,
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6550,6 +6554,7 @@ function BottomSheet({
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
+          afterLeave: onCloseEnd,
           children: /*#__PURE__*/jsxRuntime.jsxs(FocusBoundary, {
             children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
               enter: "np-bottom-sheet-v2-backdrop-container--enter",
@@ -6640,7 +6645,8 @@ function Popover({
   size = 'md',
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6697,6 +6703,7 @@ function Popover({
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
+          afterLeave: onCloseEnd,
           children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
             children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
               context: context,
@@ -6850,6 +6857,7 @@ function SelectInputClearButton({
     })
   });
 }
+const noop = () => {};
 function SelectInput({
   name,
   placeholder,
@@ -6865,11 +6873,19 @@ function SelectInput({
   disabled,
   size = 'md',
   className,
+  onFilterChange = noop,
   onChange,
-  onSearchChange,
   onClear
 }) {
   const [open, setOpen] = React.useState(false);
+  const [filterQuery, _setFilterQuery] = React.useState('');
+  const setFilterQuery = useEffectEvent(query => {
+    _setFilterQuery(query);
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null
+    });
+  });
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize(exports.Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -6936,6 +6952,11 @@ function SelectInput({
       onClose: () => {
         setOpen(false);
       },
+      onCloseEnd: () => {
+        if (filterQuery !== '') {
+          setFilterQuery('');
+        }
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
         items: items,
         renderValue: renderValue,
@@ -6944,7 +6965,8 @@ function SelectInput({
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
         listboxRef: listboxRef,
-        onSearchChange: onSearchChange
+        filterQuery: filterQuery,
+        onFilterChange: setFilterQuery
       })
     })
   });
@@ -7015,17 +7037,17 @@ function SelectInputOptions({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  onSearchChange
+  filterQuery,
+  onFilterChange
 }) {
   const intl = reactIntl.useIntl();
   const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [query, setQuery] = React.useState('');
   const needle = React.useMemo(() => {
     if (filterable) {
-      return query ? searchableString(query) : null;
+      return filterQuery ? searchableString(filterQuery) : null;
     }
     return undefined;
-  }, [filterable, query]);
+  }, [filterQuery, filterable]);
   const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
   const listboxContainerRef = React.useRef(null);
   React.useEffect(() => {
@@ -7046,6 +7068,13 @@ function SelectInputOptions({
           controllerRef.current.setAttribute('aria-activedescendant', value);
         } else {
           controllerRef.current.removeAttribute('aria-activedescendant');
+          if (filterQuery) {
+            // Ensure having an active option while filtering
+            controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
+              key: 'Home',
+              bubbles: true
+            }));
+          }
         }
       }
     },
@@ -7055,7 +7084,7 @@ function SelectInputOptions({
         ref: searchInputRef,
         shape: "rectangle",
         placeholder: filterPlaceholder,
-        value: query,
+        value: filterQuery,
         "aria-controls": listboxId,
         "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
@@ -7066,10 +7095,7 @@ function SelectInputOptions({
           }
         },
         onChange: event => {
-          setQuery(event.currentTarget.value);
-          if (onSearchChange) {
-            onSearchChange(event.currentTarget.value);
-          }
+          onFilterChange(event.currentTarget.value);
         }
       })
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
@@ -7108,7 +7134,7 @@ function SelectInputOptions({
           },
           children: renderFooter({
             resultsEmpty,
-            normalizedQuery: needle
+            queryNormalized: needle
           })
         })
       }) : null]
@@ -8120,7 +8146,11 @@ class MoneyInput extends React.Component {
           disabled: disabled,
           size: size,
           onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
+          onFilterChange: ({
+            queryNormalized
+          }) => {
+            this.handleSearchChange(queryNormalized ?? '');
+          },
           ...selectProps
         })
       })]