@transferwise/components 46.23.0 → 46.25.0

package/build/{index.esm.js → index.mjs}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -10,8 +10,7 @@ import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
 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 { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 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';
@@ -1718,6 +1717,7 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
+// eslint-disable-next-line import/extensions
 function useMedia(query) {
   return useSyncExternalStore(onStoreChange => {
     const mediaQueryList = window.matchMedia(query);
@@ -1762,6 +1762,7 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
   ...rest
 }, reference) => {
   const localReference = useRef(null);
+  useImperativeHandle(reference, () => localReference.current, []);
   return /*#__PURE__*/createElement(CSSTransition, {
     ...rest,
     key: `sliding-panel--open-${position}`,
@@ -1777,7 +1778,7 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
     appear: true,
     unmountOnExit: true
   }, /*#__PURE__*/jsx("div", {
-    ref: mergeRefs([reference, localReference]),
+    ref: localReference,
     className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
@@ -2697,6 +2698,9 @@ const validDateObject = dateObject => !isNaN(dateObject.getTime());
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
+const MDY = new Set(['en-US']);
+const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
+
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -2720,7 +2724,6 @@ const convertToLocalMidnight = date => {
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
 };
 
-const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
@@ -2910,7 +2913,64 @@ const DateInput = ({
     'col-sm-8': monthYearOnly,
     'col-sm-5': !monthYearOnly
   });
-  const monthBeforeDay = MonthBeforeDay.has(locale);
+  const getMonth = () => {
+    return /*#__PURE__*/jsx("div", {
+      className: monthWidth,
+      children: getSelectElement()
+    });
+  };
+  const getDay = () => {
+    return /*#__PURE__*/jsx("div", {
+      className: "col-sm-3",
+      children: /*#__PURE__*/jsxs("label", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "sr-only",
+          children: dayLabel
+        }), /*#__PURE__*/jsx("div", {
+          className: `input-group input-group-${size}`,
+          children: /*#__PURE__*/jsx(Input, {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            name: "day",
+            autoComplete: dayAutoComplete,
+            value: day || '',
+            placeholder: placeholders?.day,
+            disabled: disabled,
+            min: 1,
+            onChange: event => handleDayChange(event)
+          })
+        })]
+      })
+    });
+  };
+  const getYear = () => {
+    return /*#__PURE__*/jsx("div", {
+      className: "col-sm-4",
+      children: /*#__PURE__*/jsxs("label", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "sr-only",
+          children: yearLabel
+        }), /*#__PURE__*/jsx("div", {
+          className: `input-group input-group-${size}`,
+          children: /*#__PURE__*/jsx(Input, {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            name: "year",
+            autoComplete: yearAutoComplete,
+            placeholder: placeholders?.year,
+            value: year || '',
+            disabled: disabled,
+            min: 1,
+            onChange: event => handleYearChange(event)
+          })
+        })]
+      })
+    });
+  };
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
   return /*#__PURE__*/jsx("div", {
     className: "tw-date",
     id: id,
@@ -2920,59 +2980,28 @@ const DateInput = ({
     ,
     onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
     onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
-    children: /*#__PURE__*/jsxs("div", {
+    children: /*#__PURE__*/jsx("div", {
       className: "row",
-      children: [monthBeforeDay && /*#__PURE__*/jsx("div", {
-        className: monthWidth,
-        children: getSelectElement()
-      }), !monthYearOnly && /*#__PURE__*/jsx("div", {
-        className: "col-sm-3",
-        children: /*#__PURE__*/jsxs("label", {
-          children: [/*#__PURE__*/jsx("span", {
-            className: "sr-only",
-            children: dayLabel
-          }), /*#__PURE__*/jsx("div", {
-            className: `input-group input-group-${size}`,
-            children: /*#__PURE__*/jsx(Input, {
-              type: "text",
-              inputMode: "numeric",
-              pattern: "[0-9]*",
-              name: "day",
-              autoComplete: dayAutoComplete,
-              value: day || '',
-              placeholder: placeholders.day,
-              disabled: disabled,
-              min: 1,
-              onChange: event => handleDayChange(event)
-            })
-          })]
-        })
-      }), !monthBeforeDay && /*#__PURE__*/jsx("div", {
-        className: monthWidth,
-        children: getSelectElement()
-      }), /*#__PURE__*/jsx("div", {
-        className: "col-sm-4",
-        children: /*#__PURE__*/jsxs("label", {
-          children: [/*#__PURE__*/jsx("span", {
-            className: "sr-only",
-            children: yearLabel
-          }), /*#__PURE__*/jsx("div", {
-            className: `input-group input-group-${size}`,
-            children: /*#__PURE__*/jsx(Input, {
-              type: "text",
-              inputMode: "numeric",
-              pattern: "[0-9]*",
-              name: "year",
-              autoComplete: yearAutoComplete,
-              placeholder: placeholders.year,
-              value: year || '',
-              disabled: disabled,
-              min: 1,
-              onChange: event => handleYearChange(event)
-            })
-          })]
-        })
-      })]
+      children: (() => {
+        if (monthYearOnly) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [!yearFirst && getMonth(), getYear(), yearFirst && getMonth()]
+          });
+        }
+        if (monthBeforeDay) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [getMonth(), getDay(), getYear()]
+          });
+        } else if (yearFirst) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [getYear(), getMonth(), getDay()]
+          });
+        } else {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [getDay(), getMonth(), getYear()]
+          });
+        }
+      })()
     })
   });
 };
