@transferwise/components 46.45.0 → 46.46.1

package/build/typeahead/typeaheadInput/TypeaheadInput.mjs

@@ -0,0 +1,114 @@
+import classNames from 'classnames';
+import { Component, createRef } from 'react';
+import { Input } from '../../inputs/Input.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/* eslint-disable jsx-a11y/no-autofocus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* 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);
+    this.state = {
+      inputWidth: DEFAULT_INPUT_MIN_WIDTH
+    };
+  }
+  componentDidMount() {
+    const {
+      autoFocus
+    } = this.props;
+    if (autoFocus) {
+      this.inputRef.current?.focus();
+    }
+  }
+  componentDidUpdate(previousProps) {
+    if (previousProps.value !== this.props.value && this.props.multiple) {
+      this.recalculateWidth();
+    }
+  }
+  recalculateWidth = () => {
+    requestAnimationFrame(() => {
+      this.setState({
+        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
+      });
+    });
+  };
+  renderInput = () => {
+    const {
+      typeaheadId,
+      autoFocus,
+      multiple,
+      name,
+      dropdownOpen,
+      placeholder,
+      selected,
+      value,
+      onChange,
+      onKeyDown,
+      onFocus,
+      onPaste,
+      autoComplete
+    } = this.props;
+    const {
+      inputWidth
+    } = this.state;
+    const hasPlaceholder = !multiple || selected.length === 0;
+    return /*#__PURE__*/jsx(Input, {
+      ref: this.inputRef,
+      className: classNames(multiple && 'typeahead__input'),
+      name: name,
+      id: `input-${typeaheadId}`,
+      autoFocus: autoFocus,
+      placeholder: hasPlaceholder ? placeholder : '',
+      "aria-autocomplete": "list",
+      "aria-expanded": dropdownOpen,
+      "aria-haspopup": "listbox",
+      "aria-controls": `menu-${typeaheadId}`,
+      autoComplete: autoComplete,
+      role: "combobox",
+      value: value,
+      style: multiple && selected.length > 0 ? {
+        width: inputWidth
+      } : {},
+      onChange: onChange,
+      onKeyDown: onKeyDown,
+      onClick: onFocus,
+      onFocus: onFocus,
+      onPaste: onPaste
+    });
+  };
+  render() {
+    const {
+      multiple,
+      selected,
+      value,
+      maxHeight,
+      renderChip
+    } = this.props;
+    return multiple ? /*#__PURE__*/jsxs("div", {
+      className: "form-control typeahead__input-container",
+      style: {
+        maxHeight
+      },
+      onClick: () => {
+        this.inputRef.current?.focus();
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "typeahead__input-wrapper",
+        children: [selected && selected.map((chip, idx) => renderChip(chip, idx)), this.renderInput(), /*#__PURE__*/jsx("div", {
+          className: "typeahead__input-aligner"
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        ref: this.sizerRef,
+        className: "sizer form-control typeahead__input",
+        children: value
+      })]
+    }) : this.renderInput();
+  }
+}
+
+export { TypeaheadInput as default };
+//# sourceMappingURL=TypeaheadInput.mjs.map

