@transferwise/components 0.0.0-experimental-b089b8c → 0.0.0-experimental-c5b4324

package/build/index.esm.js

@@ -6477,7 +6477,8 @@ function BottomSheet({
   initialFocusRef,
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6516,6 +6517,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 +6608,8 @@ function Popover({
   size: size$1 = 'md',
   padding = 'md',
   children,
-  onClose
+  onClose,
+  onCloseEnd
 }) {
   const {
     refs,
@@ -6663,6 +6666,7 @@ function Popover({
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
+          afterLeave: onCloseEnd,
           children: /*#__PURE__*/jsx(FocusBoundary, {
             children: /*#__PURE__*/jsx(FloatingFocusManager, {
               context: context,
@@ -6816,6 +6820,7 @@ function SelectInputClearButton({
     })
   });
 }
+const noop = () => {};
 function SelectInput({
   name,
   placeholder,
@@ -6831,11 +6836,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 +6915,11 @@ function SelectInput({
       onClose: () => {
         setOpen(false);
       },
+      onCloseEnd: () => {
+        if (filterQuery !== '') {
+          setFilterQuery('');
+        }
+      },
       children: /*#__PURE__*/jsx(SelectInputOptions, {
         items: items,
         renderValue: renderValue,
@@ -6910,7 +6928,8 @@ function SelectInput({
         filterPlaceholder: filterPlaceholder,
         searchInputRef: searchInputRef,
         listboxRef: listboxRef,
-        onSearchChange: onSearchChange
+        filterQuery: filterQuery,
+        onFilterChange: setFilterQuery
       })
     })
   });
@@ -6981,17 +7000,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(() => {
@@ -7021,7 +7040,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 +7051,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 +7090,7 @@ function SelectInputOptions({
           },
           children: renderFooter({
             resultsEmpty,
-            normalizedQuery: needle
+            queryNormalized: needle
           })
         })
       }) : null]
@@ -8086,7 +8102,11 @@ class MoneyInput extends Component {
           disabled: disabled,
           size: size,
           onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
+          onFilterChange: ({
+            queryNormalized
+          }) => {
+            this.handleSearchChange(queryNormalized ?? '');
+          },
           ...selectProps
         })
       })]