@transferwise/components 46.11.0 → 46.13.0

package/build/index.js

@@ -1901,6 +1901,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
+  const titleId = reactId.useId();
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -1908,13 +1909,16 @@ const Drawer = ({
       open: open,
       position: isMobile ? exports.Position.BOTTOM : position,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-drawer', className),
         role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames__default.default('np-drawer', className),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: classNames__default.default('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            id: titleId,
             type: exports.Typography.TITLE_BODY,
             children: headerTitle
           }), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
@@ -5956,6 +5960,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
+  const titleId = reactId.useId();
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -5983,11 +5988,12 @@ const Modal = ({
         className: classNames__default.default('tw-modal', 'd-flex', 'fade', 'outline-none', scroll === exports.Scroll.CONTENT && 'tw-modal--scrollable', className),
         ...otherProps,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          role: "dialog",
+          "aria-modal": true,
+          "aria-labelledby": titleId,
           className: classNames__default.default('tw-modal-dialog', 'd-flex', {
             [`tw-modal-${size}`]: size
           }),
-          "aria-modal": true,
-          role: "dialog",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: classNames__default.default('tw-modal-content', 'd-flex', 'flex-column', 'justify-content-between', {
               'tw-modal-compact': isCompact,
@@ -5998,6 +6004,7 @@ const Modal = ({
                 'modal--withoutborder': !title || noDivider
               }),
               children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
+                id: titleId,
                 type: exports.Typography.TITLE_BODY,
                 className: "tw-modal-title",
                 children: title
@@ -6027,7 +6034,8 @@ const Popover$1 = ({
   className,
   content,
   preferredPlacement,
-  title
+  title,
+  onClose
 }) => {
   logActionRequired({
     preferredPlacement
@@ -6037,7 +6045,10 @@ const Popover$1 = ({
   const {
     isModern
   } = componentsTheming.useTheme();
-  const onClose = () => setOpen(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     className: classNames__default.default('np-popover', className),
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -6057,7 +6068,7 @@ const Popover$1 = ({
       position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
       arrow: true,
       className: "np-popover__container",
-      onClose: onClose,
+      onClose: handleOnClose,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
         "aria-hidden": !open,
@@ -6090,6 +6101,7 @@ Popover$1.propTypes = {
    * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
    */
   preferredPlacement: PropTypes__default.default.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
+  onClose: PropTypes__default.default.func,
   title: PropTypes__default.default.node
 };
 const deprecatedPlacements = {
@@ -12244,8 +12256,10 @@ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDispl
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 class TypeaheadInput extends React.Component {
-  constructor() {
-    super();
+  inputRef = /*#__PURE__*/React.createRef();
+  sizerRef = /*#__PURE__*/React.createRef();
+  constructor(props) {
+    super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH
     };
@@ -12255,7 +12269,7 @@ class TypeaheadInput extends React.Component {
       autoFocus
     } = this.props;
     if (autoFocus) {
-      this.inputRef.focus();
+      this.inputRef.current?.focus();
     }
   }
   componentDidUpdate(previousProps) {
@@ -12266,7 +12280,7 @@ class TypeaheadInput extends React.Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10)
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
       });
     });
   };
@@ -12291,9 +12305,7 @@ class TypeaheadInput extends React.Component {
     } = this.state;
     const hasPlaceholder = !multiple || selected.length === 0;
     return /*#__PURE__*/jsxRuntime.jsx(Input, {
-      ref: reference => {
-        this.inputRef = reference;
-      },
+      ref: this.inputRef,
       className: classNames__default.default(multiple && 'typeahead__input'),
       name: name,
       id: `input-${typeaheadId}`,
@@ -12326,11 +12338,11 @@ class TypeaheadInput extends React.Component {
     } = this.props;
     return multiple ? /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "form-control typeahead__input-container",
-      style: maxHeight && {
+      style: {
         maxHeight
       },
       onClick: () => {
-        this.inputRef.focus();
+        this.inputRef.current?.focus();
       },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "typeahead__input-wrapper",
@@ -12338,39 +12350,13 @@ class TypeaheadInput extends React.Component {
           className: "typeahead__input-aligner"
         })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: reference => {
-          this.sizerRef = reference;
-        },
+        ref: this.sizerRef,
         className: "sizer form-control typeahead__input",
         children: value
       })]
     }) : this.renderInput();
   }
 }
-TypeaheadInput.propTypes = {
-  typeaheadId: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  autoFocus: PropTypes__default.default.bool,
-  multiple: PropTypes__default.default.bool.isRequired,
-  value: PropTypes__default.default.string.isRequired,
-  selected: PropTypes__default.default.arrayOf(PropTypes__default.default.object),
-  placeholder: PropTypes__default.default.string,
-  optionsShown: PropTypes__default.default.bool,
-  maxHeight: PropTypes__default.default.number,
-  autoComplete: PropTypes__default.default.string.isRequired,
-  onChange: PropTypes__default.default.func.isRequired,
-  renderChip: PropTypes__default.default.func.isRequired,
-  onKeyDown: PropTypes__default.default.func.isRequired,
-  onFocus: PropTypes__default.default.func.isRequired,
-  onPaste: PropTypes__default.default.func.isRequired
-};
-TypeaheadInput.defaultProps = {
-  autoFocus: false,
-  maxHeight: null,
-  placeholder: '',
-  optionsShown: false,
-  selected: []
-};
 
 function highlight(value, query) {
   if (value && query) {
@@ -12391,9 +12377,9 @@ function highlight(value, query) {
 const Option = props => {
   const {
     option,
-    selected,
-    onClick,
-    query
+    selected = false,
+    onClick = () => {},
+    query = ''
   } = props;
   const {
     label,
@@ -12423,46 +12409,48 @@ const Option = props => {
     })
   });
 };
-Option.propTypes = {
-  option: PropTypes__default.default.shape({
-    label: PropTypes__default.default.string.isRequired,
-    note: PropTypes__default.default.string,
-    secondary: PropTypes__default.default.string
-  }).isRequired,
-  query: PropTypes__default.default.string,
-  selected: PropTypes__default.default.bool,
-  onClick: PropTypes__default.default.func
-};
-Option.defaultProps = {
-  selected: false,
-  query: '',
-  onClick: () => {}
-};
-var TypeaheadOption = Option;
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
 class Typeahead extends React.Component {
+  static defaultProps = {
+    allowNew: false,
+    autoFillOnBlur: true,
+    autoFocus: false,
+    chipSeparators: [],
+    clearable: true,
+    initialValue: [],
+    inputAutoComplete: 'new-password',
+    minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
+    multiple: false,
+    searchDelay: SEARCH_DELAY,
+    showSuggestions: true,
+    showNewEntry: true,
+    size: exports.Size.MEDIUM,
+    validateChip: () => true
+  };
   constructor(props) {
     super(props);
     const {
       searchDelay,
       initialValue,
       multiple
-    } = props;
+    } = this.props;
     this.handleSearchDebounced = debounce__default.default(this.handleSearch, searchDelay);
     const initialQuery = !multiple && initialValue.length > 0 ? initialValue[0].label : '';
     this.state = {
       selected: initialValue,
       errorState: false,
       query: initialQuery,
-      keyboardFocusedOptionIndex: null
+      keyboardFocusedOptionIndex: null,
+      optionsShown: false,
+      isFocused: false
     };
   }
+  handleSearchDebounced;
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState(previousState => {
@@ -12476,6 +12464,7 @@ class Typeahead extends React.Component {
           };
         }
         return {
+          selected: previousState.selected,
           query: ''
         };
       });
@@ -12485,13 +12474,8 @@ class Typeahead extends React.Component {
     this.handleSearchDebounced.cancel();
   }
   handleOnFocus = () => {
-    const {
-      onFocus
-    } = this.props;
     this.showMenu();
-    if (onFocus) {
-      this.props.onFocus();
-    }
+    this.props.onFocus?.();
   };
   onOptionSelected = (event, item) => {
     event.preventDefault();
@@ -12574,7 +12558,7 @@ class Typeahead extends React.Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (options[keyboardFocusedOptionIndex]) {
+          if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({
@@ -12626,13 +12610,6 @@ class Typeahead extends React.Component {
       query
     });
   };
-  stopPropagation = event => {
-    event.stopPropagation();
-    event.preventDefault();
-    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-  };
   handleSearch = query => {
     const {
       onSearch
@@ -12717,7 +12694,7 @@ class Typeahead extends React.Component {
     }
   };
   renderChip = (option, idx) => {
-    const valid = this.props.validateChip(option);
+    const valid = this.props.validateChip?.(option);
     return /*#__PURE__*/jsxRuntime.jsx(Chip, {
       label: option.label,
       className: classNames__default.default('m-t-1', {
@@ -12752,7 +12729,7 @@ class Typeahead extends React.Component {
         className: "dropdown-menu",
         role: "menu",
         "aria-labelledby": "dropdownMenu1",
-        children: [optionsToRender.map((option, idx) => /*#__PURE__*/jsxRuntime.jsx(TypeaheadOption, {
+        children: [optionsToRender.map((option, idx) => /*#__PURE__*/jsxRuntime.jsx(Option, {
           query: query,
           option: option,
           selected: keyboardFocusedOptionIndex === idx,
@@ -12795,16 +12772,18 @@ class Typeahead extends React.Component {
     const menu = this.renderMenu({
       footer,
       options,
+      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
       showNewEntry,
       dropdownOpen
     });
-    const hasError = errorState || alert && alert.type === exports.Sentiment.ERROR;
-    const displayAlert = !errorState && alert || alert && alert.type === exports.Sentiment.ERROR;
-    const hasWarning = displayAlert && alert.type === exports.Sentiment.WARNING;
-    const hasInfo = displayAlert && alert.type === exports.Sentiment.NEUTRAL;
+    const alertType = alert?.type ?? exports.Sentiment.NEUTRAL;
+    const hasError = errorState || alert && alertType === exports.Sentiment.ERROR;
+    const displayAlert = !errorState && alert || alert && alertType === exports.Sentiment.ERROR;
+    const hasWarning = displayAlert && alertType === exports.Sentiment.WARNING;
+    const hasInfo = displayAlert && alertType === exports.Sentiment.NEUTRAL;
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       id: id,
       className: classNames__default.default('typeahead', `typeahead-${size}`, {
@@ -12813,7 +12792,7 @@ class Typeahead extends React.Component {
         'typeahead--multiple': multiple,
         open: dropdownOpen
       }),
-      onClick: this.stopPropagation,
+      onClick: stopPropagation$1,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames__default.default('form-group', {
           'has-error': hasError,
@@ -12834,6 +12813,7 @@ class Typeahead extends React.Component {
             placeholder,
             selected,
             maxHeight,
+            id: id,
             name: name,
             value: query,
             typeaheadId: id,
@@ -12860,72 +12840,6 @@ class Typeahead extends React.Component {
     });
   }
 }
-Typeahead.propTypes = {
-  id: PropTypes__default.default.string.isRequired,
-  name: PropTypes__default.default.string.isRequired,
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    label: PropTypes__default.default.string.isRequired,
-    note: PropTypes__default.default.string,
-    secondary: PropTypes__default.default.string,
-    value: PropTypes__default.default.object
-  })).isRequired,
-  initialValue: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    label: PropTypes__default.default.string.isRequired,
-    note: PropTypes__default.default.string,
-    secondary: PropTypes__default.default.string
-  })),
-  onChange: PropTypes__default.default.func.isRequired,
-  allowNew: PropTypes__default.default.bool,
-  autoFocus: PropTypes__default.default.bool,
-  clearable: PropTypes__default.default.bool,
-  multiple: PropTypes__default.default.bool,
-  showSuggestions: PropTypes__default.default.bool,
-  showNewEntry: PropTypes__default.default.bool,
-  searchDelay: PropTypes__default.default.number,
-  maxHeight: PropTypes__default.default.number,
-  minQueryLength: PropTypes__default.default.number,
-  addon: PropTypes__default.default.node,
-  placeholder: PropTypes__default.default.string,
-  alert: PropTypes__default.default.shape({
-    message: PropTypes__default.default.string.isRequired,
-    type: PropTypes__default.default.oneOf(['error', 'warning', 'neutral']).isRequired
-  }),
-  footer: PropTypes__default.default.node,
-  validateChip: PropTypes__default.default.func,
-  onSearch: PropTypes__default.default.func,
-  onBlur: PropTypes__default.default.func,
-  onInputChange: PropTypes__default.default.func,
-  onFocus: PropTypes__default.default.func,
-  chipSeparators: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
-  size: PropTypes__default.default.oneOf(['md', 'lg']),
-  inputAutoComplete: PropTypes__default.default.string,
-  autoFillOnBlur: PropTypes__default.default.bool
-};
-Typeahead.defaultProps = {
-  allowNew: false,
-  autoFocus: false,
-  clearable: true,
-  multiple: false,
-  maxHeight: null,
-  showSuggestions: true,
-  showNewEntry: true,
-  searchDelay: SEARCH_DELAY,
-  minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
-  addon: null,
-  placeholder: null,
-  alert: null,
-  footer: null,
-  size: exports.Size.MEDIUM,
-  chipSeparators: [],
-  initialValue: [],
-  onSearch: null,
-  onBlur: null,
-  onInputChange: null,
-  onFocus: null,
-  validateChip: () => true,
-  inputAutoComplete: 'new-password',
-  autoFillOnBlur: true
-};
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 exports.UploadStep = void 0;
@@ -15474,10 +15388,10 @@ var zhHK = {
 	"neptune.ClearButton.ariaLabel": "清除",
 	"neptune.CloseButton.ariaLabel": "關閉",
 	"neptune.DateInput.day.label": "日",
-	"neptune.DateInput.day.placeholder": "日",
+	"neptune.DateInput.day.placeholder": "DD",
 	"neptune.DateInput.month.label": "月",
 	"neptune.DateInput.year.label": "年",
-	"neptune.DateInput.year.placeholder": "年",
+	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "日",
 	"neptune.DateLookup.goTo20YearView": "切換至20年視圖",
 	"neptune.DateLookup.month": "月",