@transferwise/components 0.0.0-experimental-7b0ccd5 → 0.0.0-experimental-ded76ff

package/build/i18n/en.json

@@ -18,6 +18,7 @@
   "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",

package/build/index.esm.js

@@ -3378,7 +3378,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$6 = defineMessages({
+var dateTriggerMessages = defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3441,7 +3441,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$6.ariaLabel),
+          "aria-label": formatMessage(dateTriggerMessages.ariaLabel),
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3471,7 +3471,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3517,7 +3517,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${intl.formatMessage(messages$5.previous)} ${dateMode}`,
+        "aria-label": `${intl.formatMessage(messages$6.previous)} ${dateMode}`,
         onClick: onPreviousClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.LEFT,
@@ -3531,7 +3531,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `tw-date-lookup-header-current ${buttonClasses}`,
-        "aria-label": intl.formatMessage(messages$5.goTo20YearView),
+        "aria-label": intl.formatMessage(messages$6.goTo20YearView),
         onClick: onLabelClick,
         children: label
       })
@@ -3540,7 +3540,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${useIntl().formatMessage(messages$5.next)} ${dateMode}`,
+        "aria-label": `${useIntl().formatMessage(messages$6.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsx(Chevron$1, {
           orientation: Position.RIGHT,
@@ -3584,7 +3584,7 @@ class TableLink extends PureComponent {
   };
   calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
     if (active) {
-      return `${longTitle || title}, ${formatMessage(messages$5.selected)} ${formatMessage(messages$5[type])}`;
+      return `${longTitle || title}, ${formatMessage(messages$6.selected)} ${formatMessage(messages$6[type])}`;
     }
     return longTitle || title;
   };
@@ -3807,7 +3807,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$5.month),
+        dateMode: formatMessage(messages$6.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3935,7 +3935,7 @@ class MonthCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$5.year),
+        dateMode: formatMessage(messages$6.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -4060,7 +4060,7 @@ class YearCalendar extends PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$5.twentyYears),
+        dateMode: formatMessage(messages$6.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -5697,7 +5697,7 @@ const Stepper = ({
   });
 };
 
-var messages$4 = defineMessages({
+var messages$5 = defineMessages({
   back: {
     id: "neptune.FlowNavigation.back"
   }
@@ -5777,7 +5777,7 @@ const FlowNavigation = ({
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep - 1,
-          "aria-label": intl.formatMessage(messages$4.back)
+          "aria-label": intl.formatMessage(messages$5.back)
         }),
         onClick: onGoBack
       }) : logo
@@ -6383,6 +6383,12 @@ function wrapInFragment(value) {
   });
 }
 
+var messages$4 = defineMessages({
+  noResultsFound: {
+    id: "neptune.SelectInput.noResultsFound"
+  }
+});
+
 function PreventScroll() {
   usePreventScroll();
   return null;
@@ -6428,29 +6434,29 @@ function BottomSheet({
         theme: theme,
         screenMode: screenMode,
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsxs(Transition, {
+        children: /*#__PURE__*/jsx(Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
-          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__*/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(FloatingFocusManager, {
                   context: context,
                   initialFocus: initialFocusRef,
@@ -6484,8 +6490,8 @@ function BottomSheet({
                   }, floatingKey)
                 })
               })
-            })
-          })]
+            })]
+          })
         })
       })
     })]
@@ -6636,14 +6642,14 @@ function useSelectInputItemCheckPadding() {
 const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
 const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
-  if (existingValues.has(item.value)) {
-    return {
-      ...item,
-      value: undefined
-    };
+  if (!existingValues.has(item.value)) {
+    existingValues.add(item.value);
+    return item;
   }
-  existingValues.add(item.value);
-  return item;
+  return {
+    ...item,
+    value: undefined
+  };
 }
 function dedupeSelectInputItems(items) {
   const existingValues = new Set();
@@ -6664,6 +6670,24 @@ 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,
@@ -6711,7 +6735,7 @@ function SelectInputClearButton({
   const intl = useIntl();
   return /*#__PURE__*/jsx("button", {
     type: "button",
-    "aria-label": intl.formatMessage(messages$6.ariaLabel),
+    "aria-label": intl.formatMessage(dateTriggerMessages.ariaLabel),
     className: classNames(className, 'np-select-input-addon np-select-input-addon--interactive'),
     onClick: onClick,
     children: /*#__PURE__*/jsx(Cross, {
@@ -6852,9 +6876,14 @@ const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInput
       ref: ref,
       onKeyDown: event => {
         // Prevent absorbing dismissal requests too early
-        if (event.key !== 'Escape') {
-          onKeyDown?.(event);
+        if (event.key === 'Escape') {
+          return;
+        }
+        // Prevent confirmation close without an active item
+        if (event.key === 'Enter' && ariaActiveDescendant == null) {
+          return;
         }
+        onKeyDown?.(event);
       },
       ...restProps
     })
@@ -6868,6 +6897,8 @@ function SelectInputOptions({
   searchInputRef,
   listboxRef
 }) {
+  const intl = useIntl();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
   const [query, setQuery] = useState('');
   const needle = useMemo(() => {
     if (filterable) {
@@ -6875,14 +6906,16 @@ 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,
@@ -6904,6 +6937,7 @@ 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
@@ -6915,24 +6949,31 @@ function SelectInputOptions({
           setQuery(event.currentTarget.value);
         }
       })
-    }) : null, /*#__PURE__*/jsx("div", {
+    }) : null, /*#__PURE__*/jsxs("div", {
       ref: listboxContainerRef,
       className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      children: /*#__PURE__*/jsx("div", {
+      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", {
         ref: listboxRef,
         id: listboxId,
         role: "listbox",
         "aria-orientation": "vertical",
         tabIndex: 0,
         className: "np-select-input-listbox",
-        children: (needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => /*#__PURE__*/jsx(SelectInputItemView
+        children: (needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => /*#__PURE__*/jsx(SelectInputItemView
         // eslint-disable-next-line react/no-array-index-key
         , {
           item: item,
           renderValue: renderValue,
           needle: needle
         }, index))
-      })
+      })]
     })]
   });
 }
@@ -6944,7 +6985,7 @@ function SelectInputItemView({
   switch (item.type) {
     case 'option':
       {
-        if (item.value != null && (!needle || inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle)))) {
+        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
           return /*#__PURE__*/jsx(SelectInputOption, {
             value: item.value,
             disabled: item.disabled,
@@ -10719,6 +10760,7 @@ 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",