diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
new file mode 100644
index 0000000000..d5248d0699
--- /dev/null
+++ b/packages/components/package-lock.json
@@ -0,0 +1,649 @@
+{
+  "name": "@gio-design/components",
+  "version": "20.8.6",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@ant-design/css-animation": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.3.tgz",
+      "integrity": "sha512-LrX0OGZtW+W6iLnTAqnTaoIsRelYeuLZWsrmBJFUXDALQphPsN8cE5DCsmoSlL0QYb94BQxINiuS70Ar/8BNgA=="
+    },
+    "@babel/runtime": {
+      "version": "7.11.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@jest/types": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
+      "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^1.1.1",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^3.0.0"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
+      "dev": true
+    },
+    "@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
+      "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "*",
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/jest": {
+      "version": "26.0.12",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.12.tgz",
+      "integrity": "sha512-vZOFjm562IPb1EmaKxMjdcouxVb1l3NqoUH4XC4tDQ2R/AWde+0HXBUhyfc6L+7vc3mJ393U+5vr3nH2CLSVVg==",
+      "dev": true,
+      "requires": {
+        "jest-diff": "^25.2.1",
+        "pretty-format": "^25.2.1"
+      }
+    },
+    "@types/node": {
+      "version": "14.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.6.2.tgz",
+      "integrity": "sha512-onlIwbaeqvZyniGPfdw/TEhKIh79pz66L1q06WUQqJLnAb6wbjvOtepLYTGHTqzdXgBYIE3ZdmqHDGsRsbBz7A==",
+      "dev": true
+    },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react-virtualized": {
+      "version": "9.21.10",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.10.tgz",
+      "integrity": "sha512-f5Ti3A7gGdLkPPFNHTrvKblpsPNBiQoSorOEOD+JPx72g/Ng2lOt4MYfhvQFQNgyIrAro+Z643jbcKafsMW2ag==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "16.9.49",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.49.tgz",
+          "integrity": "sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==",
+          "requires": {
+            "@types/prop-types": "*",
+            "csstype": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@types/yargs": {
+      "version": "15.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
+      "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
+      "dev": true,
+      "requires": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "@types/yargs-parser": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
+      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+      "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+      "dev": true,
+      "requires": {
+        "@types/color-name": "^1.1.1",
+        "color-convert": "^2.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "bs-logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
+      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "dev": true,
+      "requires": {
+        "fast-json-stable-stringify": "2.x"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "dev": true
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
+      "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "diff-sequences": {
+      "version": "25.2.6",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.2.6.tgz",
+      "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==",
+      "dev": true
+    },
+    "dom-align": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
+      "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dev": true,
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "jest-diff": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.5.0.tgz",
+      "integrity": "sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==",
+      "dev": true,
+      "requires": {
+        "chalk": "^3.0.0",
+        "diff-sequences": "^25.2.6",
+        "jest-get-type": "^25.2.6",
+        "pretty-format": "^25.5.0"
+      }
+    },
+    "jest-get-type": {
+      "version": "25.2.6",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.2.6.tgz",
+      "integrity": "sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==",
+      "dev": true
+    },
+    "jest-util": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.3.0.tgz",
+      "integrity": "sha512-4zpn6bwV0+AMFN0IYhH/wnzIQzRaYVrz1A8sYnRnj4UXDXbOVtWmlaZkO9mipFqZ13okIfN87aDoJWB7VH6hcw==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.3.0",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.4",
+        "is-ci": "^2.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "26.3.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.3.0.tgz",
+          "integrity": "sha512-BDPG23U0qDeAvU4f99haztXwdAg3hz4El95LkAM+tHAqqhiVzRpEGHHU8EDxT/AnxOrA65YjLBwDahdJ9pTLJQ==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^15.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/istanbul-reports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
+          "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-report": "*"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        }
+      }
+    },
+    "json5": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+      "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
+    "mini-store": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/mini-store/-/mini-store-3.0.6.tgz",
+      "integrity": "sha512-YzffKHbYsMQGUWQRKdsearR79QsMzzJcDDmZKlJBqt5JNkqpyJHYlK6gP61O36X+sLf76sO9G6mhKBe83gIZIQ==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.2",
+        "shallowequal": "^1.0.2"
+      },
+      "dependencies": {
+        "shallowequal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+          "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        }
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true
+    },
+    "omit.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz",
+      "integrity": "sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg=="
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "pretty-format": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
+      "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^25.5.0",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^16.12.0"
+      }
+    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "rc-align": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.3.tgz",
+      "integrity": "sha512-TpI0t1tvAo/wYdoZbZlkCK+MkQBqNuPyRZesfsji4tMlqoqQ0q0MhnC9JD5KGPitMvmSB+KWgFpaN2uTz4hw6Q==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^5.0.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
+        "rc-util": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.2.1.tgz",
+          "integrity": "sha512-OnIKp4DsYZpT3St9LwiGARXyMR38wNbk7C4jXS6NGAGHZEQWck7W6qfiJwj+MUmhJiUisAknU6BUs65exbhFTw==",
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "shallowequal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+          "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        }
+      }
+    },
+    "rc-menu": {
+      "version": "8.5.1",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "mini-store": "^3.0.1",
+        "omit.js": "^2.0.0",
+        "rc-animate": "^3.1.0",
+        "rc-trigger": "^4.2.0",
+        "rc-util": "^5.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
+        "rc-animate": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.1.0.tgz",
+          "integrity": "sha512-8FsM+3B1H+0AyTyGggY6JyVldHTs1CyYT8CfTmG/nGHHXlecvSLeICJhcKgRLjUiQlctNnRtB1rwz79cvBVmrw==",
+          "requires": {
+            "@ant-design/css-animation": "^1.7.2",
+            "classnames": "^2.2.6",
+            "raf": "^3.4.0",
+            "rc-util": "^5.0.1"
+          }
+        },
+        "rc-util": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.0.1.tgz",
+          "integrity": "sha512-vzpgfdC6FGkrRFQ7NuipR1C/+kNDfber8eIEnuTR9q875Jg+/YO9xd7CG0dCxV/SK30jnMhMsj0rmMEzPHUVyA==",
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "shallowequal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+          "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        }
+      }
+    },
+    "rc-motion": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-1.0.3.tgz",
+      "integrity": "sha512-TC15cIndZ0q5i0rVAQGMvy5gBeeA89iM/tgVaTTMT23M0t1XFL89EqjG8ktYlodPMzCCzRa90oa+YrsSDIcLww==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "raf": "^3.4.1",
+        "rc-util": "^5.0.6"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
+        "rc-util": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.2.1.tgz",
+          "integrity": "sha512-OnIKp4DsYZpT3St9LwiGARXyMR38wNbk7C4jXS6NGAGHZEQWck7W6qfiJwj+MUmhJiUisAknU6BUs65exbhFTw==",
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "shallowequal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+          "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        }
+      }
+    },
+    "rc-trigger": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.4.2.tgz",
+      "integrity": "sha512-uw2/s7j1b/RXyixa4omPuxZWv/3ln+H+p0v3trIUBxseolbdj8TTFpXYjXMZdGtMpAEAIbN1yo/K+r7wRB+xtQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "raf": "^3.4.1",
+        "rc-align": "^4.0.0",
+        "rc-motion": "^1.0.0",
+        "rc-util": "^5.0.1"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
+        "rc-util": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.0.5.tgz",
+          "integrity": "sha512-zLIdNm6qz+hQbB5T1fmzHFFgPuRl3uB2eS2iLR/mewUWvgC3l7NzRYRVlHoCEEFVUkKEEsHuJXG1J52FInl5lA==",
+          "requires": {
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        },
+        "shallowequal": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+          "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        }
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
+    "semver": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+      "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "ts-jest": {
+      "version": "26.2.0",
+      "dev": true,
+      "requires": {
+        "@types/jest": "26.x",
+        "bs-logger": "0.x",
+        "buffer-from": "1.x",
+        "fast-json-stable-stringify": "2.x",
+        "jest-util": "26.x",
+        "json5": "2.x",
+        "lodash.memoize": "4.x",
+        "make-error": "1.x",
+        "mkdirp": "1.x",
+        "semver": "7.x",
+        "yargs-parser": "18.x"
+      }
+    },
+    "tslib": {
+      "version": "2.0.0",
+      "dev": true
+    },
+    "typescript": {
+      "version": "4.0.2",
+      "dev": true
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}
diff --git a/packages/components/package.json b/packages/components/package.json
index 7ee4bb36b4..576e096651 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -25,7 +25,9 @@
     "@types/classnames": "^2.2.9",
     "@types/lodash": "^4.14.136",
     "@types/react": "^16.8.23",