package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeaheadInput.mjs","sources":["../../../src/typeahead/typeaheadInput/TypeaheadInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport classnames from 'classnames';\nimport { Component, createRef, ReactNode } from 'react';\n\nimport { Input } from '../../inputs/Input';\nimport { TypeaheadOption, TypeaheadProps } from '../Typeahead';\n\nconst DEFAULT_INPUT_MIN_WIDTH = 10;\n\nexport type TypeaheadInputProps<T> = {\n  typeaheadId: string;\n  value: string;\n  selected: readonly TypeaheadOption<T>[];\n  dropdownOpen?: boolean;\n  autoComplete: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n  onFocus: () => void;\n  onPaste: React.ClipboardEventHandler<HTMLInputElement>;\n  renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;\n} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;\n\ntype TypeaheadInputState = {\n  inputWidth: number;\n};\n\nexport default class TypeaheadInput<T> extends Component<\n  TypeaheadInputProps<T>,\n  TypeaheadInputState\n> {\n  inputRef = createRef<HTMLInputElement>();\n  sizerRef = createRef<HTMLDivElement>();\n\n  constructor(props: TypeaheadInputProps<T>) {\n    super(props);\n    this.state = {\n      inputWidth: DEFAULT_INPUT_MIN_WIDTH,\n    };\n  }\n\n  componentDidMount() {\n    const { autoFocus } = this.props;\n    if (autoFocus) {\n      this.inputRef.current?.focus();\n    }\n  }\n\n  componentDidUpdate(previousProps: TypeaheadInputProps<T>) {\n    if (previousProps.value !== this.props.value && this.props.multiple) {\n      this.recalculateWidth();\n    }\n  }\n\n  recalculateWidth = () => {\n    requestAnimationFrame(() => {\n      this.setState({\n        inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10),\n      });\n    });\n  };\n\n  renderInput = () => {\n    const {\n      typeaheadId,\n      autoFocus,\n      multiple,\n      name,\n      dropdownOpen,\n      placeholder,\n      selected,\n      value,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onPaste,\n      autoComplete,\n    } = this.props;\n    const { inputWidth } = this.state;\n\n    const hasPlaceholder = !multiple || selected.length === 0;\n    return (\n      <Input\n        ref={this.inputRef}\n        className={classnames(multiple && 'typeahead__input')}\n        name={name}\n        id={`input-${typeaheadId}`}\n        autoFocus={autoFocus}\n        placeholder={hasPlaceholder ? placeholder : ''}\n        aria-autocomplete=\"list\"\n        aria-expanded={dropdownOpen}\n        aria-haspopup=\"listbox\"\n        aria-controls={`menu-${typeaheadId}`}\n        autoComplete={autoComplete}\n        role=\"combobox\"\n        value={value}\n        style={multiple && selected.length > 0 ? { width: inputWidth } : {}}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        onClick={onFocus}\n        onFocus={onFocus}\n        onPaste={onPaste}\n      />\n    );\n  };\n\n  render() {\n    const { multiple, selected, value, maxHeight, renderChip } = this.props;\n\n    return multiple ? (\n      <div\n        className=\"form-control typeahead__input-container\"\n        style={{ maxHeight }}\n        onClick={() => {\n          this.inputRef.current?.focus();\n        }}\n      >\n        <div className=\"typeahead__input-wrapper\">\n          {selected && selected.map((chip, idx) => renderChip(chip, idx))}\n\n          {this.renderInput()}\n          <div className=\"typeahead__input-aligner\" />\n        </div>\n        <div ref={this.sizerRef} className=\"sizer form-control typeahead__input\">\n          {value}\n        </div>\n      </div>\n    ) : (\n      this.renderInput()\n    );\n  }\n}\n"],"names":["DEFAULT_INPUT_MIN_WIDTH","TypeaheadInput","Component","inputRef","createRef","sizerRef","constructor","props","state","inputWidth","componentDidMount","autoFocus","current","focus","componentDidUpdate","previousProps","value","multiple","recalculateWidth","requestAnimationFrame","setState","Math","max","scrollWidth","renderInput","typeaheadId","name","dropdownOpen","placeholder","selected","onChange","onKeyDown","onFocus","onPaste","autoComplete","hasPlaceholder","length","_jsx","Input","ref","className","classnames","id","role","style","width","onClick","render","maxHeight","renderChip","_jsxs","children","map","chip","idx"],"mappings":"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"}

package/build/typeahead/typeaheadOption/TypeaheadOption.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var classNames = require('classnames');
+var highlight = require('../util/highlight.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const Option = props => {
+  const {
+    option,
+    selected = false,
+    onClick = () => {},
+    query = ''
+  } = props;
+  const {
+    label,
+    note,
+    secondary
+  } = option;
+  return /*#__PURE__*/jsxRuntime.jsx("li", {
+    role: "option",
+    "aria-selected": "false",
+    className: classNames__default.default('typeahead__option tw-dropdown-item clickable', {
+      'tw-dropdown-item--focused': selected
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsxs("a", {
+      className: "dropdown-item",
+      href: "#",
+      tabIndex: -1,
+      onClick: onClick,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        children: highlight(label, query)
+      }), note && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-text-body-default m-l-1",
+        children: note
+      }), secondary && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "np-text-body-default text-ellipsis",
+        children: highlight(secondary, query)
+      })]
+    })
+  });
+};
+
+module.exports = Option;
+//# sourceMappingURL=TypeaheadOption.js.map

