@transferwise/components 0.0.0-experimental-77b2752 → 0.0.0-experimental-c9a3ec4

package/build/index.esm.js

@@ -6733,6 +6733,7 @@ function SelectInputClearButton({
 }
 const noop = () => {};
 function SelectInput({
+  id,
   name,
   multiple,
   placeholder,
@@ -6798,6 +6799,7 @@ function SelectInput({
           // eslint-disable-next-line react/jsx-no-constructed-context-values
           value: {
             ref: mergeRefs([ref, triggerRef]),
+            id,
             ...mergeProps({
               onClick: () => {
                 setOpen(prev => !prev);
@@ -12200,8 +12202,10 @@ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 class TypeaheadInput extends Component {
-  constructor() {
-    super();
+  inputRef = null;
+  sizerRef = null;
+  constructor(props) {
+    super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH
     };
@@ -12211,7 +12215,7 @@ class TypeaheadInput extends Component {
       autoFocus
     } = this.props;
     if (autoFocus) {
-      this.inputRef.focus();
+      this.inputRef?.focus();
     }
   }
   componentDidUpdate(previousProps) {
@@ -12222,19 +12226,19 @@ class TypeaheadInput extends Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10)
+        inputWidth: this.sizerRef ? Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10) : DEFAULT_INPUT_MIN_WIDTH
       });
     });
   };
   renderInput = () => {
     const {
       typeaheadId,
-      autoFocus,
+      autoFocus = false,
       multiple,
       name,
-      optionsShown,
-      placeholder,
-      selected,
+      optionsShown = false,
+      placeholder = '',
+      selected = [],
       value,
       onChange,
       onKeyDown,
@@ -12275,18 +12279,18 @@ class TypeaheadInput extends Component {
   render() {
     const {
       multiple,
-      selected,
+      selected = [],
       value,
-      maxHeight,
+      maxHeight = null,
       renderChip
     } = this.props;
     return multiple ? /*#__PURE__*/jsxs("div", {
       className: "form-control typeahead__input-container",
-      style: maxHeight && {
-        maxHeight
+      style: {
+        maxHeight: maxHeight ?? undefined
       },
       onClick: () => {
-        this.inputRef.focus();
+        this.inputRef?.focus();
       },
       children: [/*#__PURE__*/jsxs("div", {
         className: "typeahead__input-wrapper",
@@ -12303,30 +12307,6 @@ class TypeaheadInput extends Component {
     }) : this.renderInput();
   }
 }
-TypeaheadInput.propTypes = {
-  typeaheadId: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  autoFocus: PropTypes.bool,
-  multiple: PropTypes.bool.isRequired,
-  value: PropTypes.string.isRequired,
-  selected: PropTypes.arrayOf(PropTypes.object),
-  placeholder: PropTypes.string,
-  optionsShown: PropTypes.bool,
-  maxHeight: PropTypes.number,
-  autoComplete: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  renderChip: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func.isRequired,
-  onFocus: PropTypes.func.isRequired,
-  onPaste: PropTypes.func.isRequired
-};
-TypeaheadInput.defaultProps = {
-  autoFocus: false,
-  maxHeight: null,
-  placeholder: '',
-  optionsShown: false,
-  selected: []
-};
 
 function highlight(value, query) {
   if (value && query) {
@@ -12347,9 +12327,9 @@ function highlight(value, query) {
 const Option = props => {
   const {
     option,
-    selected,
-    onClick,
-    query
+    selected = false,
+    onClick = () => {},
+    query = ''
   } = props;
   const {
     label,
@@ -12379,35 +12359,19 @@ const Option = props => {
     })
   });
 };
-Option.propTypes = {
-  option: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    note: PropTypes.string,
-    secondary: PropTypes.string
-  }).isRequired,
-  query: PropTypes.string,
-  selected: PropTypes.bool,
-  onClick: PropTypes.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 Component {
   constructor(props) {
     super(props);
     const {
-      searchDelay,
-      initialValue,
+      searchDelay = SEARCH_DELAY,
+      initialValue = [],
       multiple
     } = props;
     this.handleSearchDebounced = debounce(this.handleSearch, searchDelay);
@@ -12419,6 +12383,7 @@ class Typeahead extends Component {
       keyboardFocusedOptionIndex: null
     };
   }
+  handleSearchDebounced;
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState(previousState => {
@@ -12432,7 +12397,8 @@ class Typeahead extends Component {
           };
         }
         return {
-          query: ''
+          query: '',
+          selected: previousState.selected
         };
       });
     }
@@ -12441,18 +12407,14 @@ class Typeahead extends Component {
     this.handleSearchDebounced.cancel();
   }
   handleOnFocus = () => {
-    const {
-      onFocus
-    } = this.props;
     this.showMenu();
-    if (onFocus) {
-      this.props.onFocus();
-    }
+    this.props.onFocus?.();
   };
   onOptionSelected = (event, item) => {
     event.preventDefault();
     this.selectItem(item);
   };
+  // START HERE
   handleOnChange = event => {
     const {
       optionsShown,
@@ -12480,9 +12442,9 @@ class Typeahead extends Component {
   };
   handleOnPaste = event => {
     const {
-      allowNew,
-      multiple,
-      chipSeparators
+      allowNew = false,
+      multiple = false,
+      chipSeparators = []
     } = this.props;
     const {
       selected
@@ -12501,10 +12463,10 @@ class Typeahead extends Component {
   };
   handleOnKeyDown = event => {
     const {
-      showSuggestions,
-      allowNew,
-      multiple,
-      chipSeparators,
+      showSuggestions = true,
+      allowNew = false,
+      multiple = false,
+      chipSeparators = [],
       options
     } = this.props;
     const {
@@ -12530,7 +12492,7 @@ class Typeahead extends Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (options[keyboardFocusedOptionIndex]) {
+          if (keyboardFocusedOptionIndex && options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({
@@ -12645,7 +12607,7 @@ class Typeahead extends Component {
   updateSelectedValue = selected => {
     const {
       onChange,
-      validateChip
+      validateChip = () => true
     } = this.props;
     const errorState = selected.some(chip => !validateChip(chip));
     this.setState({
@@ -12673,7 +12635,7 @@ class Typeahead extends Component {
     }
   };
   renderChip = (option, idx) => {
-    const valid = this.props.validateChip(option);
+    const valid = this.props.validateChip?.(option);
     return /*#__PURE__*/jsx(Chip, {
       label: option.label,
       className: classNames('m-t-1', {
@@ -12723,21 +12685,21 @@ class Typeahead extends Component {
     const {
       id,
       placeholder,
-      multiple,
-      size,
-      addon,
+      multiple = false,
+      size = Size.MEDIUM,
+      addon = null,
       name,
-      clearable,
-      allowNew,
-      footer,
-      showSuggestions,
-      showNewEntry,
+      clearable = true,
+      allowNew = false,
+      footer = null,
+      showSuggestions = true,
+      showNewEntry = true,
       options,
-      minQueryLength,
-      autoFocus,
-      maxHeight,
-      alert,
-      inputAutoComplete
+      minQueryLength = DEFAULT_MIN_QUERY_LENGTH,
+      autoFocus = false,
+      maxHeight = null,
+      alert = null,
+      inputAutoComplete = 'new-password'
     } = this.props;
     const {
       errorState,
@@ -12751,6 +12713,7 @@ class Typeahead extends Component {
     const menu = this.renderMenu({
       footer,
       options,
+      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -12816,72 +12779,6 @@ class Typeahead extends Component {
     });
   }
 }
-Typeahead.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    note: PropTypes.string,
-    secondary: PropTypes.string,
-    value: PropTypes.object
-  })).isRequired,
-  initialValue: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    note: PropTypes.string,
-    secondary: PropTypes.string
-  })),
-  onChange: PropTypes.func.isRequired,
-  allowNew: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  clearable: PropTypes.bool,
-  multiple: PropTypes.bool,
-  showSuggestions: PropTypes.bool,
-  showNewEntry: PropTypes.bool,
-  searchDelay: PropTypes.number,
-  maxHeight: PropTypes.number,
-  minQueryLength: PropTypes.number,
-  addon: PropTypes.node,
-  placeholder: PropTypes.string,
-  alert: PropTypes.shape({
-    message: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['error', 'warning', 'neutral']).isRequired
-  }),
-  footer: PropTypes.node,
-  validateChip: PropTypes.func,
-  onSearch: PropTypes.func,
-  onBlur: PropTypes.func,
-  onInputChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  chipSeparators: PropTypes.arrayOf(PropTypes.string),
-  size: PropTypes.oneOf(['md', 'lg']),
-  inputAutoComplete: PropTypes.string,
-  autoFillOnBlur: PropTypes.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: 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
 var UploadStep;