@transferwise/components 46.0.2 → 46.0.4

package/build/i18n/en.json

@@ -4,8 +4,10 @@
   "neptune.ClearButton.ariaLabel": "Clear",
   "neptune.CloseButton.ariaLabel": "Close",
   "neptune.DateInput.day.label": "Day",
+  "neptune.DateInput.day.placeholder": "DD",
   "neptune.DateInput.month.label": "Month",
   "neptune.DateInput.year.label": "Year",
+  "neptune.DateInput.year.placeholder": "YYYY",
   "neptune.DateLookup.day": "day",
   "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
   "neptune.DateLookup.month": "month",

package/build/index.esm.js

@@ -4,8 +4,8 @@ import * as React from 'react';
 import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, Component, PureComponent, createRef, 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 PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
@@ -540,61 +540,44 @@ const CONTAINER_SIZE = {
 };
 const ExtraSmallChevron = ({
   className
-}) => /*#__PURE__*/jsx("span", {
-  className: classNames('tw-icon', 'tw-icon-chevron', className),
-  role: "presentation",
-  "aria-hidden": true,
-  children: /*#__PURE__*/jsx("svg", {
-    width: "10",
-    height: "10",
-    viewBox: "0 0 10 10",
-    fill: "currentColor",
-    focusable: "false",
-    children: /*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    className: classNames('tw-icon', 'tw-icon-chevron', className),
+    role: "presentation",
+    "aria-hidden": true,
+    children: /*#__PURE__*/jsx("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "currentColor",
+      focusable: "false",
+      children: /*#__PURE__*/jsx("path", {
+        fillRule: "evenodd",
+        d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+      })
     })
-  })
-});
-ExtraSmallChevron.propTypes = {
-  className: PropTypes.string
-};
-ExtraSmallChevron.defaultProps = {
-  className: null
+  });
 };
 const Chevron = ({
-  orientation,
-  size,
-  disabled,
+  orientation = Position.BOTTOM,
+  size = Size.SMALL,
+  disabled = false,
   className
 }) => {
   const classNameValue = classNames('tw-chevron', {
     'chevron-color': !disabled
-  }, `${[orientation]}`.toLowerCase(), className);
-  const sizeValue = CONTAINER_SIZE[size];
+  }, `${orientation}`.toLowerCase(), className);
   if (size === Size.EXTRA_SMALL) {
     return /*#__PURE__*/jsx(ExtraSmallChevron, {
       className: classNameValue
     });
   }
+  const sizeValue = CONTAINER_SIZE[size];
   return /*#__PURE__*/jsx(ChevronUp, {
     className: classNameValue,
     size: sizeValue
   });
 };
