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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12210,8 +12210,8 @@ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
12210
12210
  /* eslint-disable jsx-a11y/no-static-element-interactions */
12211
12211
  const DEFAULT_INPUT_MIN_WIDTH = 10;
12212
12212
  class TypeaheadInput extends Component {
12213
- inputRef = null;
12214
- sizerRef = null;
12213
+ inputRef = /*#__PURE__*/createRef();
12214
+ sizerRef = /*#__PURE__*/createRef();
12215
12215
  constructor(props) {
12216
12216
  super(props);
12217
12217
  this.state = {
@@ -12223,7 +12223,7 @@ class TypeaheadInput extends Component {
12223
12223
  autoFocus
12224
12224
  } = this.props;
12225
12225
  if (autoFocus) {
12226
- this.inputRef?.focus();
12226
+ this.inputRef.current?.focus();
12227
12227
  }
12228
12228
  }
12229
12229
  componentDidUpdate(previousProps) {
@@ -12234,7 +12234,7 @@ class TypeaheadInput extends Component {
12234
12234
  recalculateWidth = () => {
12235
12235
  requestAnimationFrame(() => {
12236
12236
  this.setState({
12237
- inputWidth: this.sizerRef ? Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.scrollWidth + 10) : DEFAULT_INPUT_MIN_WIDTH
12237
+ inputWidth: Math.max(DEFAULT_INPUT_MIN_WIDTH, this.sizerRef.current?.scrollWidth ?? 0 + 10)
12238
12238
  });
12239
12239
  });
12240
12240
  };
@@ -12259,9 +12259,7 @@ class TypeaheadInput extends Component {
12259
12259
  } = this.state;
12260
12260
  const hasPlaceholder = !multiple || selected.length === 0;
12261
12261
  return /*#__PURE__*/jsx(Input, {
12262
- ref: reference => {
12263
- this.inputRef = reference;
12264
- },
12262
+ ref: this.inputRef,
12265
12263
  className: classNames(multiple && 'typeahead__input'),
12266
12264
  name: name,
12267
12265
  id: `input-${typeaheadId}`,
@@ -12298,7 +12296,7 @@ class TypeaheadInput extends Component {
12298
12296
  maxHeight: maxHeight ?? undefined
12299
12297
  },
12300
12298
  onClick: () => {
12301
- this.inputRef?.focus();
12299
+ this.inputRef.current?.focus();
12302
12300
  },
12303
12301
  children: [/*#__PURE__*/jsxs("div", {
12304
12302
  className: "typeahead__input-wrapper",
@@ -12306,9 +12304,7 @@ class TypeaheadInput extends Component {
12306
12304
  className: "typeahead__input-aligner"
12307
12305
  })]
12308
12306
  }), /*#__PURE__*/jsx("div", {
12309
- ref: reference => {
12310
- this.sizerRef = reference;
12311
- },
12307
+ ref: this.sizerRef,
12312
12308
  className: "sizer form-control typeahead__input",
12313
12309
  children: value
12314
12310
  })]