@@ -6541,7 +6570,10 @@ function SelectInput({
         }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
           // eslint-disable-next-line react/jsx-no-constructed-context-values
           value: {
-            ref: mergeRefs([ref, triggerRef]),
+            ref: node => {
+              ref(node);
+              triggerRef.current = node;
+            },
             id,
             ...mergeProps({
               onClick: () => {
@@ -7382,7 +7414,6 @@ const getSupportedSize = size => {
       return Size.MEDIUM;
   }
 };
-var Loader$1 = Loader;
 
 const Money = ({
   amount,
@@ -7395,11 +7426,6 @@ const Money = ({
     children: formatMoney(amount, currency, locale)
   });
 };
-Money.propTypes = {
-  amount: PropTypes.number.isRequired,
-  currency: PropTypes.string.isRequired
-};
-var Money$1 = Money;
 
 var messages$4 = defineMessages({
   selectPlaceholder: {
@@ -7817,13 +7843,9 @@ const NavigationOptionList = ({
     children: Children.map(children, child => /*#__PURE__*/jsx("li", {
       className: "np-navigation-options-list__item",
       children: child
-    }, child.key))
+    }, child?.toString()))
   });
 };
-NavigationOptionList.propTypes = {
-  children: PropTypes.node.isRequired
-};
-var NavigationOptionList$1 = NavigationOptionList;
 
 const STORAGE_NAME = 'dismissedNudges';
 const getLocalStorage = () => {
@@ -10718,6 +10740,7 @@ const SegmentedControl = ({
       className: classNames('segmented-control__segments', {
         'segmented-control__segments--no-animate': !animate
       }),
+      role: mode !== 'input' ? 'tablist' : undefined,
       children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxs("label", {
         ref: segment.ref,
         htmlFor: segment.id,
@@ -14200,13 +14223,13 @@ var es = {
 	"neptune.Upload.csButtonText": "¿Quieres subir otro archivo?",
 	"neptune.Upload.csFailureText": "La carga del archivo ha fallado. Por favor, inténtalo de nuevo",
 	"neptune.Upload.csSuccessText": "¡Se ha subido el archivo!",
-	"neptune.Upload.csTooLargeMessage": "Por favor, sube un archivo de menos de {maxSize}MB",
+	"neptune.Upload.csTooLargeMessage": "Proporciona un archivo menor de {maxSize} MB",
 	"neptune.Upload.csWrongTypeMessage": "Tipo de archivo no aceptado. Por favor, inténtalo de nuevo con un archivo diferente",
 	"neptune.Upload.psButtonText": "Cancela",
 	"neptune.Upload.psProcessingText": "Subiendo...",
 	"neptune.Upload.usButtonText": "O selecciona un archivo",
 	"neptune.Upload.usDropMessage": "Arrastra un archivo para subirlo",
-	"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo menor de {maxSize}MB",
+	"neptune.Upload.usPlaceholder": "Arrastra y suelta un archivo de menos de {maxSize} MB",
 	"neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
 	"neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
 	"neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
@@ -14316,13 +14339,13 @@ var hu = {
 	"neptune.Upload.csButtonText": "Másik fájl feltöltése?",
 	"neptune.Upload.csFailureText": "Feltöltés sikertelen. Kérünk, próbáld újra",
 	"neptune.Upload.csSuccessText": "Feltöltés sikeres",
-	"neptune.Upload.csTooLargeMessage": "Kérünk, {maxSize} MB-nál kisebb fájlt tölts fel",
+	"neptune.Upload.csTooLargeMessage": "Kérünk, olyan fájlt küldj el, amely kisebb mint {maxSize}MB",
 	"neptune.Upload.csWrongTypeMessage": "Nem támogatott fájltípus. Kérünk, próbáld újra másik fájllal",
 	"neptune.Upload.psButtonText": "Mégsem",
 	"neptune.Upload.psProcessingText": "Feltöltés...",
 	"neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
 	"neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
-	"neptune.Upload.usPlaceholder": "Húzz ide egy {maxSize} MB-nál kisebb fájlt",
+	"neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű fájlt",
 	"neptune.UploadButton.allFileTypes": "Összes fájltípus",
 	"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
 	"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
@@ -14986,10 +15009,10 @@ var zhHK = {
 	"neptune.ClearButton.ariaLabel": "清除",
 	"neptune.CloseButton.ariaLabel": "關閉",
 	"neptune.DateInput.day.label": "日",
-	"neptune.DateInput.day.placeholder": "DD",
+	"neptune.DateInput.day.placeholder": "日",
 	"neptune.DateInput.month.label": "月",
 	"neptune.DateInput.year.label": "年",
-	"neptune.DateInput.year.placeholder": "YYYY",
+	"neptune.DateInput.year.placeholder": "年",
 	"neptune.DateLookup.day": "日",
 	"neptune.DateLookup.goTo20YearView": "切換至20年視圖",
 	"neptune.DateLookup.month": "月",
@@ -15042,6 +15065,7 @@ const translations = {
   cs,
   de,
   en,
+  'en-US': en,
   es,
   fr,
   hu,
@@ -15059,5 +15083,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
-//# sourceMappingURL=index.esm.js.map
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+//# sourceMappingURL=index.mjs.map