package/build/typeahead/typeaheadOption/TypeaheadOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeaheadOption.js","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/anchor-is-valid */\nimport classNames from 'classnames';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport highlight from '../util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  query?: string;\n};\n\nconst Option = <T,>(props: TypeaheadOptionProps<T>) => {\n  const { option, selected = false, onClick = () => {}, query = '' } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      role=\"option\"\n      aria-selected=\"false\"\n      className={classNames('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <span>{highlight(label, query)}</span>\n        {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <span className=\"np-text-body-default text-ellipsis\">{highlight(secondary, query)}</span>\n        )}\n      </a>\n    </li>\n  );\n};\n\nexport default Option;\n"],"names":["Option","props","option","selected","onClick","query","label","note","secondary","_jsx","role","className","classNames","children","_jsxs","href","tabIndex","highlight"],"mappings":";;;;;;;;;;AAAA;AAaMA,MAAAA,MAAM,GAAQC,KAA8B,IAAI;EACpD,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAO,EAAC;AAAEC,IAAAA,KAAK,GAAG,EAAA;AAAI,GAAA,GAAGJ,KAAK,CAAA;EAC1E,MAAM;IAAEK,KAAK;IAAEC,IAAI;AAAEC,IAAAA,SAAAA;AAAS,GAAE,GAAGN,MAAM,CAAA;AAEzC,EAAA,oBACEO,cAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAc,OAAO;AACrBC,IAAAA,SAAS,EAAEC,2BAAU,CAAC,8CAA8C,EAAE;AACpE,MAAA,2BAA2B,EAAET,QAAAA;AAC9B,KAAA,CAAE;AAAAU,IAAAA,QAAA,eAEHC,eAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,CAAC,CAAE;AAACZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAS,MAAAA,QAAA,gBACnEJ,cAAA,CAAA,MAAA,EAAA;AAAAI,QAAAA,QAAA,EAAOI,SAAS,CAACX,KAAK,EAAED,KAAK,CAAA;AAAC,OAAO,CACrC,EAACE,IAAI,iBAAIE,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN,IAAAA;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,cAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,oCAAoC;AAAAE,QAAAA,QAAA,EAAEI,SAAS,CAACT,SAAS,EAAEH,KAAK,CAAA;AAAC,OAAO,CACzF,CAAA;KACA,CAAA;AACL,GAAI,CAAC,CAAA;AAET;;;;"}

package/build/typeahead/typeaheadOption/TypeaheadOption.mjs

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import highlight from '../util/highlight.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const Option = props => {
+  const {
+    option,
+    selected = false,
+    onClick = () => {},
+    query = ''
+  } = props;
+  const {
+    label,
+    note,
+    secondary
+  } = option;
+  return /*#__PURE__*/jsx("li", {
+    role: "option",
+    "aria-selected": "false",
+    className: classNames('typeahead__option tw-dropdown-item clickable', {
+      'tw-dropdown-item--focused': selected
+    }),
+    children: /*#__PURE__*/jsxs("a", {
+      className: "dropdown-item",
+      href: "#",
+      tabIndex: -1,
+      onClick: onClick,
+      children: [/*#__PURE__*/jsx("span", {
+        children: highlight(label, query)
+      }), note && /*#__PURE__*/jsx("span", {
+        className: "np-text-body-default m-l-1",
+        children: note
+      }), secondary && /*#__PURE__*/jsx("span", {
+        className: "np-text-body-default text-ellipsis",
+        children: highlight(secondary, query)
+      })]
+    })
+  });
+};
+
+export { Option as default };
+//# sourceMappingURL=TypeaheadOption.mjs.map

