Remove AutoSizeInput

[ebonow]

⚠️ Issue:
react-autosize-input is a mono-repo that is maintained specifically for react-select. Not only does this add extra complexity and code weight, but it is also at the root of several issues. Additionally, it adds one extra layer of DOM complexity for users to access the DOM input.

✅ Solution:
This proposal is to completely remove the AutoSizeInput component and replace it with a 100% pure CSS solution. Heavily inspired by this codepen example by Shaw found via this CSS Tricks article

💪 How it works:
The wrapper component now is styled as an inline-grid component with a pseudo :after element. This pseudo element has the content of the data-value attribute of the wrapper and occupies the same cell as the input causing it to expand as needed without javascript needing to copy and calculate new widths as the value changes. An early codesandbox example of this can be seen here.

👍🏽 Features:

• Less package dependencies and code weight.
• Removed unnecessary nested div element.
• Allows CSS to naturally resize input without relying on 3rd party component ref callback methods
• Fixes CSSTransitions of React Select
• Input will now flex the remaining width of the row (but still wrap to next line when necessary)
  • This creates a more consistent UX for users attempting to right click or long press to paste
• When used with classNamePrefix, classnames are now generated for both the container (prefix__input-container) and input (prefix__input)
• inputClassName was added as a new prop to the Input component to make it easy to style components via classNames (hello Tailwind)

👎🏽 Breaking Changes:

• IE11 no longer works as it does not fully support CSS grid
• Renaming the .prefix__input now targets the input and NOT the container. Unfortunate but overdue and perhaps opens the door to completely decoupling the input from needing a container if autosizing is not important.

[changeset-bot]

⚠️ No Changeset found

Latest commit: e89e86d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e89e86d:

Sandbox	Source
react-codesandboxer-example	Configuration
react-select-autosizinginput	PR

[ebonow]

May consider addition suggested in #4513 to remove any boxShadow

[ebonow]

Please note @rosskhanas that this also addresses #4435 by using the shorthand css style font to inherit size, family, weight, and line-height.

[JedWatson]

🎉 thanks @ebonow!