@transferwise/components 46.1.0 → 46.2.0

package/README.md

@@ -10,17 +10,15 @@ This is the Neptune Web React component library. It uses [Neptune CSS](https://g
 
 Neptune Components are published to npm as [@transferwise/components](https://www.npmjs.com/package/@transferwise/components).
 
-Install `@transferwise/components` and its peer dependencies. **Note:** currency-flags is only required if you're using the [Money Input](https://transferwise.github.io/neptune-web/components/MoneyInput) or if you're using flags on the [Select](https://transferwise.github.io/neptune-web/components/Select).
-
 ```
 # pnpm
-pnpm install @transferwise/components react react-dom prop-types currency-flags
+pnpm install @transferwise/components react react-dom prop-types @wise/art
 
 # yarn
-yarn add @transferwise/components react react-dom prop-types currency-flags
+yarn add @transferwise/components react react-dom prop-types @wise/art
 
 # npm
-npm install @transferwise/components react react-dom prop-types currency-flags
+npm install @transferwise/components react react-dom prop-types @wise/art
 ```
 
 ```js

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(() => {
@@ -7021,7 +7043,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 +7054,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 +7093,7 @@ function SelectInputOptions({
           },
           children: renderFooter({
             resultsEmpty,
-            normalizedQuery: needle
+            queryNormalized: needle
           })
         })
       }) : null]
@@ -8086,7 +8105,11 @@ class MoneyInput extends Component {
           disabled: disabled,
           size: size,
           onChange: this.handleSelectChange,
-          onSearchChange: this.handleSearchChange,
+          onFilterChange: ({
+            queryNormalized
+          }) => {
+            this.handleSearchChange(queryNormalized ?? '');
+          },
           ...selectProps
         })
       })]
@@ -10579,7 +10602,6 @@ var messages$2 = defineMessages({
   }
 });
 
-// Option.tsx NEW
 function Option$1({
   label,
   currency = '',
@@ -10592,13 +10614,12 @@ function Option$1({
   const {
     isModern
   } = 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__*/cloneElement(icon, {
     size: 24,
     className: 'tw-icon'
-  }) : currency && /*#__PURE__*/jsx("i", {
-    className: currencyClassNames
+  }) : currency && /*#__PURE__*/jsx(Flag, {
+    code: currency.toLowerCase(),
+    intrinsicSize: 24
   });
   const titleAndNoteElement = /*#__PURE__*/jsxs(Body, {
     as: "span",
@@ -12471,7 +12492,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;
@@ -12511,13 +12532,13 @@ const Option = props => {
       tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsx("span", {
-        children: hightlight(label, query)
+        children: highlight(label, query)
       }), note && /*#__PURE__*/jsx("span", {
         className: "np-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsx("span", {
         className: "np-text-body-default text-ellipsis",
-        children: hightlight(secondary, query)
+        children: highlight(secondary, query)
       })]
     })
   });