@transferwise/components 0.0.0-experimental-4d1e1cf → 0.0.0-experimental-a53ae95

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 Temp
+# Neptune Web React Components
 
 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,6 +48,19 @@ 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

@@ -12210,10 +12210,8 @@ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 const DEFAULT_INPUT_MIN_WIDTH = 10;
 class TypeaheadInput extends Component {
-  inputRef = /*#__PURE__*/createRef();
-  sizerRef = /*#__PURE__*/createRef();
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH
     };
@@ -12223,7 +12221,7 @@ class TypeaheadInput extends Component {
       autoFocus
     } = this.props;
     if (autoFocus) {
-      this.inputRef.current?.focus();
+      this.inputRef.focus();
     }
   }
   componentDidUpdate(previousProps) {
@@ -12234,19 +12232,19 @@ class TypeaheadInput extends Component {
   recalculateWidth = () => {
     requestAnimationFrame(() => {
       this.setState({
-        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10)
       });
     });
   };
   renderInput = () => {
     const {
       typeaheadId,
-      autoFocus = false,
+      autoFocus,
       multiple,
       name,
-      optionsShown = false,
-      placeholder = '',
-      selected = [],
+      optionsShown,
+      placeholder,
+      selected,
       value,
       onChange,
       onKeyDown,
@@ -12259,7 +12257,9 @@ class TypeaheadInput extends Component {
     } = this.state;
     const hasPlaceholder = !multiple || selected.length === 0;
     return /*#__PURE__*/jsx(Input, {
-      ref: this.inputRef,
+      ref: reference => {
+        this.inputRef = reference;
+      },
       className: classNames(multiple && 'typeahead__input'),
       name: name,
       id: `input-${typeaheadId}`,
@@ -12285,18 +12285,18 @@ class TypeaheadInput extends Component {
   render() {
     const {
       multiple,
-      selected = [],
+      selected,
       value,
-      maxHeight = null,
+      maxHeight,
       renderChip
     } = this.props;
     return multiple ? /*#__PURE__*/jsxs("div", {
       className: "form-control typeahead__input-container",
-      style: {
-        maxHeight: maxHeight ?? undefined
+      style: maxHeight && {
+        maxHeight
       },
       onClick: () => {
-        this.inputRef.current?.focus();
+        this.inputRef.focus();
       },
       children: [/*#__PURE__*/jsxs("div", {
         className: "typeahead__input-wrapper",
@@ -12304,13 +12304,39 @@ class TypeaheadInput extends Component {
           className: "typeahead__input-aligner"
         })]
       }), /*#__PURE__*/jsx("div", {
-        ref: this.sizerRef,
+        ref: reference => {
+          this.sizerRef = reference;
+        },
         className: "sizer form-control typeahead__input",
         children: value
       })]
     }) : 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) {
@@ -12331,9 +12357,9 @@ function highlight(value, query) {
 const Option = props => {
   const {
     option,
-    selected = false,
-    onClick = () => {},
-    query = ''
+    selected,
+    onClick,
+    query
   } = props;
   const {
     label,
@@ -12363,32 +12389,30 @@ 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 {
-  static defaultProps = {
-    addon: null,
-    allowNew: false,
-    autoFillOnBlur: true,
-    autoFocus: false,
-    chipSeparators: [],
-    clearable: true,
-    footer: null,
-    initialValue: [],
-    inputAutoComplete: 'new-password',
-    maxHeight: null,
-    minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
-    multiple: false,
-    searchDelay: SEARCH_DELAY,
-    showSuggestions: true,
-    showNewEntry: true,
-    size: Size.MEDIUM,
-    validateChip: () => true
-  };
   constructor(props) {
     super(props);
     const {
@@ -12405,7 +12429,6 @@ class Typeahead extends Component {
       keyboardFocusedOptionIndex: null
     };
   }
-  handleSearchDebounced;
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.multiple !== this.props.multiple) {
       this.setState(previousState => {
@@ -12419,8 +12442,7 @@ class Typeahead extends Component {
           };
         }
         return {
-          query: '',
-          selected: previousState.selected
+          query: ''
         };
       });
     }
@@ -12429,8 +12451,13 @@ class Typeahead extends Component {
     this.handleSearchDebounced.cancel();
   }
   handleOnFocus = () => {
+    const {
+      onFocus
+    } = this.props;
     this.showMenu();
-    this.props.onFocus?.();
+    if (onFocus) {
+      this.props.onFocus();
+    }
   };
   onOptionSelected = (event, item) => {
     event.preventDefault();
@@ -12513,7 +12540,7 @@ class Typeahead extends Component {
           break;
         case 'Enter':
           event.preventDefault();
-          if (keyboardFocusedOptionIndex && options[keyboardFocusedOptionIndex]) {
+          if (options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
           } else if (allowNew && query.trim()) {
             this.selectItem({
@@ -12565,6 +12592,13 @@ class Typeahead extends Component {
       query
     });
   };
+  stopPropagation = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
+  };
   handleSearch = query => {
     const {
       onSearch
@@ -12649,7 +12683,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', {
@@ -12684,7 +12718,7 @@ class Typeahead extends Component {
         className: "dropdown-menu",
         role: "menu",
         "aria-labelledby": "dropdownMenu1",
-        children: [optionsToRender.map((option, idx) => /*#__PURE__*/jsx(Option, {
+        children: [optionsToRender.map((option, idx) => /*#__PURE__*/jsx(TypeaheadOption, {
           query: query,
           option: option,
           selected: keyboardFocusedOptionIndex === idx,
@@ -12727,7 +12761,6 @@ class Typeahead extends Component {
     const menu = this.renderMenu({
       footer,
       options,
-      id,
       keyboardFocusedOptionIndex,
       query,
       allowNew,
@@ -12746,7 +12779,7 @@ class Typeahead extends Component {
         'typeahead--multiple': multiple,
         open: dropdownOpen
       }),
-      onClick: stopPropagation$1,
+      onClick: this.stopPropagation,
       children: /*#__PURE__*/jsxs("div", {
         className: classNames('form-group', {
           'has-error': hasError,
@@ -12767,7 +12800,6 @@ class Typeahead extends Component {
             placeholder,
             selected,
             maxHeight,
-            id: id,
             name: name,
             value: query,
             typeaheadId: id,
@@ -12794,6 +12826,72 @@ 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;