<commit_before>import * as React from 'react';

export namespace InputChildren {
  export type Props = React.HTMLProps<HTMLInputElement> & {
    /** React children rendered inside the input */
    children?: React.ReactNode,
    /** Props passed to wrapper 'div' */
    wrapper?:  React.HTMLProps<HTMLDivElement>
    /** Ref function for internal input reference */
    innerRef?: (input: HTMLInputElement) => void
  }
}

export type State = {
  width: number,
  height: number
}

/**
 * `InputChildren` is a replacement for the base input react component capable of rendering
 * a child (link, button...) inside the input itself. It supports the same props of react input.
 */
export class InputChildren extends React.Component<InputChildren.Props, State> {
  state = { width: 1, height: 1 }

  childrenWrapper: HTMLDivElement

  componentDidMount() {
    this.computeChildrenSize();
  }

  computeChildrenSize(): void {
    const { clientWidth, clientHeight } = this.childrenWrapper;
    if (clientWidth !== this.state.width || clientHeight !== this.state.height) {
      this.setState({
        height: clientHeight,
        width: clientWidth
      });
    }
  }

  getInputStyle(): React.CSSProperties {
    return {
      ...this.props.style,
      paddingRight: this.state.width,
      width: '100%',
      boxSizing: 'border-box'
    };
  }

  getChildrenStyle(): React.CSSProperties {
    return {
      position: 'absolute',
      top: '50%',
      right: 0,
      marginTop: -1 * (this.state.height / 2)
    };
  }

  render() {
    const {
      children,
      wrapper = {},
      innerRef,
      ...inputProps
    } = this.props;

    const wrapperProps: React.HTMLProps<HTMLDivElement> = {
      ...wrapper,
      style: {
        ...wrapper.style,
        position: 'relative'
      }
    };

    return (
      <div {...wrapperProps}>
        <input {...inputProps} style={this.getInputStyle()} ref={innerRef} />
        <div ref={(ref: HTMLDivElement) => this.childrenWrapper = ref} style={this.getChildrenStyle()}>
          {children}
        </div>
      </div>
    );
  }

  componentDidUpdate() {
    this.computeChildrenSize();
  }

}
<commit_msg>setTimeout 🤷<commit_after>import * as React from 'react';

export namespace InputChildren {
  export type Props = React.HTMLProps<HTMLInputElement> & {
    /** React children rendered inside the input */
    children?: React.ReactNode,
    /** Props passed to wrapper 'div' */
    wrapper?:  React.HTMLProps<HTMLDivElement>
    /** Ref function for internal input reference */
    innerRef?: (input: HTMLInputElement) => void
  }
}

export type State = {
  width: number,
  height: number
}

/**
 * `InputChildren` is a replacement for the base input react component capable of rendering
 * a child (link, button...) inside the input itself. It supports the same props of react input.
 */
export class InputChildren extends React.Component<InputChildren.Props, State> {
  state = { width: 1, height: 1 }

  childrenWrapper: HTMLDivElement | null = null;

  componentDidMount() {
    this.computeChildrenSize();
  }

  computeChildrenSize = () : void => {
    if (this.childrenWrapper) {
      const { clientWidth, clientHeight } = this.childrenWrapper;
      if (clientWidth !== this.state.width || clientHeight !== this.state.height) {
        this.setState({
          height: clientHeight,
          width: clientWidth
        });
      }
    }
  }

  getInputStyle = (): React.CSSProperties => {
    return {
      ...this.props.style,
      paddingRight: this.state.width,
      width: '100%',
      boxSizing: 'border-box'
    };
  }

  getChildrenStyle = (): React.CSSProperties => {
    return {
      position: 'absolute',
      top: '50%',
      right: 0,
      marginTop: -1 * (this.state.height / 2)
    };
  }

  render() {
    const {
      children,
      wrapper = {},
      innerRef,
      ...inputProps
    } = this.props;

    const wrapperProps: React.HTMLProps<HTMLDivElement> = {
      ...wrapper,
      style: {
        ...wrapper.style,
        position: 'relative'
      }
    };

    return (
      <div {...wrapperProps}>
        <input {...inputProps} style={this.getInputStyle()} ref={innerRef} />
        <div ref={(ref: HTMLDivElement) => this.childrenWrapper = ref} style={this.getChildrenStyle()}>
          {children}
        </div>
      </div>
    );
  }

  componentDidUpdate() {
    setTimeout(this.computeChildrenSize);
  }

}

{'fraction_non_alphanumeric': 0.13387423935091278, 'fraction_numerical': 0.00450755014649538, 'mean_word_length': 2.5194290245836637, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 28, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6776173', 'n_tokens_mistral': 1313, 'n_tokens_neox': 1290, 'n_words': 325}