@transferwise/components 46.29.2 → 46.30.0

package/build/index.mjs

@@ -450,7 +450,7 @@ const Chevron = ({
 }) => {
   const classNameValue = classNames('tw-chevron', {
     'chevron-color': !disabled
-  }, `${orientation}`.toLowerCase(), className);
+  }, orientation, className);
   if (size === Size.EXTRA_SMALL) {
     return /*#__PURE__*/jsx(ExtraSmallChevron, {
       className: classNameValue
@@ -782,18 +782,17 @@ function Title({
   const mapping = titleTypeMapping[type];
   const isTypeSupported = mapping !== undefined;
   if (isTypeSupported) {
-    const HeaderTag = as ?? `${mapping}`;
+    const HeaderTag = as ?? mapping;
     return /*#__PURE__*/jsx(HeaderTag, {
       ...props,
       className: classNames(`np-text-${type}`, className)
     });
-  } else {
-    const HeaderTag = as ?? `${titleTypeMapping[DEFAULT_TYPE]}`;
-    return /*#__PURE__*/jsx(HeaderTag, {
-      ...props,
-      className: classNames(`np-text-${DEFAULT_TYPE}`, className)
-    });
   }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return /*#__PURE__*/jsx(HeaderTag, {
+    ...props,
+    className: classNames(`np-text-${DEFAULT_TYPE}`, className)
+  });
 }
 
 function logActionRequired(message) {
@@ -6171,9 +6170,21 @@ function SelectInput({
   className,
   onFilterChange = noop,
   onChange,
+  onClose,
   onClear
 }) {
   const [open, setOpen] = useState(false);
+  const initialized = useRef(false);
+  const handleClose = useEffectEvent(onClose ?? (() => {}));
+  useEffect(() => {
+    if (initialized.current) {
+      if (!open) {
+        handleClose?.();
+      }
+    } else {
+      initialized.current = true;
+    }
+  }, [handleClose, open]);
   const [filterQuery, _setFilterQuery] = useState('');
   const setFilterQuery = useEffectEvent(query => {
     _setFilterQuery(query);
@@ -6650,7 +6661,7 @@ const ListItem = ({
       'p-x-2': !isContainerAligned
     }),
     ...rest,
-    children: [media ? media : null, /*#__PURE__*/jsxs("div", {
+    children: [media, /*#__PURE__*/jsxs("div", {
       className: classNames('d-flex flex-column', {
         'p-l-2': !!media,
         'p-r-2': !!action
@@ -7165,7 +7176,7 @@ const getLocalStorage = () => {
     if (storageItem) {
       const storage = JSON.parse(storageItem);
       if (Array.isArray(storage)) {
-        return storage;
+        return storage.map(item => String(item));
       }
     }
     // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
@@ -7191,7 +7202,7 @@ const Nudge = ({
     const dismissedNudgesStorage = getLocalStorage();
     if (persistDismissal && id) {
       try {
-        localStorage.setItem(STORAGE_NAME, JSON.stringify([...(dismissedNudgesStorage ? dismissedNudgesStorage : []), id]));
+        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
         // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
       } catch (error) {}
       setIsDismissed(true);
@@ -7204,7 +7215,7 @@ const Nudge = ({
     if (persistDismissal && id) {
       const dismissedNudgesStorage = getLocalStorage();
       let isDismissed = false;
-      if (dismissedNudgesStorage && dismissedNudgesStorage.find(item => item === id)) {
+      if (dismissedNudgesStorage?.find(item => item === id)) {
         setIsDismissed(true);
         isDismissed = true;
       }
@@ -8964,9 +8975,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     'np-Card--promoCard': true,
     'np-Card--checked': !href && type,
     'np-Card--link': href && !type,
-    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-    [`${className || ''}`]: className
-  });
+    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
+  }, className);
   // Object with common props that will be passed to the `Card` components
   const commonProps = {
     className: commonClasses,
@@ -9086,18 +9096,17 @@ const PromoCardGroup = ({
     };
     return {
       state,
-      isDisabled: isDisabled,
+      isDisabled,
       onChange: handleOnChange
     };
   }, [state, isDisabled, onChange]);
   const commonClasses = classNames({
     'np-CardGroup': true,
-    'is-disabled': isDisabled,
-    [`${className || ''}`]: className
-  });
+    'is-disabled': isDisabled
+  }, className);
   const commonProps = {
     className: commonClasses,
-    id: id,
+    id,
     'data-testid': testId,
     role: containerRole // Add the role attribute here
   };