@transferwise/components 45.25.1 → 45.26.0

package/build/index.js

@@ -8,19 +8,19 @@ var icons = require('@transferwise/icons');
 var PropTypes = require('prop-types');
 var reactIntl = require('react-intl');
 var componentsTheming = require('@wise/components-theming');
-var formatting = require('@transferwise/formatting');
-var throttle = require('lodash.throttle');
-var reactTransitionGroup = require('react-transition-group');
-var reactDom = require('react-dom');
-var focus = require('@react-aria/focus');
-var mergeRefs = require('react-merge-refs');
-var shim = require('use-sync-external-store/shim');
-var neptuneValidation = require('@transferwise/neptune-validation');
-var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
+var mergeRefs = require('react-merge-refs');
+var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
+var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
+var formatting = require('@transferwise/formatting');
+var reactTransitionGroup = require('react-transition-group');
+var reactPopper = require('react-popper');
+var throttle = require('lodash.throttle');
+var reactDom = require('react-dom');
+var neptuneValidation = require('@transferwise/neptune-validation');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -53,9 +53,9 @@ function _interopNamespace(e) {
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var throttle__default = /*#__PURE__*/_interopDefault(throttle);
-var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
+var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -2999,22 +2999,24 @@ const DateInput = ({
     }
   };
   const getSelectElement = () => {
-    const months = getMonthNames(locale, monthFormat);
+    const monthOptions = getMonthsOptions();
     return /*#__PURE__*/jsxRuntime.jsxs("label", {
+      className: "d-flex flex-column",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "sr-only",
         children: monthLabel
-      }), /*#__PURE__*/jsxRuntime.jsx(Select, {
-        id: id ? `${id}-select` : undefined,
+      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(SelectInputOptionContent, {
+          title: label
+        }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
@@ -3025,8 +3027,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;
@@ -7872,6 +7877,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,