+    "@types/react-dnd": "^3.0.2",
     "@types/react-dom": "^16.8.2",
+    "@types/react-virtualized": "^9.21.10",
     "@types/shallowequal": "^1.1.1",
     "classnames": "^2.2.6",
     "lodash": "^4.17.14",
@@ -39,7 +41,10 @@
     "rc-tooltip": "^4.2.1",
     "rc-upload": "^3.2.0",
     "rc-util": "^5.0.5",
+    "react-dnd": "^9.3.4",
+    "react-dnd-html5-backend": "^9.3.4",
     "react-use": "^15.3.3",
+    "react-virtualized": "^9.22.2",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
diff --git a/packages/components/src/components/list/components/SelectCore/index.tsx b/packages/components/src/components/list/components/SelectCore/index.tsx
new file mode 100644
index 0000000000..2da18618ac
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectCore/index.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import SelectList from '../SelectList';
+import { SelectCoreProps } from '../../interface';
+
+interface State {
+  options: any[];
+  value?: string | string[];
+  keyword: string;
+}
+
+class SelectCore extends React.Component<SelectCoreProps, State> {
+  public static defaultProps: Partial<SelectCoreProps> = {
+    showSearch: true,
+    searchableFields: ['name'],
+    valueKey: 'id',
+    isMultiple: false,
+    isLoading: false,
+    required: false,
+    height: 400,
+    rowHeight: 40,
+    emptyPlaceholder: '没有找到相关结果',
+  };
+
+  public static getDerivedStateFromProps(nextProps: SelectCoreProps) {
+    return {
+      value: nextProps.value,
+      // options: this.props.options,
+    };
+  }
+
+  public state: State = {
+    options: [],
+    value: undefined,
+    keyword: '',
+  };
+
+  public componentDidMount() {
+    this.setState({
+      value: this.props.value,
+      options: this.props.options,
+    });
+  }
+  public render() {
+    const {
+      disabledOptions,
+      valueKey,
+      renderKey,
+      isMultiple,
+      allowDuplicate,
+      required,
+      max,
+      width,
+      height,
+      getGroupIcon,
+      onSelect,
+      onDeselect,
+      emptyPlaceholder,
+      labelRenderer,
+      rowHeight,
+    } = this.props;
+
+    if (this.state.options && this.state.options.length) {
+      return (
+        <div className="gio-select-core">
+          <SelectList
+            options={this.state.options}
+            disabledOptions={disabledOptions}
+            value={this.state.value}
+            valueKey={valueKey}
+            renderKey={renderKey}
+            isMultiple={isMultiple}
+            allowDuplicate={allowDuplicate}
+            required={required}
+            max={max}
+            width={width}
+            height={height}
+            onSelect={onSelect}
+            onDeselect={onDeselect}
+            onChange={this.handleSelect}
+            getGroupIcon={getGroupIcon}
+            labelRenderer={labelRenderer}
+            rowHeight={rowHeight}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className="gio-select-core">
+        <div style={{ padding: '50% 10px 0', textAlign: 'center', height }}>{emptyPlaceholder}</div>
+      </div>
+    );
+  }
+
+  private handleSelect = (value: any) => {
+    this.setState({ value });
+    this.props.onChange(value);
+  };
+}
+
+export default SelectCore;
diff --git a/packages/components/src/components/list/components/SelectCore/style.less b/packages/components/src/components/list/components/SelectCore/style.less
new file mode 100644
index 0000000000..efd229a3b3
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectCore/style.less
@@ -0,0 +1,35 @@
+.gio-select-core {
+  position: relative;
+
+  .ant-tabs-ink-bar {
+    background-color: #fc5f3a;
+  }
+
+  .ant-tabs-nav {
+    .ant-tabs-tab {
+      margin-right: 0;
+      padding: 5px 15px;
+      font-size: 12px;
+    }
+    .ant-tabs-tab-active {
+      color: #5c4e61;
+    }
+  }
+
+  .ant-tabs-bar {
+    margin-bottom: 0;
+  }
+
+  &-header {
+    padding: 10px;
+  }
+
+  .gio-user-picker-fetch-btn {
+    opacity: 0.7;
+    transition: 0.3s opacity ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
diff --git a/packages/components/src/components/list/components/SelectList/index.tsx b/packages/components/src/components/list/components/SelectList/index.tsx
new file mode 100644
index 0000000000..acfce77e28
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectList/index.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import SelectOption from '../SelectOption';
+import Group from '../SelectOption/Group';
+import { get } from 'lodash';
+import withGroupedOptions from '../../utils/withGroupedOptions';
+import { List } from 'react-virtualized';
+import { SelectListProps } from '../../interface';
+
+import './style.less';
+
+interface State {
+  value: any | any[];
+}
+
+class SelectList extends React.Component<SelectListProps, {}> {
+  public static defaultProps: Partial<SelectListProps> = {
+    disabledOptions: [],
+    isMultiple: false,
+    width: 280,
+    height: 450,
+  };
+  public ref: React.RefObject<HTMLDivElement>;
+  public state: State = {
+    value: null,
+  };
+
+  public constructor(props: SelectListProps) {
+    super(props);
+    this.ref = React.createRef();
+  }
+
+  public render() {
+    return (
+      <div className="gio-select-list-wrapper" ref={this.ref}>
+        {this.renderList()}
+      </div>
+    );
+  }
+
+  private getPopupContainer = () => this.ref.current as HTMLElement;
+
+  private renderList = () => {
+    const { width, height, disabledOptions, rowHeight } = this.props;
+    const getRowHeight = ({ index }: { index: number }) => {
+      if (typeof rowHeight === 'function') {
+        return rowHeight(this.props.options[index]);
+      } else {
+        return rowHeight;
+      }
+    };
+    return (
+      <List
+        value={this.props.value}
+        width={width}
+        height={height}
+        rowCount={this.props.options.length}
+        rowHeight={typeof rowHeight === 'function' ? getRowHeight : rowHeight}
+        rowRenderer={this.renderListItem(this.props.options)}
+        disabledOptions={disabledOptions}
+        className="gio-select-list"
+      />
+    );
+  };
+
+  private checkIsMax = (option: any) => {
+    const { isMultiple, value, max } = this.props;
+    if (Array.isArray(value) && !this.getSelected(option) && isMultiple && max) {
+      return value.length >= max;
+    } else {
+      return false;
+    }
+  };
+
+  private renderListItem = (options: any) => ({ index, style }: { index: number; style: React.CSSProperties }) => {
+    const { isMultiple, required, value, valueKey, renderKey, disabledOptions, labelRenderer } = this.props;
+    const option = options[index];
+    const isGroup = get(option, 'type') === 'groupName';
+    const label = labelRenderer ? labelRenderer(option) : get(option, 'name') || option;
+
+    const optionKey = renderKey || valueKey;
+    const key = optionKey ? option[optionKey] : option;
+
+    const isSelectedAndRequired = this.getSelected(option) && required && (isMultiple ? value?.length === 1 : true);
+
+    const isMax = this.checkIsMax(option);
+
+    const disabled =
+      isSelectedAndRequired ||
+      isMax ||
+      disabledOptions.indexOf(valueKey ? option[valueKey] : option) > -1 ||
+      option.disabled;
+
+    const groupIcon = this.props.getGroupIcon ? this.props.getGroupIcon(option.group) : null;
+
+    return isGroup ? (
+      <Group
+        key={option.name}
+        name={option.name}
+        option={option}
+        style={style}
+        icon={groupIcon}
+        isSelected={this.getSelected(option)}
+        isMultiple={!!this.props.isMultiple}
+        labelRenderer={labelRenderer}
+      />
+    ) : (
+      <SelectOption
+        key={key}
+        style={style}
+        option={option}
+        title={!labelRenderer ? label : undefined}
+        isSelected={this.getSelected(option)}
+        isMultiple={!!this.props.isMultiple}
+        allowDuplicate={this.props.allowDuplicate}
+        onSelect={this.handleSelect}
+        disabled={disabled}
+        hasGroupIcon={!!groupIcon}
+        getPopupContainer={this.getPopupContainer}
+      >
+        {label}
+      </SelectOption>
+    );
+  };
+
+  private handleSelect = (option: any) => {
+    const { isMultiple, allowDuplicate, onSelect, onDeselect, onChange } = this.props;
+
+    const isMax = this.checkIsMax(option);
+
+    if (isMax) {
+      return;
+    }
+
+    const selectedValue = this.getValue(option);
+    const isSelected = this.getSelected(option);
+    let value;
+    if (isSelected && !allowDuplicate) {
+      if (onDeselect) {
+        onDeselect(selectedValue, this.props.value, option);
+      }
+      value = isMultiple ? this.props.value.filter((v: any) => v !== selectedValue) : null;
+    } else {
+      if (onSelect) {
+        onSelect(selectedValue, this.props.value, option);
+      }
+      value = isMultiple ? [...(this.props.value || []), selectedValue] : selectedValue;
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  private getValue = (option: any) => {
+    const { valueKey } = this.props;
+    return valueKey ? option[valueKey] : option;
+  };
+
+  private getSelected = (option: any) => {
+    const { value, getSelected, isMultiple, valueKey } = this.props;
+    if (getSelected) {
+      return getSelected(option, value);
+    }
+    const target = valueKey ? option[valueKey] : option;
+
+    return isMultiple ? value && value.indexOf(target) > -1 : value === target;
+  };
+}
+
+const WithGroupList = withGroupedOptions(SelectList);
+
+export default WithGroupList;
diff --git a/packages/components/src/components/list/components/SelectList/style.less b/packages/components/src/components/list/components/SelectList/style.less
new file mode 100644
index 0000000000..6978cae375
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectList/style.less
@@ -0,0 +1,9 @@
+.gio-select-list-wrapper {
+  background-color: #fff;
+
+  .gio-select-list {
+    &:focus {
+      outline: none;
+    }
+  }
+}
diff --git a/packages/components/src/components/list/components/SelectOption/Group.tsx b/packages/components/src/components/list/components/SelectOption/Group.tsx
new file mode 100644
index 0000000000..f844525f43
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectOption/Group.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Checkbox from 'antd/lib/checkbox';
+import noop from 'lodash/noop';
+import { GroupProps } from '../../interface';
+
+export default class Group extends React.PureComponent<GroupProps> {
+  public static defaultProps = {
+    onSelect: noop,
+    style: {},
+  };
+
+  public render() {
+    const {
+      name,
+      icon,
+      style,
+      isMultiple,
+      showGroupCheckBox = false,
+      isSelected,
+      indeterminate,
+      option,
+      labelRenderer,
+    } = this.props;
+
+    return (
+      <div className="gio-select-option group" style={{ ...style, color: '#1248E9' }} onClick={this.handleSelect}>
+        {icon}
+        {isMultiple && showGroupCheckBox && <Checkbox checked={isSelected} indeterminate={indeterminate} />}
+        {labelRenderer ? labelRenderer(option, true) : name}
+      </div>
+    );
+  }
+
+  private handleSelect = () => {
+    this.props.onSelect && this.props.onSelect(this.props.option);
+  };
+}
diff --git a/packages/components/src/components/list/components/SelectOption/index.tsx b/packages/components/src/components/list/components/SelectOption/index.tsx
new file mode 100644
index 0000000000..7ab0e232d4
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectOption/index.tsx
@@ -0,0 +1,60 @@
+import React, { useCallback, useRef } from 'react';
+import classnames from 'classnames';
+import Checkbox from '../../../checkbox';
+import './style.less';
+import { OptionProps } from '../../interface';
+import Tooltip from '../../../tooltip';
+
+const SelectOption = (props: OptionProps) => {
+  const {
+    isSelected = false,
+    className = '',
+    isMultiple = false,
+    allowDuplicate = false,
+    disabled = false,
+    style,
+    hasGroupIcon,
+    showGroupCheckBox,
+    onSelect,
+    option,
+    getPopupContainer,
+  } = props;
+
+  const ref = useRef(null);
+  const handleSelect = useCallback(() => {
+    if (onSelect) {
+      onSelect(option);
+    }
+  }, [option]);
+
+  const renderContent = () => (
+    <div
+      className={classnames('gio-select-option', className, {
+        multiple: isMultiple,
+        selected: isSelected,
+        indented: hasGroupIcon,
+        disabled,
+      })}
+      style={style}
+      onClick={disabled ? undefined : handleSelect}
+      title={props.title}
+      ref={ref}
+    >
+      {showGroupCheckBox && <span style={{ width: 25 }} />}
+      {isMultiple && !allowDuplicate && <Checkbox checked={isSelected} />}
+      {props.children}
+    </div>
+  );
+
+  if (option.tooltip) {
+    return (
+      <Tooltip title={option.tooltip} placement="top" getTooltipContainer={getPopupContainer}>
+        {renderContent()}
+      </Tooltip>
+    );
+  }
+
+  return renderContent();
+};
+
+export default SelectOption;
diff --git a/packages/components/src/components/list/components/SelectOption/style.less b/packages/components/src/components/list/components/SelectOption/style.less
new file mode 100644
index 0000000000..f3cc94c1d1
--- /dev/null
+++ b/packages/components/src/components/list/components/SelectOption/style.less
@@ -0,0 +1,85 @@
+@color-background-list-single-hover: #ebedf5;
+@color-background-list-single-active: #f7f8fc;
+@color-font-list-primary-active: #1248e9;
+
+.gio-select-option {
+  max-width: 100%;
+  height: 40px;
+  margin-bottom: 1px;
+  padding: 0 25px 1px 15px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 40px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+  &:not(.group) {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: @color-background-list-single-hover;
+    }
+  }
+
+  &.selected {
+    color: @color-font-list-primary-active;
+    background-color: @color-background-list-single-active;
+    &.multiple {
+      background-color: inherit;
+    }
+    &:hover {
+      background-color: @color-background-list-single-hover;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    &:not(.selected) {
+      opacity: 0.5;
+    }
+  }
+
+  .ant-checkbox-wrapper {
+    margin-right: 10px;
+    vertical-align: 1px;
+
+    .ant-checkbox-checked .ant-checkbox-inner,
+    .ant-checkbox-indeterminate .ant-checkbox-inner {
+      background-color: #3a9afc;
+      border-color: #3a9afc;
+    }
+  }
+
+  [name^='gicon-check'] {
+    position: absolute;
+    right: 15px;
+  }
+
+  &.group {
+    padding: 0 15px 0 15px;
+    font-size: 12px;
+    .group-icon {
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+      margin-right: 5px;
+      line-height: 22px;
+      text-align: center;
+      background-color: #e3e7fc;
+      border-radius: 50%;
+    }
+  }
+
+  &.group:not(:nth-child(1)) {
+    border-top: 1px solid #ebedf5;
+  }
+
+  &.indented {
+    padding-left: 43px;
+  }
+}
diff --git a/packages/components/src/components/list/components/Sortable/SortableItem.tsx b/packages/components/src/components/list/components/Sortable/SortableItem.tsx
new file mode 100644
index 0000000000..7df54aa9fb
--- /dev/null
+++ b/packages/components/src/components/list/components/Sortable/SortableItem.tsx
@@ -0,0 +1,139 @@
+import React, { cloneElement } from 'react';
+import classnames from 'classnames';
+import { findDOMNode } from 'react-dom';
+import reactDnd, { DragSource, DropTarget } from 'react-dnd';
+
+export interface ItemWithId {
+  id: string | number;
+  canDrag: boolean;
+}
+
+export interface SortableItemProps {
+  template: React.ReactElement<any>;
+  index: number;
+  position: number;
+  sortData: ItemWithId;
+  className?: string;
+  canDrag: boolean;
+  onDrop: () => any;
+  onCancel: () => any;
+  onHover: (sourcePosition: number, targetPosition: number) => any;
+}
+
+export interface WrappedSortableItemProps extends SortableItemProps {
+  connectDragSource: reactDnd.ConnectDragSource;
+  connectDropTarget: reactDnd.ConnectDropTarget;
+  isDragging: boolean;
+  isOver: boolean;
+}
+
+const dragSource = {
+  beginDrag(props: SortableItemProps) {
+    return {
+      position: props.position,
+    };
+  },
+
+  endDrag(props: SortableItemProps, monitor: reactDnd.DragSourceMonitor) {
+    if (monitor.didDrop()) {
+      props.onDrop();
+    } else {
+      props.onCancel();
+    }
+  },
+
+  canDrag(props: SortableItemProps) {
+    return props.canDrag;
+  },
+};
+
+const dropTarget = {
+  hover(props: SortableItemProps, monitor: reactDnd.DropTargetMonitor) {
+    const sourcePosition = (monitor.getItem() as SortableItemProps).position;
+    const targetPosition = props.position;
+
+    if (sourcePosition !== targetPosition) {
+      props.onHover(sourcePosition, targetPosition);
+    }
+  },
+};
+
+function collectSource(connect: reactDnd.DragSourceConnector, monitor: reactDnd.DragSourceMonitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging(),
+  };
+}
+
+function collectTarget(connect: reactDnd.DropTargetConnector, monitor: reactDnd.DropTargetMonitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+  };
+}
+
+class Item extends React.PureComponent<WrappedSortableItemProps, {}> {
+  public state = {
+    hovered: false,
+  };
+
+  public componentDidMount() {
+    const ref = this._createRef();
+    const { connectDragSource, connectDropTarget } = this.props;
+    /*eslint-disable */
+    const domNode = (findDOMNode(this.refs[ref]) as any) as React.ReactElement<{}>;
+    /* eslint-enable */
+    connectDragSource(domNode);
+    connectDropTarget(domNode);
+  }
+
+  public render() {
+    const isOver = this.props.isOver;
+    const isDragging = this.props.isDragging;
+    return cloneElement(this.props.template, {
+      sortData: this.props.sortData,
+      index: this.props.index,
+      isOver,
+      isDragging,
+      ref: this._createRef(),
+      onMouseEnter: this._onMouseEnter,
+      onMouseLeave: this._onMouseLeave,
+      onDragStart: this._onDragStart,
+      className: classnames(this.props.className, 'gio-sortable-item', {
+        'is-over': isOver,
+        'is-dragging': isDragging,
+        'is-hovered': this.state.hovered,
+      }),
+    });
+  }
+
+  private _onDragStart = () => {
+    this.setState({
+      hovered: false,
+    });
+  };
+
+  private _onMouseEnter = () => {
+    this.setState({
+      hovered: true,
+    });
+  };
+
+  private _onMouseLeave = () => {
+    this.setState({
+      hovered: false,
+    });
+  };
+
+  private _createRef() {
+    const position = this.props.position;
+    const id = this.props.sortData.id;
+    return `${id}${position}`;
+  }
+}
+
+export default () => {
+  const type = 'item';
+  return DragSource(type, dragSource, collectSource)(DropTarget(type, dropTarget, collectTarget)(Item));
+};
diff --git a/packages/components/src/components/list/components/Sortable/index.tsx b/packages/components/src/components/list/components/Sortable/index.tsx
new file mode 100644
index 0000000000..1d6662fa8c
--- /dev/null
+++ b/packages/components/src/components/list/components/Sortable/index.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import createSortableItem, { ItemWithId } from './SortableItem';
+import _ from 'lodash';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+
+export interface SortableCollectionProps {
+  container: string;
+  collection: ItemWithId[];
+  onSorted: (collection: ItemWithId[]) => any;
+  getId?: (item: ItemWithId, index: number) => string;
+  template: React.ReactElement<any>;
+}
+
+export interface SortableCollectionState {
+  collection: ItemWithId[];
+  SortableItemClass: React.Component;
+}
+
+export default class SortableCollection extends React.PureComponent<SortableCollectionProps, {}> {
+  public static defaultProps = { container: 'div' };
+
+  public static getDerivedStateFromProps(nextProps: SortableCollectionProps) {
+    return { collection: nextProps.collection };
+  }
+
+  public state: any = {
+    collection: this.props.collection,
+    SortableItemClass: createSortableItem(),
+  };
+
+  public render() {
+    const SortableItem = this.state.SortableItemClass;
+
+    const children = this.state.collection.map((props: ItemWithId, i: number) => {
+      const originalPosition = this.props.collection.indexOf(props);
+      const key = this.props.getId ? this.props.getId(props, i) : props.id;
+      const canDrag = props.canDrag === false ? props.canDrag : true;
+      return (
+        <SortableItem
+          sortData={props}
+          canDrag={canDrag}
+          index={i}
+          key={key}
+          position={originalPosition}
+          onHover={this._handleHover}
+          onDrop={this._handleDrop}
+          onCancel={this._handleCancel}
+          template={this.props.template}
+        />
+      );
+    });
+
+    return (
+      <DndProvider backend={HTML5Backend as any}>
+        {React.createElement(
+          this.props.container,
+          _.omit(this.props, ['collection', 'container', 'onSorted', 'template']),
+          children
+        )}
+      </DndProvider>
+    );
+  }
+
+  private _handleHover = (originalSourcePosition: number, originalTargetPosition: number) => {
+    const source = this.props.collection[originalSourcePosition];
+    const currentSourcePosition = this.state.collection.indexOf(source);
+    const target = this.props.collection[originalTargetPosition];
+    const currentTargetPosition = this.state.collection.indexOf(target);
+
+    if (source) {
+      const newCollection = [...this.state.collection];
+      newCollection.splice(currentSourcePosition, 1);
+      newCollection.splice(currentTargetPosition, 0, source);
+      this.setState({ collection: newCollection });
+    }
+  };
+
+  private _handleDrop = () => {
+    if (this.props.collection !== this.state.collection) {
+      this.props.onSorted(this.state.collection);
+    }
+  };
+
+  private _handleCancel = () => {
+    this.setState({ collection: this.props.collection });
+  };
+}
diff --git a/packages/components/src/components/list/components/Sortable/template.tsx b/packages/components/src/components/list/components/Sortable/template.tsx
new file mode 100644
index 0000000000..bdfd4865ba
--- /dev/null
+++ b/packages/components/src/components/list/components/Sortable/template.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import classnames from 'classnames';
+import { noop, pick, get } from 'lodash';
+import { DragMove, CloseCircleFilled } from '@gio-design/icons';
+
+const bemClsFactor = (blockName: string) => (elemName?: string, modifierName?: string) => {
+  const elemName_ = elemName ? `__${elemName}` : '';
+  const modifierName_ = modifierName ? `--${modifierName}` : '';
+  return `${blockName}${elemName_}${modifierName_}`;
+};
+
+const cls = bemClsFactor('pa_sider-selected-item');
+
+interface SiderSelectedItemProps {
+  onRemove: (sortData: any) => void;
+  selected?: string;
+  collapsed?: boolean;
+  onSelect?: (item: any) => void;
+  [key: string]: any;
+}
+
+export default class SiderSelectedItem extends React.PureComponent<SiderSelectedItemProps, any> {
+  public static defaultProps = {
+    onRemove: noop,
+  };
+
+  public constructor(props: SiderSelectedItemProps) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  public render() {
+    const { sortData: item = {} } = this.props;
+    const props = this.props;
+    const className = classnames(cls(), {
+      indented: props.indented,
+      selected: item.id === props.selected,
+      collapsed: props.collapsed,
+      [this.props.className]: !!this.props.className,
+      [`v-${item.id}`]: true,
+    });
+
+    return (
+      <div
+        {...pick(props, ['onDragStart', 'onMouseEnter', 'onMouseLeave'])}
+        className={className}
+        onClick={() => {
+          if (props.onSelect) {
+            props.onSelect(item);
+          }
+        }}
+      >
+        {get(item, 'canDrag') !== false && (
+          <IconCircle className={classnames({ selected: item.id === props.selected, collapsed: props.collapsed })}>
+            <DragMove className="icon-drag" />
+          </IconCircle>
+        )}
+
+        {props.collapsed ? null : (
+          <span className={classnames(cls('name-wrap'))}>
+            <span className={classnames(cls('name'), { selected: item.id === props.selected })} title={item.name}>
+              {item.name}
+            </span>
+          </span>
+        )}
+
+        <span
+          onClick={(e) => e.stopPropagation()}
+          className={classnames('dh-can-remove', {
+            collapsed: props.collapsed,
+          })}
+        >
+          <CloseCircleFilled size="small" />
+        </span>
+      </div>
+    );
+  }
+}
+
+const IconCircle = (props: any) => {
+  const className = classnames('pa-sider-icon-circle', props.className, {
+    scaled: props.scaled, // 利用 transform scale 解决 font-size < 12 的问题
+  });
+
+  return <span className={className}>{props.children}</span>;
+};
diff --git a/packages/components/src/components/list/drag.tsx b/packages/components/src/components/list/drag.tsx
new file mode 100644
index 0000000000..4202983ad7
--- /dev/null
+++ b/packages/components/src/components/list/drag.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import Sortable from './components/Sortable';
+import { unionBy, noop } from 'lodash';
+import SelectedItem from './components/Sortable/template';
+import './style/sort.less';
+
+const DragableList = ({ dataSource, handleSort, prefixCls = 'gio-list', wrapStyle, width, height }: any) => {
+  const [data, setData] = useState(dataSource);
+
+  const innerHandleSort = (steps: any) => {
+    const combineDashbord = unionBy(steps, dataSource, 'id');
+    if (handleSort) {
+      handleSort(combineDashbord);
+    }
+    setData(combineDashbord);
+  };
+
+  // const selected = data[0];
+  const onRemove = () => {};
+  const onSelect = () => {};
+
+  return (
+    <div className={`${prefixCls}-wrapper`} style={{ ...wrapStyle, width, height }}>
+      <Sortable
+        collection={data}
+        onSorted={innerHandleSort}
+        template={<SelectedItem onSelect={onSelect} onRemove={onRemove} collapsed={false} />}
+      />
+    </div>
+  );
+};
+
+export default DragableList;
diff --git a/packages/components/src/components/list/index.ts b/packages/components/src/components/list/index.ts
new file mode 100644
index 0000000000..b762f882b3
--- /dev/null
+++ b/packages/components/src/components/list/index.ts
@@ -0,0 +1,5 @@
+import NormalList from './normal';
+import DragList from './drag';
+
+export default NormalList;
+export { DragList };
diff --git a/packages/components/src/components/list/interface.ts b/packages/components/src/components/list/interface.ts
new file mode 100644
index 0000000000..c33ab03bfd
--- /dev/null
+++ b/packages/components/src/components/list/interface.ts
@@ -0,0 +1,93 @@
+import { ReactNode, CSSProperties } from 'react';
+
+export interface IBaseListProps {
+  dataSource: any[];
+  isMultiple?: boolean;
+  onChange?: () => void;
+  value?: any;
+  width?: number;
+  height?: number;
+  wrapStyle?: CSSProperties;
+  prefixCls?: string;
+  labelRenderer?: (option: any, isGruop: false) => ReactNode;
+  rowHeight?: number | ((option: any) => number);
+}
+
+export interface SelectCoreProps {
+  value?: string | string[];
+  onChange: (value: any) => void;
+  options: any[];
+  disabledOptions?: any[];
+  valueKey?: string;
+  renderKey?: string;
+  isMultiple: boolean;
+  allowDuplicate?: boolean;
+  max?: number;
+  width?: number;
+  height?: number;
+  rowHeight?: number | ((option: any) => number);
+  isLoading?: boolean;
+  required?: boolean;
+  showSearch?: boolean;
+  searchableFields?: string[];
+  searchPlaceholder?: string;
+  emptyPlaceholder?: React.ReactNode;
+  onSearch?: (keyword: string) => void;
+  renderFetchButton?: () => React.ReactNode;
+  getGroupIcon?: (group: string) => React.ReactNode;
+  onSelect?: (value: any, selectedValue: any) => void;
+  onDeselect?: (value: any, selectedValue: any) => void;
+  labelRenderer?: (option: any, isGroup?: boolean) => any;
+  showCheckAllBox?: boolean;
+}
+
+export interface SelectListProps {
+  options: any[];
+  disabledOptions: any[];
+  value: any | any[];
+  valueKey?: string;
+  renderKey?: string;
+  isMultiple: boolean;
+  allowDuplicate?: boolean;
+  required?: boolean;
+  max?: number;
+  width: number;
+  height: number;
+  rowHeight: number | ((option: any) => number);
+  onSelect?: (value: any, selectedValue?: any | any[], option?: any) => void;
+  onDeselect?: (value: any, selectedValue?: any | any[], option?: any) => void;
+  onChange?: (value: any) => void;
+  getSelected?: (option: any, value: any) => boolean;
+  getGroupIcon?: (group: string) => React.ReactNode;
+  labelRenderer?: (option: any, isGroup?: boolean) => any;
+}
+
+export interface GroupProps {
+  name: string;
+  id?: string;
+  icon?: React.ReactNode;
+  style?: React.CSSProperties;
+  isMultiple: boolean;
+  isSelected?: boolean;
+  indeterminate?: boolean;
+  showGroupCheckBox?: boolean;
+  onSelect?: (option: any) => void;
+  option?: any;
+  labelRenderer?: (option: any, isGroup?: boolean) => Element;
+}
+
+export interface OptionProps {
+  option: any;
+  style: React.CSSProperties;
+  title?: string;
+  isSelected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  isMultiple?: boolean;
+  allowDuplicate?: boolean;
+  hasGroupIcon?: boolean;
+  onSelect?: (option: any) => void;
+  showGroupCheckBox?: boolean;
+  children?: ReactNode;
+  getPopupContainer: (node: HTMLElement) => HTMLElement;
+}
diff --git a/packages/components/src/components/list/normal.tsx b/packages/components/src/components/list/normal.tsx
new file mode 100644
index 0000000000..4a82633023
--- /dev/null
+++ b/packages/components/src/components/list/normal.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { IBaseListProps } from './interface';
+import './style/base.less';
+import Core from './components/SelectCore';
+
+const options = [
+  { groupId: 'events', groupName: '选择事件', id: 'a', name: '选择事件a' },
+  { groupId: 'events', groupName: '选择事件', id: 'b', name: '选择事件b' },
+  { groupId: 'dimensions', groupName: '选择维度', id: 'c', name: '选择维度c', disabled: true },
+  { groupId: 'dimensions', groupName: '选择维度', id: 'd', name: '选择维度d' },
+];
+
+const onChange_ = (...args: any) => {
+  console.log(args);
+};
+
+const NormalList = ({
+  prefixCls = 'gio-list',
+  wrapStyle,
+  dataSource = options,
+  width,
+  isMultiple,
+  onChange = onChange_,
+  value,
+  height,
+  labelRenderer,
+  rowHeight,
+}: IBaseListProps) => (
+  <div className={`${prefixCls}-wrapper`} style={{ ...wrapStyle, width }}>
+    <Core
+      value={value}
+      options={dataSource}
+      onChange={onChange}
+      isMultiple={isMultiple}
+      height={height}
+      width={width}
+      labelRenderer={labelRenderer}
+      rowHeight={rowHeight}
+    />
+  </div>
+);
+
+export default NormalList;
diff --git a/packages/components/src/components/list/style/base.less b/packages/components/src/components/list/style/base.less
new file mode 100644
index 0000000000..a35ffdddbf
--- /dev/null
+++ b/packages/components/src/components/list/style/base.less
@@ -0,0 +1,48 @@
+@import '~@gio-design/tokens/dist/variables.less';
+
+@prefix-cls: gio-list;
+
+@link-font-color-normal: #313e75;
+@link-font-color-active: #1248e9;
+@link-font-color-disable: #a2adc8;
+@link-font-color-title: #1248e9;
+@link-font-color-help-text: #1248e9;
+
+@link-font-normal-witght: 14px;
+@link-normal-active: 14px;
+@color-background-list-single-hover: #ebedf5;
+@color-background-list-single-normal: white;
+@color-background-list-single-click: #f1f2f8;
+@color-background-list-single-active: #f7f8fc;
+
+.@{prefix-cls} {
+  &-wrapper {
+    display: inline-block;
+    // padding: 16px 8px;
+  }
+  &-item {
+    box-sizing: border-box;
+    color: @link-font-color-normal;
+    background-color: @color-background-list-single-normal;
+    user-select: none;
+
+    :hover {
+      background-color: @color-background-list-single-hover;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    :active {
+      background-color: @color-background-list-single-active;
+    }
+  }
+
+  &-content {
+    //
+  }
+
+  &-title {
+    display: inline-block;
+    height: 40px;
+    padding: 8px 15px;
+  }
+}
diff --git a/packages/components/src/components/list/style/sort.less b/packages/components/src/components/list/style/sort.less
new file mode 100644
index 0000000000..c07d69481c
--- /dev/null
+++ b/packages/components/src/components/list/style/sort.less
@@ -0,0 +1,153 @@
+@icon-circle-color-light: #f1f1fa;
+@icon-circle-color-text: #220968;
+
+.pa_sider-selected-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding-left: 20px;
+  color: #313e75;
+  font-size: 14px;
+  line-height: 40px;
+  background: white;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &.collapsed {
+    display: block;
+    padding: 0;
+  }
+
+  &__name-wrap {
+    position: relative;
+    display: inline-block;
+    height: 40px;
+    padding-left: 4px;
+  }
+
+  &__name {
+    display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.selected {
+      font-size: 14px;
+    }
+  }
+
+  &.indented {
+    padding-left: 30px;
+  }
+
+  &.selected {
+    color: #222f73;
+    font-weight: bold;
+    background-color: #f2f4fc;
+
+    .icon-num {
+      color: #fff;
+    }
+    .icon-drag {
+      svg {
+        fill: #d6d6d6;
+      }
+    }
+  }
+
+  &.is-hovered {
+    background-color: #f7f8fc;
+  }
+
+  &:not(.collapsed):not(.is-dragging):not(.is-over).is-hovered {
+    z-index: 1;
+    & .icon-num {
+      display: none;
+    }
+
+    & .icon-drag {
+      display: inline;
+    }
+    & .dh-can-remove {
+      display: inline;
+    }
+  }
+
+  &:hover &__btn-remove {
+    opacity: 1;
+  }
+
+  &__btn-remove {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+
+    &.collapsed {
+      display: none;
+    }
+  }
+
+  .icon-circle {
+    cursor: default;
+  }
+
+  .icon-num {
+    display: inline;
+  }
+
+  .icon-drag {
+    display: none;
+  }
+
+  .dh-can-remove {
+    position: absolute;
+    right: 10px;
+    display: none;
+    width: 12px;
+    height: 40px;
+    &.collapsed {
+      display: none;
+    }
+  }
+}
+
+.pa-sider-icon-circle {
+  position: absolute;
+  left: 2px;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 23px;
+  text-align: center;
+  cursor: move;
+
+  &.hollow {
+    background-color: #fff;
+    transition: background-color 0.3s ease;
+  }
+
+  &.collapsed {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &.scaled {
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+    line-height: 32px;
+    transform: scale(0.6875);
+  }
+}
+
+.gio-sortable-item.is-over {
+  background: #ebebeb;
+  span {
+    display: none;
+  }
+}
+.gio-sortable-item {
+  cursor: move;
+}
diff --git a/packages/components/src/components/list/utils/withGroupedOptions.tsx b/packages/components/src/components/list/utils/withGroupedOptions.tsx
new file mode 100644
index 0000000000..f838c38479
--- /dev/null
+++ b/packages/components/src/components/list/utils/withGroupedOptions.tsx
@@ -0,0 +1,62 @@
+import React, { ComponentType } from 'react';
+import { get, groupBy } from 'lodash';
+
+type GetDisplayName = (x: ComponentType) => string;
+export const getDisplayName: GetDisplayName = (Component) => Component.displayName || Component.name || 'Component';
+
+const getGroupedOptions = (options: any[]) => {
+  const hasNotGroup = !options.some((option: any) => {
+    if (option?.groupName) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  if (hasNotGroup) {
+    return options;
+  }
+
+  const groupedOptions = groupBy(options, 'groupName');
+  return Object.keys(groupedOptions).reduce((opts: any[], groupKey: string) => {
+    const group = get(groupedOptions, `${groupKey}.0.group`);
+    const groupId = get(groupedOptions, `${groupKey}.0.groupId`);
+    return opts.concat([
+      {
+        id: groupId || groupKey,
+        name: groupKey,
+        type: 'groupName',
+        group,
+      },
+      ...groupedOptions[groupKey],
+    ]);
+  }, []);
+};
+
+export interface WithGroupedOptionsProps {
+  options: any[];
+  groups?: any[];
+  originalOptions?: any[];
+}
+
+const withGroupedOptions = (Component: any, getGroupedFunc = getGroupedOptions): any => {
+  class HOC extends React.PureComponent<any> {
+    public static displayName: string;
+    public render() {
+      const groupedOptions = getGroupedOptions(this.props.options);
+      let groups;
+      if (getGroupedFunc === getGroupedOptions) {
+        groups = groupedOptions;
+      } else {
+        groups = getGroupedFunc(this.props.options);
+      }
+      return (
+        <Component {...this.props} options={groupedOptions} groups={groups} originalOptions={this.props.options} />
+      );
+    }
+  }
+  HOC.displayName = `GroupedOptionsProvider(${getDisplayName(Component)})`;
+  return HOC;
+};
+
+export default withGroupedOptions;
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 380503d528..2d480f8532 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -28,3 +28,4 @@ export { default as Toggles } from './components/toggles';
 export { default as Tooltip } from './components/tooltip';
 export { default as Tree } from './components/tree';
 export { default as Upload } from './components/upload';
+export { default as List } from './components/list';
diff --git a/packages/icons/src/DragMove.tsx b/packages/icons/src/DragMove.tsx
new file mode 100644
index 0000000000..8b02420965
--- /dev/null
+++ b/packages/icons/src/DragMove.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Wrapper from './Wrapper';
+import { IconProps } from './interface';
+
+function SvgDrgMove(wrapperProps: IconProps) {
+  const { rotating, color, size, ...restProps } = wrapperProps;
+  const props = {
+    color,
+    className: rotating ? 'gio-icon-svg gio-icon-rotating' : 'gio-icon-svg',
+    width: !size ? '1rem' : size,
+    height: !size ? '1rem' : size,
+  };
+  const file = (
+    <svg viewBox="0 0 12 6" fill="currentColor" {...props}>
+      <defs>
+        <clipPath id="drg-move_svg__clip-path" transform="translate(0 -3)">
+          <path fill="currentColor" d="M0 0h12v12H0z" />
+        </clipPath>
+        <style>{'.drg-move_svg__cls-3{fill:#a3adc8}'}</style>
+      </defs>
+      <g id="drg-move_svg__\u56FE\u5C42_2" data-name="\u56FE\u5C42 2">
+        <g clipPath="url(#drg-move_svg__clip-path)" id="drg-move_svg__\u56FE\u5C42_1-2" data-name="\u56FE\u5C42 1">
+          <circle className="drg-move_svg__cls-3" cx={1.13} cy={4.88} r={1.13} />
+          <circle className="drg-move_svg__cls-3" cx={6} cy={4.88} r={1.13} />
+          <circle className="drg-move_svg__cls-3" cx={10.88} cy={4.88} r={1.13} />
+          <circle className="drg-move_svg__cls-3" cx={1.13} cy={1.13} r={1.13} />
+          <circle className="drg-move_svg__cls-3" cx={6} cy={1.13} r={1.13} />
+          <circle className="drg-move_svg__cls-3" cx={10.88} cy={1.13} r={1.13} />
+        </g>
+      </g>
+    </svg>
+  );
+  return <Wrapper {...restProps} icon={file} />;
+}
+
+export default SvgDrgMove;
diff --git a/packages/icons/src/index.tsx b/packages/icons/src/index.tsx
index fdedc63ebe..6306cd9090 100644
--- a/packages/icons/src/index.tsx
+++ b/packages/icons/src/index.tsx
@@ -16,6 +16,7 @@ export { default as Delete } from './Delete';
 export { default as DesktopFilled } from './DesktopFilled';
 export { default as DotChartOutlined } from './DotChartOutlined';
 export { default as DownFilled } from './DownFilled';
+export { default as DragMove } from './DragMove';
 export { default as FileCsv } from './FileCsv';
 export { default as FileDoc } from './FileDoc';
 export { default as FilePdf } from './FilePdf';
diff --git a/packages/icons/svgs/drag-move.svg b/packages/icons/svgs/drag-move.svg
new file mode 100644
index 0000000000..e950d74fd7
--- /dev/null
+++ b/packages/icons/svgs/drag-move.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 6"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#a3adc8;}</style><clipPath id="clip-path" transform="translate(0 -3)"><rect class="cls-1" width="12" height="12"/></clipPath></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><g class="cls-2"><circle class="cls-3" cx="1.13" cy="4.88" r="1.13"/><circle class="cls-3" cx="6" cy="4.88" r="1.13"/><circle class="cls-3" cx="10.88" cy="4.88" r="1.13"/><circle class="cls-3" cx="1.13" cy="1.13" r="1.13"/><circle class="cls-3" cx="6" cy="1.13" r="1.13"/><circle class="cls-3" cx="10.88" cy="1.13" r="1.13"/></g></g></g></svg>
\ No newline at end of file
diff --git a/packages/website/src/components/functional/list/demo/avatar.less b/packages/website/src/components/functional/list/demo/avatar.less
new file mode 100644
index 0000000000..22dd8f9728
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/avatar.less
@@ -0,0 +1,26 @@
+.gio-select-option {
+  &.selected {
+    .gio-list-option-desc {
+      color: #1248e9;
+    }
+  }
+}
+.gio-list_avatar {
+  .gio-list-option-title {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .gio-list-option-desc {
+    color: #adb2c2;
+    &.selected {
+      color: #1248e9;
+    }
+    font-size: 12px;
+    line-height: 20px;
+  }
+
+  .gio-avatar {
+    margin: 5px;
+  }
+}
diff --git a/packages/website/src/components/functional/list/demo/avatar.tsx b/packages/website/src/components/functional/list/demo/avatar.tsx
new file mode 100644
index 0000000000..9f554d9498
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/avatar.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { List } from '@gio-design/components';
+import { Avatar } from '@gio-design/components';
+import './avatar.less';
+
+const options = [
+  { groupId: 'events', groupName: '选择事件', id: 'a', name: '选择事件a', description: 'xx@email.com' },
+  { groupId: 'events', groupName: '选择事件', id: 'b', name: '选择事件b', description: 'xx@email.com', disabled: true },
+  { groupId: 'dimensions', groupName: '选择维度', id: 'c', name: '选择维度c', description: 'xx@email.com' },
+  {
+    groupId: 'dimensions',
+    groupName: '选择维度',
+    id: 'd',
+    name: '选择维度d',
+    description: 'xx@email.com',
+    tooltip: 'xtesds',
+  },
+];
+
+const WrapperStyle = {
+  padding: '16px 8px',
+  display: 'inline-block',
+  borderRadius: 6,
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 14px 1px rgba(223,226,237,0.8)',
+};
+
+const optionWrapper = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const getRowHeight = (option: any) => {
+  if (option.type === 'groupName') {
+    return 40;
+  }
+
+  return 56;
+};
+
+const labelRenderer = (option: any, isGroup: boolean) => {
+  if (isGroup) {
+    return option.name;
+  }
+  return (
+    <div style={optionWrapper}>
+      <Avatar size="default">L</Avatar>
+      <div style={{ display: 'flex', flexDirection: 'column', padding: '7px 0' }}>
+        <span className="gio-list-option-title">{option.name}</span>
+        <span className="gio-list-option-desc">{option.description}</span>
+      </div>
+    </div>
+  );
+};
+
+export default () => (
+  <>
+    <div style={WrapperStyle} className="gio-list_avatar">
+      <List dataSource={options} height={230} width={220} labelRenderer={labelRenderer} rowHeight={getRowHeight} />
+    </div>
+    <div style={{ display: 'inline-block', width: 20 }} />
+    <div style={WrapperStyle} className="gio-list_avatar">
+      <List
+        dataSource={options}
+        height={230}
+        width={220}
+        labelRenderer={labelRenderer}
+        rowHeight={getRowHeight}
+        isMultiple={true}
+        value={['a']}
+      />
+    </div>
+  </>
+);
diff --git a/packages/website/src/components/functional/list/demo/base.tsx b/packages/website/src/components/functional/list/demo/base.tsx
new file mode 100644
index 0000000000..be6b4c35b5
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/base.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { List } from '@gio-design/components';
+
+const options = [
+  { id: 'a', name: '选择事件a' },
+  { id: 'b', name: '选择事件b', tooltip: 'test', disabled: true },
+  { id: 'c', name: '选择事件c' },
+  { id: 'd', name: '选择事件d', disabled: true },
+];
+
+const disabledOptions = [{ id: 'b' }, { id: 'd' }];
+
+const WrapperStyle = {
+  padding: '16px 8px',
+  display: 'inline-block',
+  borderRadius: 6,
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 14px 1px rgba(223,226,237,0.8)',
+};
+
+export default () => (
+  <div style={WrapperStyle}>
+    <List dataSource={options} height={160} width={170} />
+  </div>
+);
diff --git a/packages/website/src/components/functional/list/demo/drag.tsx b/packages/website/src/components/functional/list/demo/drag.tsx
new file mode 100644
index 0000000000..c8f44e1e09
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/drag.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import List, { DragList } from '@gio-design/components/es/components/list';
+
+const options = [
+  { id: 'a', name: '选择事件a' },
+  { id: 'b', name: '选择事件b', tooltip: 'test', disabled: true },
+  { id: 'c', name: '选择事件c' },
+  { id: 'd', name: '选择事件d', disabled: true },
+];
+
+const WrapperStyle = {
+  padding: '10px 8px',
+  display: 'inline-block',
+  borderRadius: 6,
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 14px 1px rgba(223,226,237,0.8)',
+};
+
+export default () => (
+  <div style={WrapperStyle}>
+    <DragList dataSource={options} height={170} width={260} />
+  </div>
+);
diff --git a/packages/website/src/components/functional/list/demo/group.tsx b/packages/website/src/components/functional/list/demo/group.tsx
new file mode 100644
index 0000000000..41b9acf4c2
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/group.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { List } from '@gio-design/components';
+
+const options = [
+  { groupId: 'events', groupName: '选择事件', id: 'a', name: '选择事件a' },
+  { groupId: 'events', groupName: '选择事件', id: 'b', name: '选择事件b' },
+  { groupId: 'dimensions', groupName: '选择维度', id: 'c', name: '选择维度c' },
+  { groupId: 'dimensions', groupName: '选择维度', id: 'd', name: '选择维度d' },
+]
+
+const WrapperStyle = {
+  padding: '16px 8px',
+  display: 'inline-block',
+  borderRadius: 6,
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 14px 1px rgba(223,226,237,0.8)',
+}
+
+export default () => (
+  <>
+    <div style={WrapperStyle}>
+      <List dataSource={options} height={200} width={170} />
+    </div>
+    <div style={{ display: 'inline-block', width: 20 }} />
+    <div style={WrapperStyle}>
+      <List dataSource={options} height={200} width={170} isMultiple={true} value={['a', 'c']} />
+    </div>
+
+  </>
+);
diff --git a/packages/website/src/components/functional/list/demo/normal.tsx b/packages/website/src/components/functional/list/demo/normal.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/website/src/components/functional/list/demo/withIcon.tsx b/packages/website/src/components/functional/list/demo/withIcon.tsx
new file mode 100644
index 0000000000..e172956d2f
--- /dev/null
+++ b/packages/website/src/components/functional/list/demo/withIcon.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { List } from '@gio-design/components';
+import * as Icons from '@gio-design/icons';
+
+const options = [
+  { id: 'a', name: '选择事件a' },
+  { id: 'b', name: '选择事件b' },
+  { id: 'c', name: '选择事件c' },
+  { id: 'd', name: '选择事件d' },
+]
+
+const WrapperStyle = {
+  padding: '16px 8px',
+  display: 'inline-block',
+  borderRadius: 6,
+  backgroundColor: '#FFFFFF',
+  boxShadow: '0 2px 14px 1px rgba(223,226,237,0.8)',
+}
+
+const labelRenderer = (option: any, isGroup: boolean) => {
+  return (<><Icons.AppOutlined />&nbsp;&nbsp;{option.name}</>)
+}
+
+export default () => (
+  <div style={WrapperStyle}>
+    <List dataSource={options} height={160} width={170} labelRenderer={labelRenderer} />
+  </div>
+);
diff --git a/packages/website/src/components/functional/list/index.zh-CN.md b/packages/website/src/components/functional/list/index.zh-CN.md
new file mode 100644
index 0000000000..034060114d
--- /dev/null
+++ b/packages/website/src/components/functional/list/index.zh-CN.md
@@ -0,0 +1,41 @@
+---
+title: List 列表
+nav:
+  order: 2
+  title: 组件
+group:
+  title: 功能组件
+  order: 2
+---
+
+# List 列表
+
+## 定义
+以列表的形式展示同一类型的内容，可承载文字、头像、多选框、按钮等元素组合
+
+## 应用场景
+控件中使用
+ - 下拉菜单
+ - 事件选择器
+ - 维度选择器
+ - 用户选择器
+ - 日期选择器
+ - 维度过滤器
+
+在页面中使用
+ - 活动日志
+ - 用户分群 - 用户细查 - 单用户画像页
+ - 看板 - 侧边栏
+ - 用户标签 - 侧边栏
+
+## 代码演示
+
+<code src='./demo/base.tsx' title='基础列表' />
+
+<code src='./demo/withIcon.tsx' title='含Icon样式' />
+
+<code src='./demo/group.tsx' title='分组样式' />
+
+<code src='./demo/avatar.tsx' title='分类、标题、头像、辅助文字' />
+
+<code src='./demo/drag.tsx' title='拖拽列表' />
diff --git a/yarn.lock b/yarn.lock
index fd7e745c59..907d067b6b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1540,7 +1540,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -3258,6 +3258,21 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@react-dnd/asap@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz#b300eeed83e9801f51bd66b0337c9a6f04548651"
+  integrity sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==
+
+"@react-dnd/invariant@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz#09d2e81cd39e0e767d7da62df9325860f24e517e"
+  integrity sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==
+
+"@react-dnd/shallowequal@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz#a3031eb54129f2c66b2753f8404266ec7bf67f0a"
+  integrity sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==
+
 "@rollup/plugin-multi-entry@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-multi-entry/-/plugin-multi-entry-3.0.1.tgz#e23357a408d01dff514b68552392879e74d17cd9"
@@ -3553,6 +3568,11 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/asap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
+  integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
+
 "@types/babel__core@^7.0.0":
   version "7.1.9"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.9.tgz#77e59d438522a6fb898fa43dc3455c6e72f3963d"
@@ -3769,6 +3789,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/invariant@^2.2.30":
+  version "2.2.34"
+  resolved "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe"
+  integrity sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==
+
 "@types/invariant@^2.2.31":
   version "2.2.33"
   resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.33.tgz#ec5eec29c63bf5e4ca164e9feb3ef7337cdcbadb"
@@ -3974,6 +3999,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dnd@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/@types/react-dnd/-/react-dnd-3.0.2.tgz#939e5a8ca5b83f847c3f64dabbe2f49a9fefb192"
+  integrity sha512-Z1BqHYGFtfSPfWs+kgX4b6wQmwwtqq4/pLo4zdO9xcDUB1ZQP8iWTAYNf3EJ2f0WiVQpSLN8UytP+ILzZHDLYw==
+  dependencies:
+    react-dnd "*"
+
 "@types/react-dom@^16.8.2", "@types/react-dom@^16.9.6":
   version "16.9.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
@@ -4041,6 +4073,14 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-virtualized@^9.21.10":
+  version "9.21.10"
+  resolved "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.10.tgz#cd072dc9c889291ace2c4c9de8e8c050da8738b7"
+  integrity sha512-f5Ti3A7gGdLkPPFNHTrvKblpsPNBiQoSorOEOD+JPx72g/Ng2lOt4MYfhvQFQNgyIrAro+Z643jbcKafsMW2ag==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.23", "@types/react@^16.9.34":
   version "16.9.46"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e"
@@ -5807,7 +5847,7 @@ arrify@^2.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
   integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
-asap@^2.0.0, asap@~2.0.3:
+asap@^2.0.0, asap@^2.0.6, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -7178,6 +7218,11 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -8502,6 +8547,26 @@ discontinuous-range@1.0.0:
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
   integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
 
+dnd-core@^11.1.3:
+  version "11.1.3"
+  resolved "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz#f92099ba7245e49729d2433157031a6267afcc98"
+  integrity sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==
+  dependencies:
+    "@react-dnd/asap" "^4.0.0"
+    "@react-dnd/invariant" "^2.0.0"
+    redux "^4.0.4"
+
+dnd-core@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/dnd-core/-/dnd-core-9.5.1.tgz#e9ec02d33529b68fa528865704d40ac4b14f2baf"
+  integrity sha512-/yEWFF2jg51yyB8uA2UbvBr9Qis0Oo/4p9cqHLEKZdxzHHVSPfq0a/ool8NG6dIS6Q4uN+oKGObY0rNWiopJDA==
+  dependencies:
+    "@types/asap" "^2.0.0"
+    "@types/invariant" "^2.2.30"
+    asap "^2.0.6"
+    invariant "^2.2.4"
+    redux "^4.0.4"
+
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -8529,6 +8594,14 @@ dom-align@1.x, dom-align@^1.7.0:
   resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.0.tgz#56fb7156df0b91099830364d2d48f88963f5a29c"
   integrity sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==
 
+dom-helpers@^5.1.3:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -18326,6 +18399,34 @@ react-copy-to-clipboard@^5.0.2:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-dnd-html5-backend@^9.3.4:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-9.5.1.tgz#e6a0aed3ece800c1abe004f9ed9991513e2e644c"
+  integrity sha512-wUdzjREwLqHxFkA6E+XDVL5IFjRDbBI3SHVKil9n3qrGT5dm2tA2oi1aIALdfMKsu00c+OXA9lz/LuKZCE9KXg==
+  dependencies:
+    dnd-core "^9.5.1"
+
+react-dnd@*:
+  version "11.1.3"
+  resolved "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz#f9844f5699ccc55dfc81462c2c19f726e670c1af"
+  integrity sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==
+  dependencies:
+    "@react-dnd/shallowequal" "^2.0.0"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    dnd-core "^11.1.3"
+    hoist-non-react-statics "^3.3.0"
+
+react-dnd@^9.3.4:
+  version "9.5.1"
+  resolved "https://registry.npmjs.org/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"
+  integrity sha512-j2MvziPNLsxXkb3kIJzLvvOv/TQ4sysp6U4CmxAXd4C884dXm/9UGdB7K1wkTW3ZxVpI1K7XhKbX0JgNlPfLcA==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/shallowequal" "^1.1.1"
+    dnd-core "^9.5.1"
+    hoist-non-react-statics "^3.3.0"
+    shallowequal "^1.1.0"
+
 react-dom@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
@@ -18519,6 +18620,18 @@ react-use@^15.3.3:
     ts-easing "^0.2.0"
     tslib "^2.0.0"
 
+react-virtualized@^9.22.2:
+  version "9.22.2"
+  resolved "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz#217a870bad91e5438f46f01a009e1d8ce1060a5a"
+  integrity sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    clsx "^1.0.4"
+    dom-helpers "^5.1.3"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^16.12.0, react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -18771,7 +18884,7 @@ redux-saga@^0.16.0:
   resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.16.2.tgz#993662e86bc945d8509ac2b8daba3a8c615cc971"
   integrity sha512-iIjKnRThI5sKPEASpUvySemjzwqwI13e3qP7oLub+FycCRDysLSAOwt958niZW6LhxfmS6Qm1BzbU70w/Koc4w==
 
-redux@^4.0.0, redux@^4.0.1:
+redux@^4.0.0, redux@^4.0.1, redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==