@transferwise/components 46.30.1 → 46.31.0

package/build/index.mjs

@@ -3,7 +3,7 @@ import React__default, { forwardRef, cloneElement, useState, useEffect, useRef,
 import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import commonmark from 'commonmark';
@@ -796,7 +796,7 @@ function Title({
 }
 
 function logActionRequired(message) {
-  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
@@ -2592,6 +2592,36 @@ const isMonthAndYearFormat = dateString => validDateString(dateString) && dateSt
 const MDY = new Set(['en-US']);
 const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
 
+const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
+const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+const InputIdContext = /*#__PURE__*/createContext(undefined);
+const InputIdContextProvider = InputIdContext.Provider;
+const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
+const InputDescribedByProvider = InputDescribedByContext.Provider;
+const InputInvalidContext = /*#__PURE__*/createContext(undefined);
+const InputInvalidProvider = InputInvalidContext.Provider;
+function useInputAttributes({
+  nonLabelable
+} = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext)
+  };
+}
+function withInputAttributes(Component, args) {
+  function ComponentWithInputAttributes(props) {
+    return /*#__PURE__*/jsx(Component, {
+      inputAttributes: useInputAttributes(args),
+      ...props
+    });
+  }
+  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
+  return ComponentWithInputAttributes;
+}
+
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -2616,7 +2646,7 @@ const convertToLocalMidnight = date => {
 };
 
 const DateInput = ({
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-label': ariaLabel,
   disabled = false,
   size = Size.MEDIUM,
@@ -2632,9 +2662,14 @@ const DateInput = ({
   onFocus,
   onBlur,
   placeholders,
-  id,
+  id: idProp,
   selectProps = {}
 }) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const id = idProp ?? inputAttributes.id;
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
   const {
     locale,
     formatMessage
@@ -2671,9 +2706,9 @@ const DateInput = ({
   const [year, setYear] = useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
   const monthNames = getMonthNames(locale, monthFormat);
-  dayLabel = dayLabel || formatMessage(messages$9.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$9.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$9.yearLabel);
+  dayLabel ||= formatMessage(messages$9.dayLabel);
+  monthLabel ||= formatMessage(messages$9.monthLabel);
+  yearLabel ||= formatMessage(messages$9.yearLabel);
   placeholders = {
     day: placeholders?.day || formatMessage(messages$9.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages$9.monthLabel),
@@ -2864,6 +2899,7 @@ const DateInput = ({
   const yearFirst = YMD.has(locale);
   return /*#__PURE__*/jsx("div", {
     className: "tw-date",
+    ...inputAttributes,
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
@@ -2883,15 +2919,15 @@ const DateInput = ({
           return /*#__PURE__*/jsxs(Fragment, {
             children: [getMonth(), getDay(), getYear()]
           });
-        } else if (yearFirst) {
+        }
+        if (yearFirst) {
           return /*#__PURE__*/jsxs(Fragment, {
             children: [getYear(), getMonth(), getDay()]
           });
-        } else {
-          return /*#__PURE__*/jsxs(Fragment, {
-            children: [getDay(), getMonth(), getYear()]
-          });
         }
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [getDay(), getMonth(), getYear()]
+        });
       })()
     })
   });
@@ -3992,18 +4028,23 @@ class DateLookup extends PureComponent {
       open
     } = this.state;
     const {
+      inputAttributes,
+      id: idProp,
+      'aria-labelledby': ariaLabelledByProp,
       size,
       placeholder,
       label,
-      'aria-labelledby': ariaLabelledBy,
       monthFormat,
       disabled,
       clearable,
       value
     } = this.props;
+    const id = idProp ?? inputAttributes?.id;
+    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
     return /*#__PURE__*/jsxs("div", {
       ref: this.element,
-      id: this.props.id,
+      ...inputAttributes,
+      id: id,
       "aria-labelledby": ariaLabelledBy,
       className: "input-group",
       onKeyDown: this.handleKeyDown,
@@ -4027,6 +4068,9 @@ class DateLookup extends PureComponent {
     });
   }
 }
+var DateLookup$1 = withInputAttributes(DateLookup, {
+  nonLabelable: true
+});
 
 const NavigationOption = /*#__PURE__*/forwardRef(({
   as: component = 'button',
@@ -4873,6 +4917,84 @@ const FlowNavigation = ({
   });
 };
 
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
+      children: children
+    })]
+  });
+}
+
+const Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
+const Field = ({
+  id,
+  label,
+  hint,
+  error,
+  className,
+  children
+}) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
+  const labelId = useId();
+  const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
+  return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
+    value: labelId,
+    children: /*#__PURE__*/jsx(InputIdContextProvider, {
+      value: inputId,
+      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+        value: hasError || hasHint ? descriptionId : undefined,
+        children: /*#__PURE__*/jsx(InputInvalidProvider, {
+          value: hasError,
+          children: /*#__PURE__*/jsxs("div", {
+            className: classNames('form-group d-block', {
+              'has-error': hasError,
+              'has-info': hasHint
+            }, className),
+            children: [/*#__PURE__*/jsxs(Label, {
+              id: labelId,
+              htmlFor: inputId,
+              children: [label, children]
+            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEUTRAL,
+              id: descriptionId,
+              children: hint
+            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+
 const HeaderAction = ({
   action
 }) => {
@@ -5205,20 +5327,16 @@ const Info = ({
   });
 };
 
-function InlineAlert({
-  id,
-  type = 'neutral',
-  className,
-  children
-}) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxs("div", {
-    role: "alert",
-    id: id,
-    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-      children: children
-    })]
+function inputClassNameBase({
+  size = 'auto'
+} = {}) {
+  return classNames('form-control',
+  // TODO: Deprecate
+  'np-form-control', {
+    'np-form-control--size-auto': size === 'auto',
+    'np-form-control--size-sm': size === 'sm',
+    'np-form-control--size-md': size === 'md',
+    'np-form-control--size-lg': size === 'lg'
   });
 }
 
@@ -5340,29 +5458,17 @@ function InputAddon({
   });
 }
 
-function formControlClassNameBase({
-  size = 'auto'
-} = {}) {
-  return classNames('form-control',
-  // TODO: Deprecate
-  'np-form-control', {
-    'np-form-control--size-auto': size === 'auto',
-    'np-form-control--size-sm': size === 'sm',
-    'np-form-control--size-md': size === 'md',
-    'np-form-control--size-lg': size === 'lg'
-  });
-}
-
 const Input = /*#__PURE__*/forwardRef(function Input({
   size = 'auto',
   shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
+  const inputAttributes = useInputAttributes();
   const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsx("input", {
     ref: reference,
-    className: classNames(className, formControlClassNameBase({
+    className: classNames(className, inputClassNameBase({
       size
     }), 'np-input', {
       'np-input--shape-rectangle': shape === 'rectangle',
@@ -5371,6 +5477,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
     // eslint-disable-next-line react/forbid-dom-props
     ,
     style: inputPaddings,
+    ...inputAttributes,
     ...restProps
   });
 });
@@ -5792,12 +5899,6 @@ const PolymorphicWithOverrides = /*#__PURE__*/forwardRef(function PolymorphicWit
   });
 });
 
-var messages$5 = defineMessages({
-  noResultsFound: {
-    id: "neptune.SelectInput.noResultsFound"
-  }
-});
-
 function PreventScroll() {
   usePreventScroll();
   return null;
@@ -5917,7 +6018,7 @@ const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
   return /*#__PURE__*/jsx("button", {
     ref: ref,
     type: "button",
-    className: classNames(className, formControlClassNameBase({
+    className: classNames(className, inputClassNameBase({
       size
     }), 'np-button-input')
     // eslint-disable-next-line react/forbid-dom-props
@@ -6033,6 +6134,12 @@ function Popover({
   });
 }
 
+var messages$5 = defineMessages({
+  noResultsFound: {
+    id: "neptune.SelectInput.noResultsFound"
+  }
+});
+
 function searchableString(value) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -6152,7 +6259,7 @@ function SelectInputClearButton({
 }
 const noop = () => {};
 function SelectInput({
-  id,
+  id: idProp,
   name,
   multiple,
   placeholder,
@@ -6173,6 +6280,8 @@ function SelectInput({
   onClose,
   onClear
 }) {
+  const inputAttributes = useInputAttributes();
+  const id = idProp ?? inputAttributes.id;
   const [open, setOpen] = useState(false);
   const initialized = useRef(false);
   const handleClose = useEffectEvent(onClose ?? (() => {}));
@@ -6233,6 +6342,7 @@ function SelectInput({
               ref(node);
               triggerRef.current = node;
             },
+            ...inputAttributes,
             id,
             ...mergeProps({
               onClick: () => {
@@ -6586,9 +6696,11 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea({
   className,
   ...restProps
 }, reference) {
+  const inputAttributes = useInputAttributes();
   return /*#__PURE__*/jsx("textarea", {
     ref: reference,
-    className: classNames(className, formControlClassNameBase(), 'np-text-area'),
+    className: classNames(className, inputClassNameBase(), 'np-text-area'),
+    ...inputAttributes,
     ...restProps
   });
 });
@@ -8705,6 +8817,12 @@ const PhoneNumberInput = ({
     return explodeNumberModel(cleanValue);
   });
   const [broadcastedValue, setBroadcastedValue] = useState(null);
+  const [suffixDirty, setSuffixDirty] = useState(false);
+  useEffect(() => {
+    if (internalValue.suffix) {
+      setSuffixDirty(true);
+    }
+  }, [internalValue.suffix]);
   const countriesByPrefix = useMemo(() => groupCountriesByPrefix(sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3')), [disabledCountries]);
   const onSuffixChange = event => {
     const suffix = event.target.value;
@@ -8768,6 +8886,11 @@ const PhoneNumberInput = ({
             format: country?.phoneFormat
           }));
         },
+        onClose: () => {
+          if (suffixDirty) {
+            onBlur?.();
+          }
+        },
         ...selectProps
       })
     }), /*#__PURE__*/jsx("div", {
@@ -8787,7 +8910,7 @@ const PhoneNumberInput = ({
           onChange: onSuffixChange,
           onPaste: onPaste,
           onFocus: onFocus,
-          onBlur: onBlur
+          onBlur: () => onBlur?.()
         })
       })
     })]
@@ -9334,9 +9457,13 @@ function RadioGroup({
   selectedValue: controlledValue,
   onChange
 }) {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
   return radios.length > 0 ? /*#__PURE__*/jsx("div", {
     role: "radiogroup",
+    ...inputAttributes,
     children: radios.map(({
       value = '',
       ...restProps
@@ -10448,13 +10575,18 @@ const Summary = ({
 };
 
 const Switch = props => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
   const {
     isModern
   } = useTheme();
   const {
     checked,
     className,
-    id,
+    id = inputAttributes.id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledbyProp,
     onClick,
     disabled
   } = props;
@@ -10485,19 +10617,18 @@ const Switch = props => {
       })
     });
   };
-  const ariaLabel = props['aria-label'];
-  const ariaLabelledby = ariaLabel ? undefined : props['aria-labelledby'];
-  logActionRequiredIf('Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.', !ariaLabel && !ariaLabelledby);
+  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
   return /*#__PURE__*/jsxs("span", {
     className: classNames('np-switch', {
       'np-switch--unchecked': !checked,
       'np-switch--checked': checked,
-      disabled: disabled
+      disabled
     }, className),
     tabIndex: 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,
+    ...inputAttributes,
     "aria-labelledby": ariaLabelledby,
     id: id,
     "aria-disabled": disabled,
@@ -14353,5 +14484,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, 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, 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 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, 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 };
 //# sourceMappingURL=index.mjs.map