update(ModalInner): refactor with hooks

[moyus]

to: @williaster @alecklandgraf

Description

Refactor ModalInner component into functional component with hooks.

Motivation and Context

Currently, the innerStyleSheet prop of Modal is not working, because ModalInner not support customized stylesheet. In order to support it, we need to refactor ModalInner component into functional component with hooks.

Testing

• All unit test case passed
• Manually test Modal component in storybook and all work fine

Screenshots

There is no UI change.

Checklist

• My code follows the style guide of this project.
• I have updated or added documentation accordingly.
• I have read the CONTRIBUTING document.

[airbnb-bot]

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
core	-0.1%	566.86 KB	567.33 KB	709.87 KB	709.46 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 580945,
    "lib": 726482
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

Current

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 580467,
    "lib": 726903
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

[williaster]

lgtm 🙏