@transferwise/components 45.25.0 → 45.25.2

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);
@@ -2934,6 +2934,8 @@ const INITIAL_DEFAULT_STATE = {
   day: null
 };
 const DateInput = ({
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel,
   disabled,
   size,
   value,
@@ -2997,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
       })]
@@ -3023,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;
@@ -3121,6 +3128,8 @@ const DateInput = ({
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
@@ -3203,6 +3212,8 @@ function shouldPropagateOnBlur({
   return blurElementParent !== focusElementParent;
 }
 DateInput.propTypes = {
+  'aria-label': PropTypes__default.default.string,
+  'aria-labelledby': PropTypes__default.default.string,
   disabled: PropTypes__default.default.bool,
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
   value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
@@ -7866,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,