@transferwise/components 0.0.0-experimental-05a786f → 0.0.0-experimental-278276c

package/build/index.esm.js

@@ -13,11 +13,11 @@ import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
 import { FocusScope } from '@react-aria/focus';
 import mergeRefs from 'react-merge-refs';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
 import { Illustration } from '@wise/art';
@@ -158,6 +158,7 @@ var Priority;
 
 var Breakpoint;
 (function (Breakpoint) {
+  Breakpoint[Breakpoint["ZOOM_400"] = 320] = "ZOOM_400";
   Breakpoint[Breakpoint["EXTRA_SMALL"] = 480] = "EXTRA_SMALL";
   Breakpoint[Breakpoint["SMALL"] = 576] = "SMALL";
   Breakpoint[Breakpoint["MEDIUM"] = 768] = "MEDIUM";
@@ -1706,58 +1707,6 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const EXIT_ANIMATION = 350;
-const SlidingPanel = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  open,
-  position,
-  showSlidingPanelBorder,
-  slidingPanelPositionFixed,
-  ...rest
-}, reference) => {
-  /** @type {RefObject<HTMLDivElement>} */
-  const localReference = useRef(null);
-  return /*#__PURE__*/jsx(CSSTransition, {
-    ...rest,
-    nodeRef: localReference,
-    in: open
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: classNames(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
-      'sliding-panel--fixed': slidingPanelPositionFixed
-    }, 'sliding-panel'),
-    appear: true,
-    unmountOnExit: true,
-    children: /*#__PURE__*/jsx("div", {
-      ref: mergeRefs([reference, localReference]),
-      className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
-      children: children
-    })
-  });
-});
-SlidingPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes.bool,
-  slidingPanelPositionFixed: PropTypes.bool
-};
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false
-};
-var SlidingPanel$1 = SlidingPanel;
-
 const THROTTLE_MS = 100;
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const useClientWidth = ({
@@ -1928,6 +1877,137 @@ const useLayout = () => {
   };
 };
 
+const EXIT_ANIMATION = 350;
+const SlidingPanel = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  open,
+  position,
+  showSlidingPanelBorder,
+  slidingPanelPositionFixed,
+  ...rest
+}, reference) => {
+  /** @type {RefObject<HTMLDivElement>} */
+  const localReference = useRef(null);
+  return /*#__PURE__*/jsx(CSSTransition, {
+    ...rest,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: classNames(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
+      'sliding-panel--fixed': slidingPanelPositionFixed
+    }, 'sliding-panel'),
+    appear: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/jsx("div", {
+      ref: mergeRefs([reference, localReference]),
+      className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
+      children: children
+    })
+  });
+});
+SlidingPanel.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  open: PropTypes.bool,
+  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  showSlidingPanelBorder: PropTypes.bool,
+  slidingPanelPositionFixed: PropTypes.bool
+};
+SlidingPanel.defaultProps = {
+  children: null,
+  className: undefined,
+  open: false,
+  position: 'left',
+  showSlidingPanelBorder: false,
+  slidingPanelPositionFixed: false
+};
+var SlidingPanel$1 = SlidingPanel;
+
+const Drawer = ({
+  children,
+  className,
+  footerContent,
+  headerTitle,
+  onClose,
+  open,
+  position
+}) => {
+  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
+  const {
+    isMobile
+  } = useLayout();
+  return /*#__PURE__*/jsx(Dimmer$1, {
+    open: open,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(SlidingPanel$1, {
+      open: open,
+      position: isMobile ? Position.BOTTOM : position,
+      children: /*#__PURE__*/jsxs("div", {
+        className: classNames('np-drawer', className),
+        role: "dialog",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: classNames('np-drawer-header', {
+            'np-drawer-header--withborder': headerTitle
+          }),
+          children: [headerTitle && /*#__PURE__*/jsx(Title, {
+            type: Typography.TITLE_BODY,
+            children: headerTitle
+          }), /*#__PURE__*/jsx(CloseButton, {
+            onClick: onClose
+          })]
+        }), children && /*#__PURE__*/jsx("div", {
+          className: classNames('np-drawer-content'),
+          children: children
+        }), footerContent && /*#__PURE__*/jsx("div", {
+          className: classNames('np-drawer-footer'),
+          children: footerContent
+        })]
+      })
+    })
+  });
+};
+Drawer.propTypes = {
+  /** The content to appear in the drawer body. */
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /** The content to appear in the drawer footer. */
+  footerContent: PropTypes.node,
+  /** The content to appear in the drawer header. */
+  headerTitle: PropTypes.node,
+  /** The action to perform on close click. */
+  onClose: PropTypes.func,
+  /** The status of Drawer either open or not. */
+  open: PropTypes.bool,
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position: PropTypes.oneOf(['left', 'right', 'bottom'])
+};
+Drawer.defaultProps = {
+  children: null,
+  className: undefined,
+  footerContent: null,
+  headerTitle: null,
+  onClose: null,
+  open: false,
+  position: Position.RIGHT
+};
+var Drawer$1 = Drawer;
+
+function useMedia(query) {
+  return useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -2055,7 +2135,13 @@ const BottomSheet$1 = props => {
       maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
     };
   }
