@transferwise/components 46.32.0 → 46.33.0

package/build/index.mjs

@@ -136,10 +136,6 @@ function stopPropagation$1(event) {
     event.nativeEvent.stopImmediatePropagation();
   }
 }
-function getSimpleRandomId(prefix) {
-  const random = Math.ceil(Math.random() * 999999);
-  return `${prefix}${random}`;
-}
 
 /**
  * Defined in `Dimmer.less`
@@ -7430,9 +7426,8 @@ const formatAmountIfSet = ({
 }) => {
   if (maxLengthOverride) {
     return amount != null ? String(amount) : '';
-  } else {
-    return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
+  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
 };
 const parseNumber = ({
   amount,
@@ -7490,7 +7485,7 @@ class MoneyInput extends Component {
       key,
       ctrlKey
     } = event;
-    const isNumberKey = isNumber(parseInt(key, 10));
+    const isNumberKey = isNumber(Number.parseInt(key, 10));
     return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
   };
   handleKeyDown = event => {
@@ -7506,7 +7501,7 @@ class MoneyInput extends Component {
     const parsed = isEmpty(paste) ? null : parseNumber({
       amount: paste,
       currency: this.props.selectedCurrency.currency,
-      locale: locale,
+      locale,
       maxLengthOverride: this.props.maxLengthOverride
     });
     if (isNumberOrNull(parsed)) {
@@ -7514,7 +7509,7 @@ class MoneyInput extends Component {
         formattedAmount: formatAmountIfSet({
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
-          locale: locale,
+          locale,
           maxLengthOverride: this.props.maxLengthOverride
         })
       });
@@ -7611,15 +7606,17 @@ class MoneyInput extends Component {
   style = className => this.props.classNames[className] || className;
   render() {
     const {
+      inputAttributes,
+      id: amountInputId,
+      'aria-labelledby': ariaLabelledByProp,
       selectedCurrency,
       onCurrencyChange,
       size,
       addon,
-      id,
-      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
+    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
     const selectOptions = this.getSelectOptions();
     const hasSingleCurrency = () => {
       if (selectOptions.length !== 0) {
@@ -7640,10 +7637,12 @@ class MoneyInput extends Component {
     const isFixedCurrency = !this.state.searchQuery && hasSingleCurrency() || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
     return /*#__PURE__*/jsxs("div", {
+      role: "group",
+      ...inputAttributes,
       "aria-labelledby": ariaLabelledBy,
       className: classNames(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
       children: [/*#__PURE__*/jsx(Input, {
-        id: id,
+        id: amountInputId,
         value: this.state.formattedAmount,
         inputMode: "decimal",
         disabled: disabled,
@@ -7744,7 +7743,7 @@ function currencyOptionFitsQuery(option, query) {
   return contains(option.label, query) || contains(option.searchable, query) || contains(option.note, query);
 }
 function contains(property, query) {
-  return property && property.toLowerCase().includes(query.toLowerCase());
+  return property?.toLowerCase().includes(query.toLowerCase());
 }
 function sortOptionsLabelsToFirst(options, query) {
   return [...options].sort((first, second) => {
@@ -7762,7 +7761,9 @@ function sortOptionsLabelsToFirst(options, query) {
     return 0;
   });
 }
-var MoneyInput$1 = injectIntl(MoneyInput);
+var MoneyInput$1 = injectIntl(withInputAttributes(MoneyInput, {
+  nonLabelable: true
+}));
 
 const NavigationOptionList = ({
   children
@@ -9283,7 +9284,7 @@ const defaultSelectProps = {};
 const defaultDisabledCountries = [];
 const PhoneNumberInput = ({
   id,
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   required,
   disabled,
   initialValue,
@@ -9297,6 +9298,10 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries
 }) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
   const {
     locale,
     formatMessage
@@ -9353,6 +9358,8 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxs("div", {
+    role: "group",
+    ...inputAttributes,
     "aria-labelledby": ariaLabelledBy,
     className: "tw-telephone",
     children: [/*#__PURE__*/jsx("div", {
@@ -10085,6 +10092,7 @@ function Select({
   dropdownProps,
   buttonProps
 }) {
+  const inputAttributes = useInputAttributes();
   const {
     formatMessage
   } = useIntl();
@@ -10104,7 +10112,6 @@ function Select({
   const optionsListReference = useRef(null);
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
-  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
   const options = useMemo(() => {
     if (!search || !searchValue) {
       return defaultOptions;
@@ -10112,14 +10119,14 @@ function Select({
     return defaultOptions.filter(isSearchableOption).filter(option => {
       if (typeof search === 'function') {
         return search(option, searchValue);
-      } else {
-        return defaultFilterFunction(option, searchValue);
       }
+      return defaultFilterFunction(option, searchValue);
     });
   }, [defaultOptions, search, searchValue]);
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const computedId = id || fallbackButtonId;
+  const fallbackButtonId = useId();
+  const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
   const {
@@ -10250,7 +10257,7 @@ function Select({
   useEffect(() => {
     if (open) {
       if (!isMobile || searchValue) {
-        if (isSearchEnabled && !!searchBoxReference.current) {
+        if (isSearchEnabled && searchBoxReference.current) {
           searchBoxReference.current.focus();
         }
         if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
@@ -10436,6 +10443,7 @@ function Select({
     onBlur: handleOnBlur,
     children: [/*#__PURE__*/jsxs(Button, {
       ref: dropdownButtonReference,
+      ...inputAttributes,
       id: computedId,
       block: block,
       size: size,
@@ -10511,9 +10519,6 @@ Select.propTypes = {
    * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
    */
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.any,
     label: PropTypes.node,
@@ -10526,17 +10531,20 @@ Select.propTypes = {
     disabled: PropTypes.bool,
     searchStrings: PropTypes.arrayOf(PropTypes.string)
   })).isRequired,
-  /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
-   */
-  onSearchChange: PropTypes.func,
   searchValue: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   classNames: PropTypes.objectOf(PropTypes.string),
   dropdownUp: PropTypes.bool,
   buttonProps: PropTypes.object,
-  dropdownProps: PropTypes.object
+  dropdownProps: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes.func
 };
 Select.defaultProps = {
   id: undefined,
@@ -12132,7 +12140,8 @@ class Typeahead extends Component {
   };
   render() {
     const {
-      id,
+      inputAttributes,
+      id: idProp,
       placeholder,
       multiple,
       size,
@@ -12150,6 +12159,7 @@ class Typeahead extends Component {
       alert,
       inputAutoComplete
     } = this.props;
+    const id = idProp ?? inputAttributes?.id;
     const {
       errorState,
       query,
@@ -12175,6 +12185,8 @@ class Typeahead extends Component {
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return /*#__PURE__*/jsx("div", {
+      role: "group",
+      ...inputAttributes,
       id: id,
       className: classNames('typeahead', `typeahead-${size}`, {
         'typeahead--has-value': selected.length > 0,
@@ -12230,6 +12242,9 @@ class Typeahead extends Component {
     });
   }
 }
+var Typeahead$1 = withInputAttributes(Typeahead, {
+  nonLabelable: true
+});
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var UploadStep;
@@ -14758,5 +14773,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, 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, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, 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, PromoCardGroup$1 as PromoCardGroup, 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 };
+export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, 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, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, 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, PromoCardGroup$1 as PromoCardGroup, 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$1 as 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