package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeaheadOption.mjs","sources":["../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/anchor-is-valid */\nimport classNames from 'classnames';\n\nimport { TypeaheadOption } from '../Typeahead';\nimport highlight from '../util/highlight';\n\nexport type TypeaheadOptionProps<T> = {\n  option: TypeaheadOption<T>;\n  selected?: boolean;\n  onClick?: React.MouseEventHandler;\n  query?: string;\n};\n\nconst Option = <T,>(props: TypeaheadOptionProps<T>) => {\n  const { option, selected = false, onClick = () => {}, query = '' } = props;\n  const { label, note, secondary } = option;\n\n  return (\n    <li\n      role=\"option\"\n      aria-selected=\"false\"\n      className={classNames('typeahead__option tw-dropdown-item clickable', {\n        'tw-dropdown-item--focused': selected,\n      })}\n    >\n      <a className=\"dropdown-item\" href=\"#\" tabIndex={-1} onClick={onClick}>\n        <span>{highlight(label, query)}</span>\n        {note && <span className=\"np-text-body-default m-l-1\">{note}</span>}\n        {secondary && (\n          <span className=\"np-text-body-default text-ellipsis\">{highlight(secondary, query)}</span>\n        )}\n      </a>\n    </li>\n  );\n};\n\nexport default Option;\n"],"names":["Option","props","option","selected","onClick","query","label","note","secondary","_jsx","role","className","classNames","children","_jsxs","href","tabIndex","highlight"],"mappings":";;;;AAAA;AAaMA,MAAAA,MAAM,GAAQC,KAA8B,IAAI;EACpD,MAAM;IAAEC,MAAM;AAAEC,IAAAA,QAAQ,GAAG,KAAK;AAAEC,IAAAA,OAAO,GAAGA,MAAO,EAAC;AAAEC,IAAAA,KAAK,GAAG,EAAA;AAAI,GAAA,GAAGJ,KAAK,CAAA;EAC1E,MAAM;IAAEK,KAAK;IAAEC,IAAI;AAAEC,IAAAA,SAAAA;AAAS,GAAE,GAAGN,MAAM,CAAA;AAEzC,EAAA,oBACEO,GAAA,CAAA,IAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,eAAA,EAAc,OAAO;AACrBC,IAAAA,SAAS,EAAEC,UAAU,CAAC,8CAA8C,EAAE;AACpE,MAAA,2BAA2B,EAAET,QAAAA;AAC9B,KAAA,CAAE;AAAAU,IAAAA,QAAA,eAEHC,IAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,eAAe;AAACI,MAAAA,IAAI,EAAC,GAAG;MAACC,QAAQ,EAAE,CAAC,CAAE;AAACZ,MAAAA,OAAO,EAAEA,OAAQ;AAAAS,MAAAA,QAAA,gBACnEJ,GAAA,CAAA,MAAA,EAAA;AAAAI,QAAAA,QAAA,EAAOI,SAAS,CAACX,KAAK,EAAED,KAAK,CAAA;AAAC,OAAO,CACrC,EAACE,IAAI,iBAAIE,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,4BAA4B;AAAAE,QAAAA,QAAA,EAAEN,IAAAA;AAAI,OAAO,CAAC,EAClEC,SAAS,iBACRC,GAAA,CAAA,MAAA,EAAA;AAAME,QAAAA,SAAS,EAAC,oCAAoC;AAAAE,QAAAA,QAAA,EAAEI,SAAS,CAACT,SAAS,EAAEH,KAAK,CAAA;AAAC,OAAO,CACzF,CAAA;KACA,CAAA;AACL,GAAI,CAAC,CAAA;AAET;;;;"}

package/build/typeahead/util/highlight.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function highlight(value, query) {
+  if (value && query) {
+    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
+    const highlightEnd = highlightStart + query.trim().length;
+    if (highlightStart !== -1) {
+      return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
+          children: value.slice(highlightStart, highlightEnd)
+        }), value.slice(Math.max(0, highlightEnd))]
+      });
+    }
+  }
+  return value;
+}
+
+module.exports = highlight;
+//# sourceMappingURL=highlight.js.map

package/build/typeahead/util/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["highlight","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","children","slice","Math","max","_jsx"],"mappings":";;;;AAAc,SAAUA,SAASA,CAACC,KAAa,EAAEC,KAAa,EAAA;EAC5D,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,eAAA,CAAAC,mBAAA,EAAA;AAAAC,QAAAA,QAAA,GACGV,KAAK,CAACW,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,cAAc,CAAC,CAAC,eAC5CY,cAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAASV,KAAK,CAACW,KAAK,CAACT,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACW,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}

package/build/typeahead/util/highlight.mjs