-  return /*#__PURE__*/jsx(Dimmer$1, {
+  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  return is400Zoom ? /*#__PURE__*/jsx(Drawer$1, {
+    open: props.open,
+    className: props.className,
+    onClose: close,
+    children: props.children
+  }) : /*#__PURE__*/jsx(Dimmer$1, {
     open: props.open,
     fadeContentOnEnter: true,
     fadeContentOnExit: true,
@@ -3282,7 +3368,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var dateTriggerMessages = defineMessages({
+var messages$6 = defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3345,7 +3431,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(dateTriggerMessages.ariaLabel),
+          "aria-label": formatMessage(messages$6.ariaLabel),
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3375,7 +3461,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$6 = defineMessages({
+var messages$5 = defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3411,14 +3497,17 @@ const DateHeader = ({
   dateMode
 }) => {
   const intl = useIntl();
+  const {
+    isMobile
+  } = useLayout();
   return /*#__PURE__*/jsxs("div", {
-    className: "text-xs-center p-t-1 p-b-2 clearfix",
+    className: classNames('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
     children: [/*#__PURE__*/jsx("div", {
       className: "pull-left-single-direction",
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${intl.formatMessage(messages$6.previous)} ${dateMode}`,
+        "aria-label": `${intl.formatMessage(messages$5.previous)} ${dateMode}`,
         onClick: onPreviousClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.LEFT,
@@ -3432,7 +3521,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `tw-date-lookup-header-current ${buttonClasses}`,
-        "aria-label": intl.formatMessage(messages$6.goTo20YearView),
+        "aria-label": intl.formatMessage(messages$5.goTo20YearView),
         onClick: onLabelClick,
         children: label
       })
@@ -3441,7 +3530,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${useIntl().formatMessage(messages$6.next)} ${dateMode}`,
+        "aria-label": `${useIntl().formatMessage(messages$5.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.RIGHT,
@@ -3485,7 +3574,7 @@ class TableLink extends PureComponent {
   };
   calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
     if (active) {
-      return `${longTitle || title}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
+      return `${longTitle || title}, ${formatMessage(messages$5.selected)} ${formatMessage(messages$5[type])}`;
     }
     return longTitle || title;
   };
@@ -3708,7 +3797,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$6.month),
+        dateMode: formatMessage(messages$5.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3836,7 +3925,7 @@ class MonthCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.year),
+        dateMode: formatMessage(messages$5.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3961,7 +4050,7 @@ class YearCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.twentyYears),
+        dateMode: formatMessage(messages$5.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -4008,7 +4097,8 @@ class DateLookup extends PureComponent {
       viewMonth: (props.value || new Date()).getMonth(),
       viewYear: (props.value || new Date()).getFullYear(),
       open: false,
-      mode: MODE.DAY
+      mode: MODE.DAY,
+      isMobile: false
     };
   }
   static getDerivedStateFromProps(props, state) {
@@ -4043,6 +4133,10 @@ class DateLookup extends PureComponent {
     if (+this.props.value !== +previousProps.value && this.state.open) {
       this.focusOn('.active');
     }
+    this.mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
+    this.setState({
+      isMobile: this.mediaQuery.matches
+    });
   }
   componentWillUnmount() {
     // Prevents memory leak by cleaning state.
@@ -4175,14 +4269,17 @@ class DateLookup extends PureComponent {
       max,
       viewMonth,
       viewYear,
-      mode
+      mode,
+      isMobile
     } = this.state;
     const {
       placeholder,
       monthFormat
     } = this.props;
     return /*#__PURE__*/jsxs("div", {
-      className: "p-a-1",
+      className: classNames({
+        'p-a-1': !isMobile
+      }),
       children: [mode === MODE.DAY && /*#__PURE__*/jsx(DayCalendar$1, {
         selectedDate,
         min,
@@ -4690,75 +4787,6 @@ function Display({
   });
 }
 
-const Drawer = ({
-  children,
-  className,
-  footerContent,
-  headerTitle,
-  onClose,
-  open,
-  position
-}) => {
-  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
-  const {
-    isMobile
-  } = useLayout();
-  return /*#__PURE__*/jsx(Dimmer$1, {
-    open: open,
-    onClose: onClose,
-    children: /*#__PURE__*/jsx(SlidingPanel$1, {
-      open: open,
-      position: isMobile ? Position.BOTTOM : position,
-      children: /*#__PURE__*/jsxs("div", {
-        className: classNames('np-drawer', className),
-        role: "dialog",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: classNames('np-drawer-header', {
-            'np-drawer-header--withborder': headerTitle
-          }),
-          children: [headerTitle && /*#__PURE__*/jsx(Title, {
-            type: Typography.TITLE_BODY,
-            children: headerTitle
-          }), /*#__PURE__*/jsx(CloseButton, {
-            onClick: onClose
-          })]
-        }), children && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-content'),
-          children: children
-        }), footerContent && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-footer'),
-          children: footerContent
-        })]
-      })
-    })
-  });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes.node,
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
-  /** The status of Drawer either open or not. */
-  open: PropTypes.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom'])
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: Position.RIGHT
-};
-var Drawer$1 = Drawer;
-
 const DropFade = ({
   children,
   show
@@ -5659,7 +5687,7 @@ const Stepper = ({
   });
 };
 
-var messages$5 = defineMessages({
+var messages$4 = defineMessages({
   back: {
     id: "neptune.FlowNavigation.back"
   }
@@ -5739,7 +5767,7 @@ const FlowNavigation = ({
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep - 1,
-          "aria-label": intl.formatMessage(messages$5.back)
+          "aria-label": intl.formatMessage(messages$4.back)
         }),
         onClick: onGoBack
       }) : logo
@@ -5891,13 +5919,14 @@ const Modal = ({
 }) => {
   const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
   const {
-    isMobile
+    isMobile,
+    isMedium: isTablet
   } = useLayout();
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
-  return isMobile ? /*#__PURE__*/jsx(Drawer$1, {
+  return isMobile || isTablet ? /*#__PURE__*/jsx(Drawer$1, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -6320,16 +6349,6 @@ const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   });
 });
 
-function useMedia(query) {
-  return useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
 function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }
@@ -6354,12 +6373,6 @@ function wrapInFragment(value) {
   });
 }
 
-var messages$4 = defineMessages({
-  noResultsFound: {
-    id: "neptune.SelectInput.noResultsFound"
-  }
-});
-
 function PreventScroll() {
   usePreventScroll();
   return null;
@@ -6405,29 +6418,29 @@ function BottomSheet({
         theme: theme,
         screenMode: screenMode,
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsx(Transition, {
+        children: /*#__PURE__*/jsxs(Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
-          children: /*#__PURE__*/jsxs(FocusBoundary, {
-            children: [/*#__PURE__*/jsx(Transition.Child, {
-              enter: "np-bottom-sheet-v2-backdrop-container--enter",
-              enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-              leave: "np-bottom-sheet-v2-backdrop-container--leave",
-              leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-              children: /*#__PURE__*/jsx("div", {
-                className: "np-bottom-sheet-v2-backdrop"
-              })
-            }), /*#__PURE__*/jsx("div", {
-              className: "np-bottom-sheet-v2",
-              children: /*#__PURE__*/jsx(Transition.Child, {
-                className: "np-bottom-sheet-v2-content",
-                enter: "np-bottom-sheet-v2-content--enter",
-                enterFrom: "np-bottom-sheet-v2-content--enter-from",
-                leave: "np-bottom-sheet-v2-content--leave",
-                leaveTo: "np-bottom-sheet-v2-content--leave-to",
+          children: [/*#__PURE__*/jsx(Transition.Child, {
+            enter: "np-bottom-sheet-v2-backdrop-container--enter",
+            enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+            leave: "np-bottom-sheet-v2-backdrop-container--leave",
+            leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+            children: /*#__PURE__*/jsx("div", {
+              className: "np-bottom-sheet-v2-backdrop"
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsx(Transition.Child, {
+              className: "np-bottom-sheet-v2-content",
+              enter: "np-bottom-sheet-v2-content--enter",
+              enterFrom: "np-bottom-sheet-v2-content--enter-from",
+              leave: "np-bottom-sheet-v2-content--leave",
+              leaveTo: "np-bottom-sheet-v2-content--leave-to",
+              children: /*#__PURE__*/jsx(FocusBoundary, {
                 children: /*#__PURE__*/jsx(FloatingFocusManager, {
                   context: context,
                   initialFocus: initialFocusRef,
@@ -6461,8 +6474,8 @@ function BottomSheet({
                   }, floatingKey)
                 })
               })
-            })]
-          })
+            })
+          })]
         })
       })
     })]
@@ -6613,14 +6626,14 @@ function useSelectInputItemCheckPadding() {
 const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
 const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
-  if (!existingValues.has(item.value)) {
-    existingValues.add(item.value);
-    return item;
+  if (existingValues.has(item.value)) {
+    return {
+      ...item,
+      value: undefined
+    };
   }
-  return {
-    ...item,
-    value: undefined
-  };
+  existingValues.add(item.value);
+  return item;
 }
 function dedupeSelectInputItems(items) {
   const existingValues = new Set();
@@ -6641,24 +6654,6 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
-function filterSelectInputOptionItem(item, needle) {
-  return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
-}
-function filterSelectInputItems(items, needle) {
-  return items.filter(item => {
-    switch (item.type) {
-      case 'option':
-        {
-          return filterSelectInputOptionItem(item, needle);
-        }
-      case 'group':
-        {
-          return item.options.some(option => filterSelectInputOptionItem(option, needle));
-        }
-    }
-    return false;
-  });
-}
 const defaultRenderTrigger = ({
   content,
   placeholderShown,
@@ -6706,7 +6701,7 @@ function SelectInputClearButton({
   const intl = useIntl();
   return /*#__PURE__*/jsx("button", {
     type: "button",
-    "aria-label": intl.formatMessage(dateTriggerMessages.ariaLabel),
+    "aria-label": intl.formatMessage(messages$6.ariaLabel),
     className: classNames(className, 'np-select-input-addon np-select-input-addon--interactive'),
     onClick: onClick,
     children: /*#__PURE__*/jsx(Cross, {
@@ -6847,14 +6842,9 @@ const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInput
       ref: ref,
       onKeyDown: event => {
         // Prevent absorbing dismissal requests too early
-        if (event.key === 'Escape') {
-          return;
-        }
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
-          return;
+        if (event.key !== 'Escape') {
+          onKeyDown?.(event);
         }
-        onKeyDown?.(event);
       },
       ...restProps
     })
@@ -6868,8 +6858,6 @@ function SelectInputOptions({
   searchInputRef,
   listboxRef
 }) {
-  const intl = useIntl();
-  const controllerRef = filterable ? searchInputRef : listboxRef;
   const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
@@ -6877,16 +6865,14 @@ function SelectInputOptions({
     }
     return undefined;
   }, [filterable, query]);
-  const empty = needle != null && filterSelectInputItems(items, needle).length === 0;
   const listboxContainerRef = useRef(null);
   useEffect(() => {
     if (listboxContainerRef.current != null) {
       listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
     }
   }, []);
-  const showStatus = empty;
-  const statusId = useId();
   const listboxId = useId();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
   return /*#__PURE__*/jsxs(Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -6908,7 +6894,6 @@ function SelectInputOptions({
         placeholder: filterPlaceholder,
         value: query,
         "aria-controls": listboxId,
-        "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
           // Prevent interfering with the matcher of Headless UI
           // https://mathiasbynens.be/notes/javascript-unicode#regex
@@ -6920,31 +6905,24 @@ function SelectInputOptions({
           setQuery(event.currentTarget.value);
         }
       })
-    }) : null, /*#__PURE__*/jsxs("div", {
+    }) : null, /*#__PURE__*/jsx("div", {
       ref: listboxContainerRef,
       className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      children: [empty ? /*#__PURE__*/jsxs("div", {
-        id: statusId,
-        className: "np-select-input-options-status",
-        children: [/*#__PURE__*/jsx(CrossCircle, {
-          size: 16,
-          className: "np-select-input-options-status-icon"
-        }), intl.formatMessage(messages$4.noResultsFound)]
-      }) : null, /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx("div", {
         ref: listboxRef,
         id: listboxId,
         role: "listbox",
         "aria-orientation": "vertical",
         tabIndex: 0,
         className: "np-select-input-listbox",
-        children: (needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => /*#__PURE__*/jsx(SelectInputItemView
+        children: (needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => /*#__PURE__*/jsx(SelectInputItemView
         // eslint-disable-next-line react/no-array-index-key
         , {
           item: item,
           renderValue: renderValue,
           needle: needle
         }, index))
-      })]
+      })
     })]
   });
 }
@@ -6956,7 +6934,7 @@ function SelectInputItemView({
   switch (item.type) {
     case 'option':
       {
-        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+        if (item.value != null && (!needle || inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle)))) {
           return /*#__PURE__*/jsx(SelectInputOption, {
             value: item.value,
             disabled: item.disabled,
@@ -10731,7 +10709,6 @@ var en = {
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
-	"neptune.SelectInput.noResultsFound": "No results found",
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",