@transferwise/components 46.1.0 → 46.2.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(() => {
@@ -7055,7 +7077,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 +7088,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 +7127,7 @@ function SelectInputOptions({
           },
           children: renderFooter({
             resultsEmpty,
-            normalizedQuery: needle
+            queryNormalized: needle
           })
         })
       }) : null]
@@ -8120,7 +8139,11 @@ class MoneyInput extends React.Component {
           disabled: disabled,
           size: size,
           onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
+          onFilterChange: ({
+            queryNormalized
+          }) => {
+            this.handleSearchChange(queryNormalized ?? '');
+          },
           ...selectProps
         })
       })]
@@ -10613,7 +10636,6 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-// Option.tsx NEW
 function Option$1({
   label,
   currency = '',
@@ -10626,13 +10648,12 @@ function Option$1({
   const {
     isModern
   } = componentsTheming.useTheme();
-  const style = classes => classes.map(className => classNames[className] || className).join(' ');
-  const currencyClassNames = currency ? style(['currency-flag', `currency-flag-${currency.toLowerCase()}`]) : undefined;
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24,
     className: 'tw-icon'
-  }) : currency && /*#__PURE__*/jsxRuntime.jsx("i", {
-    className: currencyClassNames
+  }) : currency && /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
+    code: currency.toLowerCase(),
+    intrinsicSize: 24
   });
   const titleAndNoteElement = /*#__PURE__*/jsxRuntime.jsxs(Body, {
     as: "span",
@@ -12505,7 +12526,7 @@ TypeaheadInput.defaultProps = {
   selected: []
 };
 
-function hightlight(value, query) {
+function highlight(value, query) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
@@ -12545,13 +12566,13 @@ const Option = props => {
       tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        children: hightlight(label, query)
+        children: highlight(label, query)
       }), note && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "np-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "np-text-body-default text-ellipsis",
-        children: hightlight(secondary, query)
+        children: highlight(secondary, query)
       })]
     })
   });