@transferwise/components 46.1.1 → 46.3.0

package/build/index.esm.js

@@ -641,6 +641,7 @@ const AccordionItem = ({
   'aria-label': ariaLabel,
   id,
   title,
+  subtitle,
   content,
   onClick,
   open,
@@ -662,6 +663,7 @@ const AccordionItem = ({
       as: "button",
       media: iconElement,
       title: title,
+      content: subtitle,
       button: /*#__PURE__*/jsx(Chevron, {
         orientation: open ? Position.TOP : Position.BOTTOM,
         size: Size.MEDIUM
@@ -711,6 +713,7 @@ const Accordion = ({
     children: items.map((item, index) => /*#__PURE__*/jsx(AccordionItem, {
       open: itemsOpen[index],
       title: item.title,
+      subtitle: item.subtitle,
       content: item.content,
       icon: item.icon,
       onClick: () => handleOnClick(index)
@@ -6477,7 +6480,8 @@ function BottomSheet({
   initialFocusRef,
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6516,6 +6520,7 @@ function BottomSheet({
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
+          afterLeave: onCloseEnd,
           children: /*#__PURE__*/jsxs(FocusBoundary, {
             children: [/*#__PURE__*/jsx(Transition.Child, {
               enter: "np-bottom-sheet-v2-backdrop-container--enter",
@@ -6606,7 +6611,8 @@ function Popover({
   size: size$1 = 'md',
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6663,6 +6669,7 @@ function Popover({
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
+          afterLeave: onCloseEnd,
           children: /*#__PURE__*/jsx(FocusBoundary, {
             children: /*#__PURE__*/jsx(FloatingFocusManager, {
               context: context,
@@ -6816,6 +6823,7 @@ function SelectInputClearButton({
     })
   });
 }
+const noop = () => {};
 function SelectInput({
   name,
   placeholder,
@@ -6831,11 +6839,19 @@ function SelectInput({
   disabled,
   size = 'md',
   className,
+  onFilterChange = noop,
   onChange,
-  onSearchChange,
   onClear
 }) {
   const [open, setOpen] = useState(false);
+  const [filterQuery, _setFilterQuery] = useState('');
+  const setFilterQuery = useEffectEvent(query => {
+    _setFilterQuery(query);
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null
+    });
+  });
   const triggerRef = useRef(null);
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const OptionsOverlay = screenSm ? Popover : BottomSheet;
@@ -6902,6 +6918,11 @@ function SelectInput({
       onClose: () => {
         setOpen(false);
       },
+      onCloseEnd: () => {
+        if (filterQuery !== '') {
+          setFilterQuery('');
+        }
+      },
       children: /*#__PURE__*/jsx(SelectInputOptions, {
         items: items,
         renderValue: renderValue,
@@ -6910,7 +6931,8 @@ function SelectInput({
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
         listboxRef: listboxRef,
-        onSearchChange: onSearchChange
+        filterQuery: filterQuery,
+        onFilterChange: setFilterQuery
       })
     })
   });
@@ -6981,17 +7003,17 @@ function SelectInputOptions({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  onSearchChange
+  filterQuery,
+  onFilterChange
 }) {
   const intl = useIntl();
   const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [query, setQuery] = useState('');
   const needle = 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 = useRef(null);
   useEffect(() => {
@@ -7012,6 +7034,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
+            }));
+          }
         }
       }
     },
@@ -7021,7 +7050,7 @@ function SelectInputOptions({
         ref: searchInputRef,
         shape: "rectangle",
         placeholder: filterPlaceholder,
-        value: query,
+        value: filterQuery,
         "aria-controls": listboxId,
         "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
@@ -7032,10 +7061,7 @@ function SelectInputOptions({
           }
         },
         onChange: event => {
-          setQuery(event.currentTarget.value);
-          if (onSearchChange) {
-            onSearchChange(event.currentTarget.value);
-          }
+          onFilterChange(event.currentTarget.value);
         }
       })
     }) : null, /*#__PURE__*/jsxs("section", {
@@ -7074,7 +7100,7 @@ function SelectInputOptions({
           },
           children: renderFooter({
             resultsEmpty,
-            normalizedQuery: needle
+            queryNormalized: needle
           })
         })
       }) : null]
@@ -8086,7 +8112,11 @@ class MoneyInput extends Component {
           disabled: disabled,
           size: size,
           onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
+          onFilterChange: ({
+            queryNormalized
+          }) => {
+            this.handleSearchChange(queryNormalized ?? '');
+          },
           ...selectProps
         })
       })]