@@ -0,0 +1,19 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function highlight(value, query) {
+  if (value && query) {
+    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
+    const highlightEnd = highlightStart + query.trim().length;
+    if (highlightStart !== -1) {
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
+          children: value.slice(highlightStart, highlightEnd)
+        }), value.slice(Math.max(0, highlightEnd))]
+      });
+    }
+  }
+  return value;
+}
+
+export { highlight as default };
+//# sourceMappingURL=highlight.mjs.map

package/build/typeahead/util/highlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n  if (value && query) {\n    const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n    const highlightEnd = highlightStart + query.trim().length;\n    if (highlightStart !== -1) {\n      return (\n        <>\n          {value.slice(0, Math.max(0, highlightStart))}\n          <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n          {value.slice(Math.max(0, highlightEnd))}\n        </>\n      );\n    }\n  }\n  return value;\n}\n"],"names":["highlight","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","_Fragment","children","slice","Math","max","_jsx"],"mappings":";;AAAc,SAAUA,SAASA,CAACC,KAAa,EAAEC,KAAa,EAAA;EAC5D,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;MACzB,oBACEM,IAAA,CAAAC,QAAA,EAAA;AAAAC,QAAAA,QAAA,GACGV,KAAK,CAACW,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,cAAc,CAAC,CAAC,eAC5CY,GAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAASV,KAAK,CAACW,KAAK,CAACT,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACW,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,YAAY,CAAC,CAAC,CAAA;AAAA,OACzC,CAAG,CAAA;AAEP,KAAA;AACF,GAAA;AACA,EAAA,OAAON,KAAK,CAAA;AACd;;;;"}

package/build/types/inputs/InputGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAkCjB"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmBjB"}

package/build/upload/Upload.js

