@transferwise/components 0.0.0-experimental-a53ae95 → 0.0.0-experimental-ff4fa52

package/README.md

@@ -1,6 +1,6 @@
 [![ci-cd](https://github.com/transferwise/neptune-web/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/transferwise/neptune-web/actions) [![NPM](https://badge.fury.io/js/%40transferwise%2Fcomponents.svg)](https://www.npmjs.com/package/@transferwise/components)
 
-# Neptune Web React Components
+# Neptune Web React Components Temp
 
 Neptune is the Design System built by and used at TransferWise. Neptune Web is the Neptune framework for Web. Neptune Web provides a way to build high quality, consistent user experiences on the web with ease.
 
@@ -48,19 +48,6 @@ Note: types for some of components are not 100% accurate (some of them will be j
 
 Please follow [rules for JS components](https://github.com/transferwise/neptune-web/blob/main/packages/components/CONTRIBUTING.md#js-component-rules) in order to generate accurate types for them.
 
-### Mocks for testing
-
-We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:
-
-```ts
-import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/mocks';
-import { jest } from '@jest/globals';
-import { vi } from 'vitest';
-
-mockMatchMedia(jest); // With Jest
-mockResizeObserver(vi); // With Vitest
-```
-
 ## Documentation
 
 Visit the [docs](https://transferwise.github.io/neptune-web/about/Home) for information on getting started, usage information and examples for each component.

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';
@@ -2763,9 +2763,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;
 
@@ -2800,7 +2808,6 @@ const explodeDate = date => {
 
 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());
 };
 
@@ -2813,21 +2820,21 @@ const INITIAL_DEFAULT_STATE = {
 const DateInput = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-label': ariaLabel,
-  disabled,
-  size,
-  value,
+  disabled = false,
+  size = Size.MEDIUM,
+  value = null,
   dayLabel,
   dayAutoComplete,
   monthLabel,
   yearLabel,
   yearAutoComplete,
-  monthFormat,
-  mode,
+  monthFormat = MonthFormat.LONG,
+  mode = DateMode.DAY_MONTH_YEAR,
   onChange,
   onFocus,
-  onBlur,
+  onBlur = undefined,
   placeholders,
-  id,
+  id = '',
   selectProps
 }) => {
   const {
@@ -2844,8 +2851,10 @@ const DateInput = ({
     let explodedDate = INITIAL_DEFAULT_STATE;
     if (value && isDateValid(value)) {
       const dateObject = getDateObject();
-      explodedDate = explodeDate(dateObject);
-      if (isMonthAndYearFormat(value)) {
+      if (dateObject !== null) {
+        explodedDate = explodeDate(dateObject);
+      }
+      if (typeof value === 'string' && isMonthAndYearFormat(value)) {
         explodedDate.day = null;
       }
     }
@@ -2864,7 +2873,7 @@ const DateInput = ({
     year: placeholders?.year || formatMessage(messages$9.yearPlaceholder)
   };
   const getDateAsString = date => {
-    if (!isDateValid(date)) {
+    if (date === null || !isDateValid(date)) {
       return '';
     }
     switch (mode) {
@@ -2885,14 +2894,12 @@ const DateInput = ({
       }), /*#__PURE__*/jsx(SelectInput, {
         name: "month",
         disabled: disabled,
-        placeholder: placeholders.month,
+        placeholder: placeholders?.month,
         items: monthOptions,
         size: size,
-        value: monthOptions.find(item => item.value.value === month)?.value,
-        renderValue: ({
-          label
-        }) => /*#__PURE__*/jsx(SelectInputOptionContent, {
-          title: label
+        value: monthOptions.find(item => item.value === month)?.value,
+        renderValue: selectedValue => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: getMonthNames(locale, monthFormat)[selectedValue]
         }),
         onChange: selectedValue => handleMonthChange(selectedValue),
         ...selectProps
@@ -2901,14 +2908,10 @@ const DateInput = ({
   };
   const getMonthsOptions = () => {
     const options = [];
-    const months = getMonthNames(locale, monthFormat);
-    months.forEach((label, index) => {
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].forEach(index => {
       options.push({
         type: 'option',
-        value: {
-          label,
-          value: index
-        }
+        value: index
       });
     });
     return options;
@@ -2920,35 +2923,33 @@ const DateInput = ({
       broadcastNewValue(INITIAL_DEFAULT_STATE);
     }
     if (mode === DateMode.MONTH_YEAR) {
-      if (newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
+      if (newMonth && newMonth >= 0 && newYear && (newMonth !== month || newYear !== year)) {
         broadcastNewValue(newValue);
       }
-    } else if (newDay && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
+    } else if (newDay && newMonth !== null && newMonth >= 0 && newYear && (newDay !== day || newMonth !== month || newYear !== year)) {
       broadcastNewValue(newValue);
     }
   };
   const handleDayChange = event => {
     const {
       checkedDay
-    } = checkDate(event.target.value, month, year);
+    } = checkDate(parseInt(event.target.value), month, year);
     setDay(checkedDay);
     handleInternalValue(checkedDay, month, year);
   };
   const handleMonthChange = selectedValue => {
-    if (!selectedValue) {
+    if (selectedValue === null) {
       setMonth(null);
       handleInternalValue(day, null, year);
       return;
     }
-    const selectedMonth = selectedValue ? selectedValue.value : 0;
+    const selectedMonth = selectedValue ? selectedValue : 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 +2960,37 @@ 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, parseInt(newValue));
+      if (day && checkedDay !== day) {
+        setDay(checkedDay);
       }
-      setYear(slicedYear);
-      handleInternalValue(checkedDay, month, slicedYear);
+      setYear(parseInt(slicedYear));
+      handleInternalValue(checkedDay, month, parseInt(slicedYear));
     } else {
-      setYear(slicedYear);
+      setYear(parseInt(slicedYear));
       handleInternalValue(day, month, null);
     }
   };
   const broadcastNewValue = newValue => {
     if (newValue !== lastBroadcastedValue) {
       setLastBroadcastedValue(newValue);
-      onChange(getDateAsString(newValue) || null);
+      if (newValue === INITIAL_DEFAULT_STATE) {
+        onChange(null);
+      } else {
+        onChange(getDateAsString(newValue) || 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 ? 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 +3010,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 +3066,6 @@ const DateInput = ({
     })
   });
 };
-
 // Should only propagate if the relatedTarget is not part of this DateInput component.
 function shouldPropagateOnFocus({
   target,
@@ -3071,7 +3075,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 +3091,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
@@ -15513,5 +15480,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