-Chevron.propTypes = {
-  orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  size: PropTypes.oneOf(['xs', 'sm', 'md']),
-  disabled: PropTypes.bool,
-  className: PropTypes.string
-};
-Chevron.defaultProps = {
-  orientation: Position.BOTTOM,
-  size: Size.SMALL,
-  disabled: false,
-  className: null
-};
-var Chevron$1 = Chevron;
 
 const Option$2 = /*#__PURE__*/forwardRef(({
   media = '',
@@ -679,7 +662,7 @@ const AccordionItem = ({
       as: "button",
       media: iconElement,
       title: title,
-      button: /*#__PURE__*/jsx(Chevron$1, {
+      button: /*#__PURE__*/jsx(Chevron, {
         orientation: open ? Position.TOP : Position.BOTTOM,
         size: Size.MEDIUM
       }),
@@ -1345,7 +1328,7 @@ const Avatar = ({
   backgroundColor = null,
   backgroundColorSeed = null,
   children = null,
-  className = null,
+  className,
   outlined = false,
   size: sizeFromProps = 48,
   theme = Theme.LIGHT,
@@ -2454,7 +2437,7 @@ const Card$1 = /*#__PURE__*/forwardRef((props, reference) => {
       title: title,
       content: details,
       showMediaAtAllSizes: true,
-      button: children && /*#__PURE__*/jsx(Chevron$1, {
+      button: children && /*#__PURE__*/jsx(Chevron, {
         orientation: isOpen ? Position.TOP : Position.BOTTOM
       }),
       onClick: () => children && onClick(!isExpanded)
@@ -2856,6 +2839,12 @@ var messages$8 = defineMessages({
   },
   yearLabel: {
     id: "neptune.DateInput.year.label"
+  },
+  dayPlaceholder: {
+    id: "neptune.DateInput.day.placeholder"
+  },
+  yearPlaceholder: {
+    id: "neptune.DateInput.year.placeholder"
   }
 });
 
@@ -2931,9 +2920,9 @@ const DateInput = ({
   monthLabel = monthLabel || formatMessage(messages$8.monthLabel);
   yearLabel = yearLabel || formatMessage(messages$8.yearLabel);
   placeholders = {
-    day: placeholders?.day || 'DD',
+    day: placeholders?.day || formatMessage(messages$8.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages$8.monthLabel),
-    year: placeholders?.year || 'YYYY'
+    year: placeholders?.year || formatMessage(messages$8.yearPlaceholder)
   };
   const getDateAsString = date => {
     if (!isDateValid(date)) {
@@ -3424,7 +3413,7 @@ const DateTrigger = ({
       }) : /*#__PURE__*/jsx("span", {
         className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
         children: placeholder
-      }), !onClear ? /*#__PURE__*/jsx(Chevron$1, {
+      }), !onClear ? /*#__PURE__*/jsx(Chevron, {
         orientation: Position.BOTTOM,
         disabled: disabled
       }) : null]
@@ -3513,7 +3502,7 @@ const DateHeader = ({
         className: `d-inline-flex ${buttonClasses}`,
         "aria-label": `${intl.formatMessage(messages$7.previous)} ${dateMode}`,
         onClick: onPreviousClick,
-        children: /*#__PURE__*/jsx(Chevron$1, {
+        children: /*#__PURE__*/jsx(Chevron, {
           orientation: Position.LEFT,
           className: "left-single-direction",
           size: Size.MEDIUM
@@ -3536,7 +3525,7 @@ const DateHeader = ({
         className: `d-inline-flex ${buttonClasses}`,
         "aria-label": `${useIntl().formatMessage(messages$7.next)} ${dateMode}`,
         onClick: onNextClick,
-        children: /*#__PURE__*/jsx(Chevron$1, {
+        children: /*#__PURE__*/jsx(Chevron, {
           orientation: Position.RIGHT,
           className: "right-single-direction",
           size: Size.MEDIUM
@@ -4490,7 +4479,7 @@ const NavigationOption = /*#__PURE__*/forwardRef(({
     ref: reference,
     as: component,
     className: classNames('np-navigation-option', className),
-    button: /*#__PURE__*/jsx(Chevron$1, {
+    button: /*#__PURE__*/jsx(Chevron, {
       orientation: Position.RIGHT,
       disabled: disabled,
       className: "d-block"
@@ -10212,8 +10201,10 @@ var en = {
 	"neptune.ClearButton.ariaLabel": "Clear",
 	"neptune.CloseButton.ariaLabel": "Close",
 	"neptune.DateInput.day.label": "Day",
+	"neptune.DateInput.day.placeholder": "DD",
 	"neptune.DateInput.month.label": "Month",
 	"neptune.DateInput.year.label": "Year",
+	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "day",
 	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
 	"neptune.DateLookup.month": "month",
@@ -11136,7 +11127,7 @@ function Select({
       }) : /*#__PURE__*/jsx("span", {
         className: s('form-control-placeholder'),
         children: placeholder
-      }), /*#__PURE__*/jsx(Chevron$1
+      }), /*#__PURE__*/jsx(Chevron
       // disabled={disabled}
       , {
         className: classNames(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
@@ -15609,5 +15600,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$1 as 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$1 as 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$1 as 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, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as 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$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$1 as 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$1 as 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, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as 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