@transferwise/components 0.0.0-experimental-cbb427b → 0.0.0-experimental-53fa20a

package/build/index.esm.js

@@ -7,6 +7,7 @@ import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1,
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 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';
@@ -14,7 +15,6 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim';
 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';
-import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
 import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
@@ -1867,6 +1867,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
+  const titleId = useId();
   return /*#__PURE__*/jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -1874,13 +1875,16 @@ const Drawer = ({
       open: open,
       position: isMobile ? Position.BOTTOM : position,
       children: /*#__PURE__*/jsxs("div", {
-        className: classNames('np-drawer', className),
         role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames('np-drawer', className),
         children: [/*#__PURE__*/jsxs("div", {
           className: classNames('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsx(Title, {
+            id: titleId,
             type: Typography.TITLE_BODY,
             children: headerTitle
           }), /*#__PURE__*/jsx(CloseButton, {
@@ -2741,15 +2745,15 @@ function getDayNames(locale, format = 'short') {
   return days;
 }
 
-function isWithinRange(date, min, max) {
-  return !date || (!min || date >= min) && (!max || date <= max);
-}
-
 // Makes sure that date is between min and max dates, returns a cloned min or max
 function moveToWithinRange(date, min, max) {
   return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
 }
 
+function isWithinRange(date, min, max) {
+  return !date || (!min || date >= min) && (!max || date <= max);
+}
+
 const getMonthNames = (locale, format = 'long') => {
   const months = [];
   const date = new Date(2018, 0, 1);
@@ -2763,9 +2767,17 @@ const getMonthNames = (locale, format = 'long') => {
   return months;
 };
 
-const isDateValid = date => validDateObject(date) || validDateString(date);
-const validDateString = dateString => typeof dateString === 'string' && validDateObject(new Date(dateString));
-const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals
+const isDateValid = date => {
+  if (date === null) {
+    return false;
+  } else if (date instanceof Date) {
+    return validDateObject(date);
+  } else {
+    return validDateString(date);
+  }
+};
+const validDateString = dateString => validDateObject(new Date(dateString));
+const validDateObject = dateObject => !isNaN(dateObject.getTime());
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
@@ -2787,48 +2799,31 @@ var messages$9 = defineMessages({
   }
 });
 
-const explodeDate = date => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
-  return {
-    year,
-    month,
-    day
-  };
-};
-
 const convertToLocalMidnight = date => {
   const utcDate = new Date(date.split('T')[0]); // using YYYY-MM-DD creates UTC date
-
   return new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
 };
 
 const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
-const INITIAL_DEFAULT_STATE = {
-  year: null,
-  month: null,
-  day: null
-};
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled,
-  size,
+  disabled = false,
+  size = Size.MEDIUM,
   value,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat,
-  mode,
+  monthFormat = MonthFormat.LONG,
+  mode = DateMode.DAY_MONTH_YEAR,
   onChange,
   onFocus,
   onBlur,
   placeholders,
   id,
-  selectProps
+  selectProps = {}
 }) => {
   const {
     locale,
@@ -2840,20 +2835,30 @@ const DateInput = ({
     }
     return null;
   };
-  const getExplodedDate = unit => {
-    let explodedDate = INITIAL_DEFAULT_STATE;
+  const getInitialDate = unit => {
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
-      explodedDate = explodeDate(dateObject);
-      if (isMonthAndYearFormat(value)) {
-        explodedDate.day = null;
+      if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {
+        return null;
+      }
+      if (dateObject !== null) {
+        switch (unit) {
+          case 'year':
+            return dateObject.getFullYear();
+          case 'month':
+            return dateObject.getMonth();
+          case 'day':
+            return dateObject.getDate();
+          default:
+            return null;
+        }
       }
     }
-    return explodedDate[unit];
+    return null;
   };
-  const [day, setDay] = useState(() => getExplodedDate('day'));
-  const [month, setMonth] = useState(() => getExplodedDate('month'));
-  const [year, setYear] = useState(() => getExplodedDate('year'));
+  const [day, setDay] = useState(() => getInitialDate('day'));
+  const [month, setMonth] = useState(() => getInitialDate('month'));
+  const [year, setYear] = useState(() => getInitialDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
   dayLabel = dayLabel || formatMessage(messages$9.dayLabel);
   monthLabel = monthLabel || formatMessage(messages$9.monthLabel);
@@ -2876,7 +2881,6 @@ const DateInput = ({
     }
   };
   const getSelectElement = () => {
-    const monthOptions = getMonthsOptions();
     return /*#__PURE__*/jsxs("label", {
       className: "d-flex flex-column",
       children: [/*#__PURE__*/jsx("span", {
@@ -2885,70 +2889,60 @@ const DateInput = ({
       }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
         disabled: disabled,
-        placeholder: placeholders.month,
-        items: monthOptions,
+        placeholder: placeholders?.month,
+        items: Array.from({
+          length: 12
+        }, (_, index) => ({
+          type: 'option',
+          value: index
+        })),
         size: size,
-        value: monthOptions.find(item => item.value.value === month)?.value,
-        renderValue: ({
-          label
-        }) => /*#__PURE__*/jsx(SelectInputOptionContent, {
-          title: label
+        value: month,
+        renderValue: selectedValue => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: getMonthNames(locale, monthFormat)[selectedValue]
         }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
       })]
     });
   };
-  const getMonthsOptions = () => {
-    const options = [];
-    const months = getMonthNames(locale, monthFormat);
-    months.forEach((label, index) => {
-      options.push({
-        type: 'option',
-        value: {
-          label,
-          value: index
-        }
-      });
-    });
-    return options;
-  };
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    const dateValue = newDay != null && newMonth != null && newYear != null ? new Date(newYear, newMonth, newDay) : null;
-    const newValue = isDateValid(dateValue) ? dateValue : null;
-    if (!newValue) {
-      broadcastNewValue(INITIAL_DEFAULT_STATE);
+    if (newDay == null || newMonth == null || newYear == null) {
+      broadcastNewValue(null);
+      return;
+    }
+    const dateValue = new Date(newYear, newMonth, newDay);
+    if (!isDateValid(dateValue)) {
+      broadcastNewValue(null);
+      return;
     }
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
-        broadcastNewValue(newValue);
+      if (newMonth !== month || newYear !== year) {
+        broadcastNewValue(dateValue);
       }
-    } else if (newDay && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
-      broadcastNewValue(newValue);
+    } else if (newDay !== day || newMonth !== month || newYear !== year) {
+      broadcastNewValue(dateValue);
     }
   };
   const handleDayChange = event => {
     const {
       checkedDay
-    } = checkDate(event.target.value, month, year);
+    } = checkDate(Number.parseInt(event.target.value, 10), month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
-  const handleMonthChange = selectedValue => {
-    if (!selectedValue) {
+  const handleMonthChange = selectedMonth => {
+    if (selectedMonth === null) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue.value : 0;
     const {
       checkedDay
     } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day) {
-      if (checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    if (day && checkedDay !== day) {
+      setDay(checkedDay);
     }
     handleInternalValue(checkedDay, selectedMonth, year);
   };
@@ -2959,35 +2953,35 @@ const DateInput = ({
       // Correct day based on year and month.
       const {
         checkedDay
-      } = checkDate(day, month, newValue);
-      if (day) {
-        if (checkedDay !== day) {
-          setDay(checkedDay);
-        }
+      } = checkDate(day, month, Number.parseInt(newValue, 10));
+      if (day && checkedDay !== day) {
+        setDay(checkedDay);
       }
-      setYear(slicedYear);
-      handleInternalValue(checkedDay, month, slicedYear);
+      setYear(Number.parseInt(slicedYear, 10));
+      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
     } else {
-      setYear(slicedYear);
+      setYear(Number.parseInt(slicedYear, 10));
       handleInternalValue(day, month, null);
     }
   };
   const broadcastNewValue = newValue => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      onChange(getDateAsString(newValue) || null);
+      onChange(newValue != null ? getDateAsString(newValue) : null);
+    } else if (newValue === null) {
+      onChange(null);
     }
   };
   const checkDate = (newDay = null, newMonth = 0, newYear = null) => {
     let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth + 1, 0).getDate();
+    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
     if (!newDay) {
       checkedDay = null;
     }
-    if (newDay && newDay < 0 || newDay === '00') {
+    if (newDay && newDay < 0) {
       checkedDay = 1;
     }
-    if (newDay && newMonth || newDay > 31) {
+    if (newDay && newMonth || newDay && newDay > 31) {
       checkedDay = newDay > maxDay ? maxDay : newDay;
     }
     return {
@@ -3007,8 +3001,10 @@ const DateInput = ({
     id: id,
     "aria-labelledby": ariaLabelledBy,
     "aria-label": ariaLabel,
-    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation(),
-    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur() : event.stopPropagation(),
+    role: "group" // Add role attribute to indicate container for interactive elements
+    ,
+    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
+    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
     children: /*#__PURE__*/jsxs("div", {
       className: "row",
       children: [monthBeforeDay && /*#__PURE__*/jsx("div", {
@@ -3061,7 +3057,6 @@ const DateInput = ({
     })
   });
 };
-
 // Should only propagate if the relatedTarget is not part of this DateInput component.
 function shouldPropagateOnFocus({
   target,
@@ -3071,7 +3066,6 @@ function shouldPropagateOnFocus({
   const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
   return targetParent !== relatedParent;
 }
-
 // Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
 function shouldPropagateOnBlur({
   target,
@@ -3088,42 +3082,6 @@ function shouldPropagateOnBlur({
   const focusElementParent = focusElement && focusElement.closest('.tw-date');
   return blurElementParent !== focusElementParent;
 }
-DateInput.propTypes = {
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  dayLabel: PropTypes.string,
-  dayAutoComplete: PropTypes.string,
-  monthLabel: PropTypes.string,
-  yearLabel: PropTypes.string,
-  yearAutoComplete: PropTypes.string,
-  monthFormat: PropTypes.oneOf(['long', 'short']),
-  mode: PropTypes.oneOf(['day-month-year', 'month-year']),
-  placeholders: PropTypes.shape({
-    day: PropTypes.node,
-    month: PropTypes.node,
-    year: PropTypes.node
-  }),
-  id: PropTypes.string,
-  selectProps: PropTypes.object
-};
-DateInput.defaultProps = {
-  disabled: false,
-  size: Size.MEDIUM,
-  value: null,
-  onFocus: null,
-  onBlur: null,
-  monthFormat: MonthFormat.LONG,
-  mode: DateMode.DAY_MONTH_YEAR,
-  id: '',
-  selectProps: {}
-};
-var DateInput$1 = DateInput;
 
 const POPOVER_OFFSET = [0, 16];
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
@@ -5922,6 +5880,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = useRef(null);
+  const titleId = useId();
   return !isMedium ? /*#__PURE__*/jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -5949,11 +5908,12 @@ const Modal = ({
         className: classNames('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsx("div", {
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": titleId,
           className: classNames('tw-modal-dialog', 'd-flex', {
             [`tw-modal-${size}`]: size
           }),
-          "aria-modal": true,
-          role: "dialog",
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between', {
               'tw-modal-compact': isCompact,
@@ -5964,6 +5924,7 @@ const Modal = ({
                 'modal--withoutborder': !title || noDivider
               }),
               children: [/*#__PURE__*/jsx(Title, {
+                id: titleId,
                 type: Typography.TITLE_BODY,
                 className: "tw-modal-title",
                 children: title
@@ -15420,5 +15381,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$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as 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$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as 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$2 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$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as 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$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$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as 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$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as 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$2 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$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as 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