@transferwise/components 45.25.0 → 45.25.2

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';
@@ -2900,6 +2900,8 @@ const INITIAL_DEFAULT_STATE = {
   day: null
 };
 const DateInput = ({
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel,
   disabled,
   size,
   value,
@@ -2963,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
       })]
@@ -2989,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;
@@ -3087,6 +3094,8 @@ const DateInput = ({
   return /*#__PURE__*/jsx("div", {
     className: "tw-date",
     id: id,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
     onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
     onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
     children: /*#__PURE__*/jsxs("div", {
@@ -3169,6 +3178,8 @@ function shouldPropagateOnBlur({
   return blurElementParent !== focusElementParent;
 }
 DateInput.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
@@ -7832,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,