@transferwise/components 45.25.1 → 45.26.0

package/build/index.esm.js

@@ -7,19 +7,19 @@ import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1,
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
-import throttle from 'lodash.throttle';
-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 mergeRefs from 'react-merge-refs';
+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 { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
+import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
+import { CSSTransition } from 'react-transition-group';
+import { usePopper } from 'react-popper';
+import throttle from 'lodash.throttle';
+import { createPortal } from 'react-dom';
+import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -2965,22 +2965,24 @@ const DateInput = ({
     }
   };
   const getSelectElement = () => {
-    const months = getMonthNames(locale, monthFormat);
+    const monthOptions = getMonthsOptions();
     return /*#__PURE__*/jsxs("label", {
+      className: "d-flex flex-column",
       children: [/*#__PURE__*/jsx("span", {
         className: "sr-only",
         children: monthLabel
-      }), /*#__PURE__*/jsx(Select, {
-        id: id ? `${id}-select` : undefined,
+      }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
         disabled: disabled,
         placeholder: placeholders.month,
-        options: getMonthsOptions(),
+        items: monthOptions,
         size: size,
-        selected: month === null ? null : {
-          value: month,
-          label: months[month]
-        },
+        value: monthOptions.find(item => item.value.value === month)?.value,
+        renderValue: ({
+          label
+        }) => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: label
+        }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
@@ -2991,8 +2993,11 @@ const DateInput = ({
     const months = getMonthNames(locale, monthFormat);
     months.forEach((label, index) => {
       options.push({
-        value: index,
-        label
+        type: 'option',
+        value: {
+          label,
+          value: index
+        }
       });
     });
     return options;
@@ -7838,6 +7843,10 @@ const getUniqueIdForOption = (parentId = '', option) => {
   const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
   return `option-${parentId}-${uniqueOptionId}`;
 };
+
+/**
+ * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
+ */
 function Select({
   placeholder,
   id,