@@ -0,0 +1,366 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var icons = require('@transferwise/icons');
+var classNames = require('classnames');
+var React = require('react');
+var reactIntl = require('react-intl');
+var Title = require('../title/Title.js');
+var Upload_messages = require('./Upload.messages.js');
+var uploadImageStep = require('./steps/uploadImageStep/uploadImageStep.js');
+var processingStep = require('./steps/processingStep/processingStep.js');
+var completeStep = require('./steps/completeStep/completeStep.js');
+var postData = require('./utils/postData/postData.js');
+var asyncFileRead = require('./utils/asyncFileRead/asyncFileRead.js');
+var isSizeValid = require('./utils/isSizeValid/isSizeValid.js');
+var isTypeValid = require('./utils/isTypeValid/isTypeValid.js');
+var getFileType = require('./utils/getFileType/getFileType.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const ANIMATION_FIX = 10;
+const MAX_SIZE_DEFAULT = 5000000;
+exports.UploadStep = void 0;
+(function (UploadStep) {
+  UploadStep["UPLOAD_IMAGE_STEP"] = "uploadImageStep";
+})(exports.UploadStep || (exports.UploadStep = {}));
+class Upload extends React.Component {
+  static defaultProps = {
+    animationDelay: 700,
+    maxSize: MAX_SIZE_DEFAULT,
+    psButtonDisabled: false,
+    size: 'md',
+    usAccept: 'image/*',
+    usDisabled: false,
+    usLabel: ''
+  };
+  dragCounter = 0;
+  timeouts = 0;
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileName: '',
+      isDroppable: false,
+      isComplete: false,
+      isError: false,
+      isImage: false,
+      isProcessing: false,
+      isSuccess: false,
+      response: undefined,
+      uploadedImage: undefined
+    };
+  }
+  getErrorMessage(status) {
+    const {
+      csFailureText,
+      csTooLargeMessage,
+      csWrongTypeMessage,
+      maxSize,
+      intl
+    } = this.props;
+    switch (status) {
+      case 413:
+        return csTooLargeMessage || intl.formatMessage(Upload_messages.csTooLargeMessage, {
+          maxSize: maxSize / 1000000
+        });
+      case 415:
+        return csWrongTypeMessage || intl.formatMessage(Upload_messages.csWrongTypeMessage);
+      default:
+        return csFailureText || intl.formatMessage(Upload_messages.csFailureText);
+    }
+  }
+  onDragLeave(event) {
+    event.preventDefault();
+    this.dragCounter -= 1;
+    if (this.dragCounter === 0) {
+      this.setState({
+        isDroppable: false
+      });
+    }
+  }
+  onDragEnter(event) {
+    event.preventDefault();
+    this.dragCounter += 1;
+    const {
+      usDisabled
+    } = this.props;
+    const {
+      isProcessing
+    } = this.state;
+    if (this.dragCounter === 1 && !usDisabled && !isProcessing) {
+      this.setState({
+        isDroppable: true
+      });
+    }
+  }
+  async onDrop(event) {
+    const {
+      isProcessing
+    } = this.state;
+    event.preventDefault();
+    if (!isProcessing) {
+      this.reset();
+    }
+    if (event.dataTransfer?.files?.[0]) {
+      await this.fileDropped(event.dataTransfer.files[0]);
+    }
+  }
+  onAnimationCompleted = async status => {
+    const {
+      response,
+      isProcessing,
+      fileName
+    } = this.state;
+    const {
+      animationDelay
+    } = this.props;
+    if (isProcessing && status === 'succeeded') {
+      const {
+        onSuccess
+      } = this.props;
+      this.timeouts = window.setTimeout(() => {
+        this.setState({
+          isProcessing: false,
+          isComplete: true
+        }, onSuccess ? () => onSuccess(response, fileName) : undefined);
+      }, animationDelay);
+    }
+    if (isProcessing && status === 'failed') {
+      const {
+        onFailure
+      } = this.props;
+      this.timeouts = window.setTimeout(() => {
+        this.setState({
+          isProcessing: false,
+          isComplete: true
+        }, onFailure ? () => onFailure(response) : undefined);
+      }, animationDelay);
+    }
+  };
+  asyncPost = async file => {
+    const {
+      httpOptions,
+      fetcher
+    } = this.props;
+    if (httpOptions == null) {
+      throw new Error('Cannot find HTTP options');
+    }
+    const {
+      fileInputName = file.name,
+      data = {}
+    } = httpOptions;
+    const formData = new FormData();
+    formData.append(fileInputName, file);
+    Object.keys(data).forEach(key => formData.append(key, data[key]));
+    return postData.postData(httpOptions, formData, fetcher);
+  };
+  asyncResponse = (response, type) => {
+    // Gives time to the animation callback to fire.
+    this.timeouts = window.setTimeout(() => {
+      this.setState({
+        response,
+        isError: type === 'error',
+        isSuccess: type === 'success'
+      });
+    }, ANIMATION_FIX);
+  };
+  handleOnClear = event => {
+    event.preventDefault();
+    const {
+      onCancel
+    } = this.props;
+    onCancel?.();
+    this.reset();
+  };
+  reset = () => {
+    this.dragCounter = 0;
+    window.clearTimeout(this.timeouts);
+    this.setState({
+      isComplete: false,
+      isError: false,
+      isProcessing: false,
+      isSuccess: false
+    });
+  };
+  showDataImage = dataUrl => {
+    const {
+      isImage
+    } = this.state;
+    if (isImage) {
+      this.setState({
+        uploadedImage: dataUrl
+      });
+    }
+  };
+  fileDropped = async file => {
+    const {
+      httpOptions,
+      maxSize,
+      onStart,
+      usDisabled,
+      usAccept
+    } = this.props;
+    const {
+      isProcessing
+    } = this.state;
+    if (usDisabled || isProcessing) {
+      return false;
+    }
+    if (!file) {
+      throw new Error('Could not retrieve file');
+    }
+    this.setState({
+      fileName: file.name,
+      isDroppable: false,
+      isProcessing: true
+    });
+    onStart?.(file);
+    let file64 = null;
+    try {
+      file64 = await asyncFileRead.asyncFileRead(file);
+    } catch (error) {
+      this.asyncResponse(error, 'error');
+    }
+    if (!file64) {
+      return false;
+    }
+    this.setState({
+      isImage: getFileType.getFileType(file, file64).includes('image')
+    });
+    if (!isTypeValid.isTypeValid(file, usAccept, file64)) {
+      this.asyncResponse(new postData.ResponseError(new Response(null, {
+        status: 415,
+        statusText: 'Unsupported Media Type'
+      })), 'error');
+      return false;
+    }
+    if (!isSizeValid.isSizeValid(file, maxSize)) {
+      this.asyncResponse(new postData.ResponseError(new Response(null, {
+        status: 413,
+        statusText: 'Request Entity Too Large'
+      })), 'error');
+      return false;
+    }
+    if (httpOptions) {
+      // Post the file to provided endpoint
+      let response;
+      try {
+        response = await this.asyncPost(file);
+      } catch (error) {
+        this.asyncResponse(error, 'error');
+        return false;
+      }
+      this.asyncResponse(response, 'success');
+      this.showDataImage(file64);
+      return true;
+    }
+    // Post on form submit. And return the encoded image.
+    this.showDataImage(file64);
+    this.asyncResponse(file64, 'success');
+    return true;
+  };
+  render() {
+    const {
+      maxSize,
+      usDropMessage,
+      usAccept,
+      usButtonText,
+      usDisabled,
+      usHelpImage,
+      usLabel,
+      usPlaceholder,
+      psButtonText,
+      psProcessingText,
+      psButtonDisabled,
+      csButtonText,
+      csSuccessText,
+      size,
+      intl
+    } = this.props;
+    const {
+      response,
+      fileName,
+      isComplete,
+      isDroppable,
+      isError,
+      isImage,
+      isProcessing,
+      isSuccess,
+      uploadedImage
+    } = this.state;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames__default.default('droppable-area', {
+        droppable: true,
+        'tw-droppable-sm droppable-sm': size === 'sm',
+        'tw-droppable-md droppable-md': size === 'md' || !size,
+        'tw-droppable-lg droppable-lg': size === 'lg',
+        'droppable-dropping': isDroppable,
+        'droppable-processing': isProcessing,
+        'droppable-complete': isComplete,
+        'droppable-negative': isError
+      }),
+      onDragEnter: event => this.onDragEnter(event),
+      onDragLeave: event => this.onDragLeave(event),
+      onDrop: async event => this.onDrop(event),
+      onDragOver: event => event.preventDefault(),
+      children: [!isProcessing && !isComplete && /*#__PURE__*/jsxRuntime.jsx(uploadImageStep, {
+        fileDropped: async file => this.fileDropped(file),
+        isComplete: isComplete,
+        usAccept: usAccept,
+        usButtonText: usButtonText || intl.formatMessage(Upload_messages.usButtonText),
+        usDisabled: usDisabled,
+        usHelpImage: usHelpImage,
+        usLabel: usLabel,
+        usPlaceholder: usPlaceholder || intl.formatMessage(Upload_messages.usPlaceholder, {
+          maxSize: maxSize / 1000000
+        })
+      }), isProcessing && /*#__PURE__*/jsxRuntime.jsx(processingStep, {
+        isComplete: isComplete,
+        isError: isError,
+        isSuccess: isSuccess,
+        psButtonText: psButtonText || intl.formatMessage(Upload_messages.psButtonText),
+        psProcessingText: psProcessingText || intl.formatMessage(Upload_messages.psProcessingText),
+        psButtonDisabled: psButtonDisabled,
+        onAnimationCompleted: async status => this.onAnimationCompleted(status),
+        onClear: event => this.handleOnClear(event)
+      }), (isSuccess || isError || isComplete) && /*#__PURE__*/jsxRuntime.jsx(completeStep, {
+        fileName: fileName,
+        isComplete: isComplete,
+        isError: isError,
+        isImage: isImage,
+        csButtonText: csButtonText || intl.formatMessage(Upload_messages.csButtonText),
+        csFailureText: this.getErrorMessage(response != null && typeof response === 'object' && 'status' in response && typeof response.status === 'number' ? response.status : undefined),
+        csSuccessText: csSuccessText || intl.formatMessage(Upload_messages.csSuccessText),
+        uploadedImage: uploadedImage,
+        onClear: event => this.handleOnClear(event)
+      }), !isProcessing && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "droppable-dropping-card droppable-card",
+        "aria-live": "polite",
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "droppable-card-content",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "circle circle-sm text-primary",
+            children: /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {
+              size: "16"
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Title, {
+            type: typography.Typography.TITLE_BODY,
+            className: "m-t-3",
+            children: usDropMessage || intl.formatMessage(Upload_messages.usDropMessage)
+          })]
+        })
+      })]
+    });
+  }
+}
+var Upload$1 = reactIntl.injectIntl(Upload);
+
+exports.MAX_SIZE_DEFAULT = MAX_SIZE_DEFAULT;
+exports.Upload = Upload;
+exports.default = Upload$1;
+//# sourceMappingURL=Upload.js.map