From aa279b5d0b595ab244ed13178d9c70da43779ea5 Mon Sep 17 00:00:00 2001 From: Hidde Ottens Date: Tue, 4 Jul 2023 14:10:23 +0200 Subject: [PATCH 1/7] feat: add react-select component --- package-lock.json | 611 +++++++++++++++--- package.json | 5 +- src/components/select/Select.stories.tsx | 11 +- src/components/select/Select.test.tsx | 2 +- src/components/select/Select.tsx | 28 +- src/components/select/index.ts | 5 +- .../select/single-select/SingleSelect.tsx | 176 +++++ src/components/select/single-select/index.ts | 2 + src/components/select/single-select/types.ts | 19 + src/components/select/types.ts | 2 - 10 files changed, 728 insertions(+), 133 deletions(-) create mode 100644 src/components/select/single-select/SingleSelect.tsx create mode 100644 src/components/select/single-select/index.ts create mode 100644 src/components/select/single-select/types.ts diff --git a/package-lock.json b/package-lock.json index 527c1aef0..7a3bd4214 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "react-hook-form": "^7.41.0", "react-movable": "2.5.4", "react-number-format": "^4.7.3", + "react-select": "^5.7.3", "react-window": "^1.8.9", "styletron-engine-atomic": "1.4.7", "styletron-react": "^6.1.0", @@ -209,7 +210,6 @@ "version": "7.21.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz", "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==", - "dev": true, "dependencies": { "@babel/highlight": "^7.18.6" }, @@ -421,7 +421,6 @@ "version": "7.21.4", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz", "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==", - "dev": true, "dependencies": { "@babel/types": "^7.21.4" }, @@ -544,7 +543,6 @@ "version": "7.21.5", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz", "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -553,7 +551,6 @@ "version": "7.19.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -600,7 +597,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", @@ -2094,7 +2090,6 @@ "version": "7.21.5", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz", "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==", - "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.21.5", "@babel/helper-validator-identifier": "^7.19.1", @@ -2172,6 +2167,64 @@ "node": ">=10.0.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -2233,6 +2286,83 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "dev": true }, + "node_modules/@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/react/node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/react/node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "node_modules/@emotion/react/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/react/node_modules/@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/react/node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/react/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/react/node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/react/node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@emotion/serialize": { "version": "0.11.16", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", @@ -2300,6 +2430,14 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", "dev": true }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", @@ -2423,6 +2561,19 @@ "react": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.3.tgz", + "integrity": "sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==", + "dependencies": { + "@floating-ui/core": "^1.3.1" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -8296,8 +8447,7 @@ "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, "node_modules/@types/parse5": { "version": "5.0.3", @@ -8403,6 +8553,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-virtualized-auto-sizer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz", @@ -9862,7 +10020,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -10812,7 +10969,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -11779,7 +11935,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, "engines": { "node": ">=6" } @@ -11917,7 +12072,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -11931,7 +12085,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -12459,7 +12612,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -12467,8 +12619,7 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/color-support": { "version": "1.1.3", @@ -12706,8 +12857,7 @@ "node_modules/convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "node_modules/cookie": { "version": "0.5.0", @@ -12821,7 +12971,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", - "dev": true, "dependencies": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", @@ -14691,7 +14840,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -14852,7 +15000,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true, "engines": { "node": ">=10" }, @@ -16217,8 +16364,7 @@ "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "node_modules/find-up": { "version": "5.0.0", @@ -17119,7 +17265,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -17458,7 +17603,6 @@ "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==", - "dev": true, "dependencies": { "react-is": "^16.7.0" } @@ -17772,7 +17916,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -17788,7 +17931,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true, "engines": { "node": ">=4" } @@ -18159,8 +18301,7 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "dev": true + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "node_modules/is-bigint": { "version": "1.0.4", @@ -18256,7 +18397,6 @@ "version": "2.12.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", - "dev": true, "dependencies": { "has": "^1.0.3" }, @@ -22341,8 +22481,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -22527,8 +22666,7 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "node_modules/lint-staged": { "version": "13.2.2", @@ -25421,7 +25559,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "dependencies": { "callsites": "^3.0.0" }, @@ -25464,7 +25601,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -25553,8 +25689,7 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "node_modules/path-scurry": { "version": "1.9.1", @@ -25600,7 +25735,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, "engines": { "node": ">=8" } @@ -27198,6 +27332,63 @@ "node": ">=0.10.0" } }, + "node_modules/react-select": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz", + "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-select/node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/react-select/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/react-select/node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/react-select/node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/react-select/node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, + "node_modules/react-select/node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/react-syntax-highlighter": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-11.0.3.tgz", @@ -27227,6 +27418,21 @@ "react": ">=0.14.0 <17.0.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/react-uid": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.2.tgz", @@ -27900,7 +28106,6 @@ "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", - "dev": true, "dependencies": { "is-core-module": "^2.11.0", "path-parse": "^1.0.7", @@ -30065,11 +30270,15 @@ "inline-style-prefixer": "^5.1.0" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -30081,7 +30290,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -30594,7 +30802,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, "engines": { "node": ">=4" } @@ -31640,6 +31847,19 @@ } } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -33736,7 +33956,6 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, "engines": { "node": ">= 6" } @@ -33913,7 +34132,6 @@ "version": "7.21.4", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz", "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==", - "dev": true, "requires": { "@babel/highlight": "^7.18.6" } @@ -34070,7 +34288,6 @@ "version": "7.21.4", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz", "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==", - "dev": true, "requires": { "@babel/types": "^7.21.4" } @@ -34162,14 +34379,12 @@ "@babel/helper-string-parser": { "version": "7.21.5", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz", - "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==", - "dev": true + "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==" }, "@babel/helper-validator-identifier": { "version": "7.19.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", - "dev": true + "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" }, "@babel/helper-validator-option": { "version": "7.21.0", @@ -34204,7 +34419,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", @@ -35206,7 +35420,6 @@ "version": "7.21.5", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz", "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==", - "dev": true, "requires": { "@babel/helper-string-parser": "^7.21.5", "@babel/helper-validator-identifier": "^7.19.1", @@ -35261,6 +35474,63 @@ "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==", "dev": true }, + "@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "requires": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + }, + "dependencies": { + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "requires": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==" + } + } + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -35319,6 +35589,77 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "dev": true }, + "@emotion/react": { + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "requires": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/serialize": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "requires": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + } + } + }, "@emotion/serialize": { "version": "0.11.16", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", @@ -35380,6 +35721,11 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", "dev": true }, + "@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==" + }, "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", @@ -35475,6 +35821,19 @@ "@lit-labs/react": "^1.0.2" } }, + "@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + }, + "@floating-ui/dom": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.3.tgz", + "integrity": "sha512-nB/68NyaQlcdY22L+Fgd1HERQ7UGv7XFN+tPxwrEfQL4nKtAP/jIZnZtpUlXbtV+VEGHh6W/63Gy2C5biWI3sA==", + "requires": { + "@floating-ui/core": "^1.3.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -39930,8 +40289,7 @@ "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, "@types/parse5": { "version": "5.0.3", @@ -40037,6 +40395,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "requires": { + "@types/react": "*" + } + }, "@types/react-virtualized-auto-sizer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz", @@ -41193,7 +41559,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -41928,7 +42293,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "dev": true, "requires": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -42685,8 +43049,7 @@ "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, "camel-case": { "version": "4.1.2", @@ -42787,7 +43150,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -42797,8 +43159,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" } } }, @@ -43183,7 +43544,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -43191,8 +43551,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "color-support": { "version": "1.1.3", @@ -43391,8 +43750,7 @@ "convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "cookie": { "version": "0.5.0", @@ -43482,7 +43840,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", - "dev": true, "requires": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", @@ -45033,7 +45390,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "requires": { "is-arrayish": "^0.2.1" } @@ -45169,8 +45525,7 @@ "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" }, "escodegen": { "version": "2.0.0", @@ -46235,8 +46590,7 @@ "find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "find-up": { "version": "5.0.0", @@ -46932,8 +47286,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" }, "has-glob": { "version": "1.0.0", @@ -47186,7 +47539,6 @@ "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==", - "dev": true, "requires": { "react-is": "^16.7.0" } @@ -47413,7 +47765,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "requires": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -47422,8 +47773,7 @@ "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" } } }, @@ -47705,8 +48055,7 @@ "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "dev": true + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "is-bigint": { "version": "1.0.4", @@ -47766,7 +48115,6 @@ "version": "2.12.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz", "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -50872,8 +51220,7 @@ "json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "json-schema-traverse": { "version": "0.4.1", @@ -51020,8 +51367,7 @@ "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "lint-staged": { "version": "13.2.2", @@ -53291,7 +53637,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "requires": { "callsites": "^3.0.0" } @@ -53327,7 +53672,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -53395,8 +53739,7 @@ "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-scurry": { "version": "1.9.1", @@ -53431,8 +53774,7 @@ "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" }, "pbkdf2": { "version": "3.1.2", @@ -54549,6 +54891,61 @@ "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-select": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz", + "integrity": "sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==", + "requires": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "dependencies": { + "@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "requires": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, + "memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + } + } + }, "react-syntax-highlighter": { "version": "11.0.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-11.0.3.tgz", @@ -54572,6 +54969,17 @@ "prop-types": "^15.6.0" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "react-uid": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.2.tgz", @@ -55089,7 +55497,6 @@ "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", - "dev": true, "requires": { "is-core-module": "^2.11.0", "path-parse": "^1.0.7", @@ -56835,11 +57242,15 @@ "inline-style-prefixer": "^5.1.0" } }, + "stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -56847,8 +57258,7 @@ "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, "svg-to-pdfkit": { "version": "0.1.8", @@ -57264,8 +57674,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" }, "to-object-path": { "version": "0.3.0", @@ -58012,6 +58421,11 @@ "tslib": "^2.0.0" } }, + "use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==" + }, "use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -59672,8 +60086,7 @@ "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yargs": { "version": "17.7.2", diff --git a/package.json b/package.json index 97ec8be95..b1819d007 100644 --- a/package.json +++ b/package.json @@ -80,13 +80,13 @@ "msw-storybook-addon": "^1.6.3", "prettier": "2.8.8", "react-dom": "^16.14.0", + "react-window": "^1.8.9", "rimraf": "^5.0.0", "size-limit": "^4.6.0", "storybook-addon-designs": "^6.3.1", "ts-jest": "^29.1.0", "tslib": "^2.4.1", - "typescript": "^4.9.4", - "react-window": "^1.8.9" + "typescript": "^4.9.4" }, "dependencies": { "@ag-grid-community/client-side-row-model": "25.0.1", @@ -112,6 +112,7 @@ "react-hook-form": "^7.41.0", "react-movable": "2.5.4", "react-number-format": "^4.7.3", + "react-select": "^5.7.3", "react-window": "^1.8.9", "styletron-engine-atomic": "1.4.7", "styletron-react": "^6.1.0", diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx index dd798dbff..cd73bd4a9 100755 --- a/src/components/select/Select.stories.tsx +++ b/src/components/select/Select.stories.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; -import { Select } from './Select'; +import { MultiSelect as Select } from './Select'; import { ColorSelect, ColorSelectProps } from './color-select'; +import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select'; import { OPTIONS } from './test-data'; import { SelectProps } from './types'; @@ -19,6 +20,8 @@ Template.parameters = { }, }; +const SingleSelectTemplate: Story = (args) => ; + const ColorSelectTemplate: Story = (args) => ; export const Default = Template.bind({}); @@ -33,6 +36,12 @@ Default.parameters = { }, }; +export const SingleSelect = SingleSelectTemplate.bind({}); +SingleSelect.args = { + options: OPTIONS, + placeholder: 'Placeholder', +}; + export const Multi = Template.bind({}); Multi.args = { options: OPTIONS, diff --git a/src/components/select/Select.test.tsx b/src/components/select/Select.test.tsx index 16a2f3bba..db117130d 100755 --- a/src/components/select/Select.test.tsx +++ b/src/components/select/Select.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; import * as React from 'react'; import { configure, render, screen } from '../../utils/test-utils'; -import { Select } from '.'; +import { MultiSelect as Select } from '.'; import { OPTIONS } from './test-data'; const SKELETON_TEST_ID = 'loader'; diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx index 47fa7b5b8..8f86db187 100755 --- a/src/components/select/Select.tsx +++ b/src/components/select/Select.tsx @@ -14,11 +14,8 @@ import { Skeleton } from '../skeleton'; import { FlexItem } from '../flex-item'; import { CaretDownIcon } from '../icons/caret-down'; import { SelectProps } from './types'; -import { AddLineIcon } from '../icons'; -import { Button } from '../button'; -import { ButtonKind } from '../../models'; -export const Select = ({ +export const MultiSelect = ({ size = 'compact', valueKey = 'id', labelKey = 'name', @@ -31,8 +28,6 @@ export const Select = ({ disableSortOptions = false, disabled = false, error = false, - stickyButtonText, - stickyButtonOnClick, ...rest }: SelectProps) => { const { @@ -75,8 +70,6 @@ export const Select = ({ return options.length > 1 ? [...options].sort((a, b) => a[labelKey]?.localeCompare(b[labelKey])) : options; }; - const showStickButton = stickyButtonText && stickyButtonOnClick; - return ( <> {showSkeleton ? ( @@ -89,7 +82,7 @@ export const Select = ({ onChange={handleOnChange} disabled={disabled} error={error} - multi={multi} + multi type="select" options={alphabetizeOptions(options, disableSortOptions)} {...rest} @@ -142,23 +135,6 @@ export const Select = ({ ...margin('0', '0', '0', `-${scale0}`), }, }, - DropdownContainer: { - ...(showStickButton && { - props: ({ children, ...rest }) => ({ - ...rest, - children: ( - <> - {children} - - - - - ), - }), - }), - }, Input: { style: { ...ParagraphSmall, diff --git a/src/components/select/index.ts b/src/components/select/index.ts index b406cac92..ed39b6c19 100755 --- a/src/components/select/index.ts +++ b/src/components/select/index.ts @@ -1,5 +1,6 @@ -export { Select } from './Select'; -export type { Option, Value, OnChangeParams } from './Select'; +export { MultiSelect } from './Select'; +export type { Value, OnChangeParams } from './Select'; export { ColorSelect } from './color-select'; export type { ColorOptionProps } from './color-option'; export * from './types'; +export * from './single-select'; diff --git a/src/components/select/single-select/SingleSelect.tsx b/src/components/select/single-select/SingleSelect.tsx new file mode 100644 index 000000000..32960faa0 --- /dev/null +++ b/src/components/select/single-select/SingleSelect.tsx @@ -0,0 +1,176 @@ +import React from 'react'; +import { CaretDownIcon, FlexItem, Skeleton } from '../..'; +import Select from 'react-select/creatable'; +import { useTheme } from '../../../providers'; +import { + border, + borderBottom, + borderRadius, + getInputBorderColor, + getInputBackgroundColor, + padding, +} from '../../../utils'; +import { SingleSelectProps, Option } from './types'; + +export const SingleSelect = ({ + valueKey = 'id', + labelKey = 'name', + showSkeleton = false, + disableSortOptions = false, + options, + clearable = false, + searchable = true, + isLoading = false, + disabled = false, + error = false, + success = false, + onChange, + placeholder, +}: SingleSelectProps) => { + const { + theme: { + current: { + colors, + borders, + customColors, + sizing: { scale100, scale300, scale600, scale950 }, + customSizing: { scale975 }, + typography: { ParagraphSmall }, + }, + }, + } = useTheme(); + const { border300, radius200 } = borders; + const { primary100, contentPrimary, primaryB } = colors; + const { dark4 } = customColors; + + const alphabetizeOptions = (options: Option[], disableSortOptions?: boolean) => { + if (!options) { + return []; + } + if (disableSortOptions) { + return options; + } + + return options.length > 1 ? [...options].sort((a, b) => a[labelKey]?.localeCompare(b[labelKey])) : options; + }; + + const alphabetizedOptions = alphabetizeOptions(options, disableSortOptions); + + return ( + <> + {showSkeleton ? ( + + ) : ( + onChange && onChange({ date: value })} - /> - ), + component: (props) => { + console.log(props); + return ( + onChange && onChange({ date: option?.id as unknown as Date })} + /> + ); + }, }, ...overrides, }} diff --git a/src/components/datepicker/Datepicker.tsx b/src/components/datepicker/Datepicker.tsx index 2f8336008..56fd4d8e7 100755 --- a/src/components/datepicker/Datepicker.tsx +++ b/src/components/datepicker/Datepicker.tsx @@ -11,7 +11,7 @@ import { } from '../../utils'; import { useTheme } from '../../providers'; import { DatePicker, DatepickerOverrides, QuickSelectOption } from 'baseui/datepicker'; -import { Select } from '../select'; +import { SingleSelect } from '../select'; import { DATA_TEST_ID } from '../../models'; import { InputOverrides } from 'baseui/input'; import { CalendarIcon } from '../icons/calendar'; @@ -21,7 +21,6 @@ import { Skeleton } from '../skeleton'; export const Datepicker = ({ customValue, - setCustomValue, placement = 'bottomLeft', locale, weekStartDay, @@ -213,7 +212,7 @@ export const Datepicker = ({ }, }, QuickSelect: { - component: (props: any) => ; @@ -20,33 +18,20 @@ Template.parameters = { }, }; -const SingleSelectTemplate: Story = (args) => ; +const SingleSelectTemplate: Story> = (args) => ; -const ColorSelectTemplate: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - options: OPTIONS, - placeholder: 'Placeholder', -}; -Default.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/QrIqXt997mm9ePey5JCLAJ/DS-1.0?node-id=1733%3A11543&t=NbmXDJ7K9Ilt6afV-4', - }, -}; - -export const SingleSelect = SingleSelectTemplate.bind({}); -SingleSelect.args = { +export const Single = SingleSelectTemplate.bind({}); +Single.args = { options: OPTIONS, placeholder: 'Placeholder', + creatable: true, + clearable: true, }; export const Multi = Template.bind({}); Multi.args = { options: OPTIONS, placeholder: 'Placeholder', - multi: true, value: [OPTIONS[0], OPTIONS[1]], }; Multi.parameters = { @@ -55,42 +40,3 @@ Multi.parameters = { url: 'https://www.figma.com/file/QrIqXt997mm9ePey5JCLAJ/DS-1.0?node-id=1733%3A11543&t=NbmXDJ7K9Ilt6afV-4', }, }; - -export const WithStickyButton = Template.bind({}); -WithStickyButton.args = { - options: OPTIONS, - placeholder: 'Placeholder', - stickyButtonText: 'Add new item', - stickyButtonOnClick: () => alert('Add new item'), -}; -WithStickyButton.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/QrIqXt997mm9ePey5JCLAJ/DS-1.0?node-id=1733%3A11543&t=NbmXDJ7K9Ilt6afV-4', - }, -}; - -export const Loading = Template.bind({}); -Loading.args = { - options: OPTIONS, - placeholder: 'Placeholder', - isLoading: true, -}; -Loading.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/QrIqXt997mm9ePey5JCLAJ/DS-1.0?node-id=1733%3A11543&t=NbmXDJ7K9Ilt6afV-4', - }, -}; - -export const Color = ColorSelectTemplate.bind({}); -Color.args = { - placeholder: 'Placeholder', - colors: OPTIONS, -}; -Color.parameters = { - design: { - type: 'figma', - url: 'https://www.figma.com/file/QrIqXt997mm9ePey5JCLAJ/DS-1.0?node-id=1733%3A11543&t=NbmXDJ7K9Ilt6afV-4', - }, -}; diff --git a/src/components/select/Select.test.tsx b/src/components/select/Select.test.tsx index db117130d..9cf29e68b 100755 --- a/src/components/select/Select.test.tsx +++ b/src/components/select/Select.test.tsx @@ -9,7 +9,7 @@ const LOADER_TITLE = 'Loading'; test('it shows a skeleton', () => { // eslint-disable-next-line @typescript-eslint/no-empty-function - render( {}} />); // baseweb has set the loader test id in the following format: `testid` configure({ testIdAttribute: 'testid' }); @@ -20,7 +20,7 @@ test('it shows a skeleton', () => { // This test is skipped because it is not working. It is not finding the loader. test.skip('it shows a loading indicator when loading', () => { // eslint-disable-next-line @typescript-eslint/no-empty-function - render( {}} />); expect(screen.getAllByTitle(LOADER_TITLE)).not.toBeNull(); }); diff --git a/src/components/select/color-option/ColorOption.tsx b/src/components/select/color-option/ColorOption.tsx deleted file mode 100755 index 217becfa4..000000000 --- a/src/components/select/color-option/ColorOption.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Option as BaseOptionProps } from '../Select'; - -import { StyledOption, StyledColorSwatch } from '../ColorSelectStyles'; - -export interface ColorOptionProps extends Omit { - name: string; - color: string; -} - -export const ColorOption = (args: { - option?: BaseOptionProps; - optionState?: { - $selected?: boolean; - $disabled?: boolean; - $isHighlighted?: boolean; - }; -}) => { - return ( - - - {args.option?.name} - - ); -}; diff --git a/src/components/select/color-option/index.ts b/src/components/select/color-option/index.ts deleted file mode 100644 index 10ff8ce0f..000000000 --- a/src/components/select/color-option/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ColorOption'; diff --git a/src/components/select/color-select/ColorSelect.tsx b/src/components/select/color-select/ColorSelect.tsx deleted file mode 100755 index d5c3bd452..000000000 --- a/src/components/select/color-select/ColorSelect.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Select as BaseSelect, OnChangeParams } from '../Select'; -import { SelectProps as BaseSelectProps } from '../types'; - -import { ColorOption } from '../color-option'; - -export interface ColorOptionProps { - name: string; - color: string; -} - -type ParamOptionValue = ReadonlyArray; -interface ParamOptionsProps extends OnChangeParams { - value: ParamOptionValue; - option: ColorOptionProps; -} - -export interface ColorSelectProps extends Omit { - colors: ColorOptionProps[]; - value?: ParamOptionValue; - onChange?: (params: ParamOptionsProps) => unknown; -} - -export const ColorSelect = ({ colors, ...rest }: ColorSelectProps) => { - return ( - unknown} - /> - ); -}; diff --git a/src/components/select/color-select/index.ts b/src/components/select/color-select/index.ts deleted file mode 100644 index f2012066f..000000000 --- a/src/components/select/color-select/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ColorSelect'; diff --git a/src/components/select/index.ts b/src/components/select/index.ts index ed39b6c19..2ffb14d4a 100755 --- a/src/components/select/index.ts +++ b/src/components/select/index.ts @@ -1,6 +1,4 @@ -export { MultiSelect } from './Select'; -export type { Value, OnChangeParams } from './Select'; -export { ColorSelect } from './color-select'; -export type { ColorOptionProps } from './color-option'; -export * from './types'; +export { MultiSelect } from './multi-select/MultiSelect'; +export type { Value, OnChangeParams } from './multi-select/MultiSelect'; +export * from './multi-select/types'; export * from './single-select'; diff --git a/src/components/select/Select.tsx b/src/components/select/multi-select/MultiSelect.tsx similarity index 88% rename from src/components/select/Select.tsx rename to src/components/select/multi-select/MultiSelect.tsx index 8f86db187..83c6a98f7 100755 --- a/src/components/select/Select.tsx +++ b/src/components/select/multi-select/MultiSelect.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Select as BaseSelect, Option, Value, OnChangeParams } from 'baseui/select'; -import { useTheme } from '../../providers'; +import { Select as BaseSelect, Option, Value, OnChangeParams, Options } from 'baseui/select'; +import { useTheme } from '../../../providers'; import { border, borderBottom, @@ -9,25 +9,25 @@ import { getInputBackgroundColor, padding, margin, -} from '../../utils'; -import { Skeleton } from '../skeleton'; -import { FlexItem } from '../flex-item'; -import { CaretDownIcon } from '../icons/caret-down'; +} from '../../../utils'; +import { Skeleton } from '../../skeleton'; +import { FlexItem } from '../../flex-item'; +import { CaretDownIcon } from '../../icons/caret-down'; import { SelectProps } from './types'; +import { DEFAULT_LABEL_KEY, DEFAULT_VALUE_KEY } from '../single-select'; export const MultiSelect = ({ size = 'compact', - valueKey = 'id', - labelKey = 'name', + valueKey = DEFAULT_VALUE_KEY, + labelKey = DEFAULT_LABEL_KEY, showSkeleton = false, propOverrides, - onChangeHandler, - multi, options, success = false, disableSortOptions = false, disabled = false, error = false, + isLoading = false, ...rest }: SelectProps) => { const { @@ -46,15 +46,7 @@ export const MultiSelect = ({ const { primary100, contentPrimary } = colors; const { primarySubtle, dark4 } = customColors; - const handleOnChange = (params: OnChangeParams) => { - if (multi) { - return onChangeHandler(params); - } - const { value } = params; - return onChangeHandler({ ...params, value: value?.length === 1 ? value[0] : value }); - }; - - const alphabetizeOptions = (options: Option[] | { [key: string]: Option[] }, disableSortOptions?: boolean) => { + const alphabetizeOptions = (options: Options, disableSortOptions?: boolean) => { if (!options) { return []; } @@ -79,8 +71,7 @@ export const MultiSelect = ({ size={size} valueKey={valueKey} labelKey={labelKey} - onChange={handleOnChange} - disabled={disabled} + disabled={disabled || isLoading} error={error} multi type="select" diff --git a/src/components/select/multi-select/index.ts b/src/components/select/multi-select/index.ts new file mode 100644 index 000000000..3c3f5ae6c --- /dev/null +++ b/src/components/select/multi-select/index.ts @@ -0,0 +1,2 @@ +export * from './MultiSelect'; +export * from './types'; diff --git a/src/components/select/styles.ts b/src/components/select/multi-select/styles.ts similarity index 78% rename from src/components/select/styles.ts rename to src/components/select/multi-select/styles.ts index 4e44fb9ec..f8e6df4ac 100644 --- a/src/components/select/styles.ts +++ b/src/components/select/multi-select/styles.ts @@ -1,5 +1,5 @@ -import { themedStyled } from '../../theme'; -import { borderRadius } from '../../utils'; +import { themedStyled } from '../../../theme'; +import { borderRadius } from '../../../utils'; export const DropdownButtonWrapper = themedStyled('div', ({ $theme }) => ({ height: $theme.sizing.scale1000, diff --git a/src/components/select/multi-select/types.ts b/src/components/select/multi-select/types.ts new file mode 100644 index 000000000..1ca0cf735 --- /dev/null +++ b/src/components/select/multi-select/types.ts @@ -0,0 +1,13 @@ +import { SelectProps as BaseSelectProps } from 'baseui/select'; + +type OmittedProps = 'type' | 'multi'; + +export interface SelectProps extends Omit { + showSkeleton?: boolean; + disableSortOptions?: boolean; + propOverrides?: { + dropdownListItemProps?: () => object; + rootProps?: () => object; + }; + success?: boolean; +} diff --git a/src/components/select/single-select/SingleSelect.tsx b/src/components/select/single-select/SingleSelect.tsx index 32960faa0..602c4cd18 100644 --- a/src/components/select/single-select/SingleSelect.tsx +++ b/src/components/select/single-select/SingleSelect.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { CaretDownIcon, FlexItem, Skeleton } from '../..'; -import Select from 'react-select/creatable'; +import SelectCreatable from 'react-select/creatable'; +import Select, { Props as SelectProps } from 'react-select'; import { useTheme } from '../../../providers'; import { border, @@ -12,21 +13,27 @@ import { } from '../../../utils'; import { SingleSelectProps, Option } from './types'; -export const SingleSelect = ({ - valueKey = 'id', - labelKey = 'name', +export const DEFAULT_VALUE_KEY = 'id'; +export const DEFAULT_LABEL_KEY = 'name'; + +export const SingleSelect = ({ + valueKey, + labelKey, showSkeleton = false, disableSortOptions = false, options, clearable = false, searchable = true, isLoading = false, + creatable = false, disabled = false, error = false, success = false, onChange, placeholder, -}: SingleSelectProps) => { + createText = (inputValue: string) => `Create ${inputValue}`, + onCreateOption, +}: SingleSelectProps) => { const { theme: { current: { @@ -43,7 +50,7 @@ export const SingleSelect = ({ const { primary100, contentPrimary, primaryB } = colors; const { dark4 } = customColors; - const alphabetizeOptions = (options: Option[], disableSortOptions?: boolean) => { + const alphabetizeOptions = (options: Option[], disableSortOptions?: boolean) => { if (!options) { return []; } @@ -51,125 +58,135 @@ export const SingleSelect = ({ return options; } - return options.length > 1 ? [...options].sort((a, b) => a[labelKey]?.localeCompare(b[labelKey])) : options; + return options.length > 1 + ? [...options].sort((a, b) => a[labelKey ?? DEFAULT_LABEL_KEY]?.localeCompare(b[labelKey ?? DEFAULT_LABEL_KEY])) + : options; }; const alphabetizedOptions = alphabetizeOptions(options, disableSortOptions); + const props: SelectProps, false> = { + onChange, + options: alphabetizedOptions, + placeholder, + isClearable: clearable, + isSearchable: searchable, + isDisabled: disabled || isLoading, + isLoading, + getOptionLabel: (option: Option) => { + if (option.__isNew__) { + return createText(option.value); + } + + return option[labelKey ?? DEFAULT_LABEL_KEY]; + }, + getOptionValue: (option: Option) => option[valueKey ?? DEFAULT_VALUE_KEY], + styles: { + control: (provided, { isFocused }) => ({ + ...provided, + backgroundColor: getInputBackgroundColor({ disabled, customColors, colors }), + ...borderRadius(radius200), + ...border({ + ...border300, + borderColor: getInputBorderColor({ + error, + success, + isFocused, + customColors, + colors, + }), + }), + boxShadow: 'none', + height: scale950, + ':hover': { + ...border({ + ...border300, + borderColor: getInputBorderColor({ + error, + success, + isFocused, + customColors, + colors, + hover: true, + disabled, + }), + }), + }, + }), + valueContainer: (provided) => ({ + ...provided, + ...padding('0', scale600), + }), + placeholder: (provided) => ({ + ...provided, + ...ParagraphSmall, + color: dark4, + }), + input: (provided) => ({ + ...provided, + ...ParagraphSmall, + }), + singleValue: (provided) => ({ + ...provided, + ...ParagraphSmall, + lineHeight: scale950, + }), + menu: (provided) => ({ + ...provided, + zIndex: 99999, + ...borderRadius(radius200), + ...border(border300), + boxShadow: 'none', + }), + menuList: (provided) => ({ + ...provided, + ...padding(), + }), + option: (provided, { isSelected }) => ({ + ...provided, + ...borderBottom(border300), + ...ParagraphSmall, + color: contentPrimary, + ':hover': { + backgroundColor: primary100, + }, + backgroundColor: isSelected ? primary100 : primaryB, + cursor: 'pointer', + ...padding(scale300, scale600), + ':last-child': { + borderBottomLeftRadius: radius200, + borderBottomRightRadius: radius200, + ...borderBottom(), + }, + ':first-child': { + borderTopLeftRadius: radius200, + borderTopRightRadius: radius200, + }, + }), + indicatorSeparator: () => ({ + display: 'none', + }), + noOptionsMessage: (provided) => ({ + ...provided, + ...ParagraphSmall, + color: dark4, + }), + }, + components: { + DropdownIndicator: () => ( + + + + ), + }, + }; + return ( <> {showSkeleton ? ( ) : ( - } )} ); diff --git a/src/components/select/single-select/types.ts b/src/components/select/single-select/types.ts index 382f624bd..4a5ef3350 100644 --- a/src/components/select/single-select/types.ts +++ b/src/components/select/single-select/types.ts @@ -1,19 +1,26 @@ -export type Option = { - [key: string]: string; +export type Option = { + [key in ValueKey]: T; +} & { + [key in LabelKey]: string; +} & { + [key: string]: any; }; -export interface SingleSelectProps { - valueKey?: string; - labelKey?: string; +export interface SingleSelectProps { + valueKey?: ValueKey; + labelKey?: LabelKey; showSkeleton?: boolean; disableSortOptions?: boolean; - options: Option[]; + options: Option[]; clearable?: boolean; searchable?: boolean; disabled?: boolean; isLoading?: boolean; - onChange?: (value: Option | null) => void; + creatable?: boolean; + onChange?: (value: Option | null) => void; placeholder?: string; error?: boolean; success?: boolean; + createText?: (inputValue: string) => string; + onCreateOption?: (inputValue: string) => void; } diff --git a/src/components/select/types.ts b/src/components/select/types.ts deleted file mode 100644 index 64cc4eee1..000000000 --- a/src/components/select/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Option, SelectProps as BaseSelectProps } from 'baseui/select'; - -interface CustomParams { - value: any; - option: Option | undefined | null; - type?: any; -} - -export interface SelectProps extends Omit { - showSkeleton?: boolean; - disableSortOptions?: boolean; - options: Option[] | { [key: string]: Option[] }; - onChangeHandler: (params: CustomParams) => void; - propOverrides?: { - dropdownListItemProps?: () => object; - rootProps?: () => object; - }; - success?: boolean; -} From e3582df10103ebd5f72e8e6c7a0b2b5330bb08c7 Mon Sep 17 00:00:00 2001 From: Hidde Ottens Date: Wed, 12 Jul 2023 12:07:41 +0200 Subject: [PATCH 3/7] chore: remove row select component --- src/components/data-grid/DataGrid.tsx | 5 - src/components/data-grid/types.ts | 3 +- .../datepicker/DatePickerTemplate.tsx | 7 +- src/components/index.ts | 1 - src/components/row-select/RowSelect.tsx | 184 ------------------ src/components/row-select/index.ts | 2 - src/components/row-select/types.ts | 22 --- 7 files changed, 2 insertions(+), 222 deletions(-) delete mode 100644 src/components/row-select/RowSelect.tsx delete mode 100644 src/components/row-select/index.ts delete mode 100644 src/components/row-select/types.ts diff --git a/src/components/data-grid/DataGrid.tsx b/src/components/data-grid/DataGrid.tsx index add536e4e..7660ad4c7 100755 --- a/src/components/data-grid/DataGrid.tsx +++ b/src/components/data-grid/DataGrid.tsx @@ -63,7 +63,6 @@ import { defaultTranslations } from './defaultTranslations'; import { DataGridViews } from './views/data-grid-views'; import ReactDOMServer from 'react-dom/server'; import DataGridActions from './DataGridActions'; -import { RowSelect } from '../row-select'; import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'; import { GroupRowInnerRenderer } from './group-row-inner-renderer'; import { GroupRowInnerTagRenderer } from './group-row-inner-tag-renderer'; @@ -887,7 +886,6 @@ export const DataGrid = ({ noRowsTemplate: () => , headerCheckbox: HeaderCheckbox, loadingCellTemplate: LoadingCellTemplate, - rowSelect: RowSelect, groupRowInnerRenderer: GroupRowInnerRenderer, groupRowInnerTagRenderer: GroupRowInnerTagRenderer, }} @@ -973,13 +971,10 @@ export const DataGrid = ({ aggFunc, customMap, customComponent, - rowSelectProps, ...rest }) => ( void; - options: Option[]; + options: Option[]; optionProp: string; isLockedIconDisplayedFunc?: (data: any) => boolean; } @@ -71,7 +71,6 @@ export interface DataGridColumn extends AgGridColumnProps { customMap?: (value: any) => any; customComponent?: React.FunctionComponent<{ data: any; value: any }>; customHeaderComponent?: React.FunctionComponent; - rowSelectProps?: DataGridRowSelectProps; } export type FilterTypeModel = TextFilterModel | NumberFilterModel | DateFilterModel | SetFilterModel; diff --git a/src/components/datepicker/DatePickerTemplate.tsx b/src/components/datepicker/DatePickerTemplate.tsx index 9e23c91bf..d8eea5836 100644 --- a/src/components/datepicker/DatePickerTemplate.tsx +++ b/src/components/datepicker/DatePickerTemplate.tsx @@ -5,11 +5,6 @@ import { DatePickerProps } from './types'; export const DatePickerTemplate = ({ ...rest }: DatePickerProps) => { const [value, setValue] = useState([new Date()]); return ( - setValue(Array.isArray(date) ? date : [date])} - /> + setValue(Array.isArray(date) ? date : [date])} /> ); }; diff --git a/src/components/index.ts b/src/components/index.ts index eafe8fc04..c4833c466 100755 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -40,7 +40,6 @@ export * from './banner'; export * from './dot'; export * from './breadcrumbs'; export * from './copy-text'; -export * from './row-select'; export * from './attachments-list'; export * from './tag'; export * from './toggle'; diff --git a/src/components/row-select/RowSelect.tsx b/src/components/row-select/RowSelect.tsx deleted file mode 100644 index 6d1f85154..000000000 --- a/src/components/row-select/RowSelect.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import React, { useMemo } from 'react'; -import { useForm } from 'react-hook-form'; -import { Select as BaseSelect, Value } from 'baseui/select'; -import { useTheme } from '../../providers'; -import { border, borderBottom, borderRadius, padding } from '../../utils'; -import { Skeleton } from '../skeleton'; -import { FlexItem } from '../flex-item'; -import { CaretDownIcon } from '../icons/caret-down'; -import { LockedIcon } from '../icons/locked'; -import { FormInput, RowSelectProps } from './types'; - -export const RowSelect = ({ - size = 'compact', - valueKey = 'id', - labelKey = 'name', - showSkeleton = false, - isLockedIconDisplayedFunc, - propOverrides, - onChangeHandler, - data, - options, - optionProp, - ...rest -}: RowSelectProps) => { - const { - theme: { - current: { - colors, - customColors: { primarySubtle, dark4 }, - borders, - sizing: { scale0, scale100, scale300, scale700, scale900 }, - typography: { ParagraphSmall, LabelSmall }, - customSizing: { scale4375, scale7500 }, - }, - }, - } = useTheme(); - const { watch, reset } = useForm({ - mode: 'onChange', - }); - - const defaultSelectOption = useMemo(() => { - return options.find((option) => option[valueKey] === data[optionProp]); - }, [options, data, optionProp, valueKey]); - - const { selectOption = [defaultSelectOption] } = watch(); - - const { border300, radius200 } = borders; - const { primary100, contentPrimary } = colors; - - const handleOnChange = (selectData: { value: Value }) => { - reset({ - selectOption: selectData.value, - }); - onChangeHandler({ ...selectData, ...data }); - }; - - const isLocked = useMemo(() => { - if (isLockedIconDisplayedFunc) { - return isLockedIconDisplayedFunc(data); - } - }, [isLockedIconDisplayedFunc, data]); - - return ( - <> - {showSkeleton ? ( - - ) : ( - ({ - backgroundColor: primarySubtle, - ...borderRadius(scale0), - minWidth: scale4375, - }), - props: { - ...propOverrides?.rootProps?.apply(propOverrides), - }, - }, - Placeholder: { - style: { - ...ParagraphSmall, - color: dark4, - }, - }, - DropdownContainer: { - style: { - ...borderRadius(scale0), - ...border(border300), - }, - }, - Input: { - style: { - ...LabelSmall, - }, - }, - ValueContainer: { - style: { - ...LabelSmall, - ...padding(scale0, '0', scale0, scale100), - fontWeight: 400, - }, - }, - Dropdown: { - style: { - ...padding('0'), - ...borderRadius(radius200), - maxHeight: scale7500, - }, - }, - DropdownListItem: { - style: { - ...borderBottom(border300), - ...ParagraphSmall, - ':hover': { - backgroundColor: primary100, - }, - }, - props: { - ...propOverrides?.dropdownListItemProps?.apply(propOverrides), - }, - }, - IconsContainer: { - style: { - ...padding('0', scale300, '0', '0'), - }, - }, - SelectArrow: { - component: () => ( - - {isLocked ? : } - - ), - }, - ClearIcon: { - style: { - display: 'none', - }, - }, - LoadingIndicator: { - props: { - overrides: { - Svg: { - style: { - width: scale700, - height: scale700, - }, - }, - }, - }, - }, - Popover: { - props: { - overrides: { - Body: { - style: { - zIndex: 99999, - }, - }, - }, - }, - }, - }} - /> - )} - - ); -}; diff --git a/src/components/row-select/index.ts b/src/components/row-select/index.ts deleted file mode 100644 index edb624048..000000000 --- a/src/components/row-select/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { RowSelect } from './RowSelect'; -export type { RowSelectProps } from './types'; diff --git a/src/components/row-select/types.ts b/src/components/row-select/types.ts deleted file mode 100644 index 3a381f21b..000000000 --- a/src/components/row-select/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Option, Value, SelectProps as BaseSelectProps } from '../select'; - -export interface FormInput { - selectOption: Value; -} -export interface RowSelectProps extends BaseSelectProps { - showSkeleton?: boolean; - isLockedIconDisplayedFunc?: (data: any) => boolean; - options: Option[]; - propOverrides?: { - dropdownListItemProps?: () => object; - rootProps?: () => object; - }; - placeholder: string; - labelKey: string; - valueKey: string; - onChangeHandler: (data: any) => void; - optionProp: string; - data: { - [key: string]: any; - }; -} From 5c7fe0d4d515a23716c9de24d6ca5241bc4de0a0 Mon Sep 17 00:00:00 2001 From: Hidde Ottens Date: Wed, 12 Jul 2023 15:53:32 +0200 Subject: [PATCH 4/7] chore: fix single select prop types --- package-lock.json | 4 +- package.json | 2 +- .../data-grid/filters/ColumnFilters.tsx | 3 +- src/components/data-grid/types.ts | 11 --- .../DatepickerPopover.stories.tsx | 4 +- .../datepicker-popover/DatepickerPopover.tsx | 84 +++++++++++++++---- src/components/datepicker-popover/types.ts | 8 +- src/components/select/Select.stories.tsx | 6 +- src/components/select/Select.test.tsx | 2 +- src/components/select/index.ts | 2 +- .../select/multi-select/MultiSelect.tsx | 3 +- src/components/select/multi-select/types.ts | 2 + .../select/single-select/SingleSelect.tsx | 14 ++-- src/components/select/single-select/types.ts | 5 +- 14 files changed, 100 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a3bd4214..e488c3253 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@timechimp/tacugama", - "version": "8.1.9", + "version": "9.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@timechimp/tacugama", - "version": "8.1.9", + "version": "9.0.0", "license": "MIT", "dependencies": { "@ag-grid-community/client-side-row-model": "25.0.1", diff --git a/package.json b/package.json index b1819d007..7f152d575 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "8.1.9", + "version": "9.0.0", "license": "MIT", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/components/data-grid/filters/ColumnFilters.tsx b/src/components/data-grid/filters/ColumnFilters.tsx index 24f8eb6e9..9119cda68 100755 --- a/src/components/data-grid/filters/ColumnFilters.tsx +++ b/src/components/data-grid/filters/ColumnFilters.tsx @@ -223,8 +223,7 @@ export const ColumnFilters = ({ arrows /> onDateSelect({ date, columnField })} + onChange={(date) => onDateSelect({ date, columnField })} date={internalDates.length ? internalDates : dates} isOpen={datepickerIsOpen} setIsOpen={toggleDatePicker} diff --git a/src/components/data-grid/types.ts b/src/components/data-grid/types.ts index 887980e9a..ce6159960 100755 --- a/src/components/data-grid/types.ts +++ b/src/components/data-grid/types.ts @@ -17,7 +17,6 @@ import { DurationFormat, NumberFormat, SupportedLocale } from '@timechimp/timech import { DropdownItem } from '../dropdown'; import { SVGProps as IconProps } from '..'; import { SetFilterModel } from '@ag-grid-enterprise/set-filter'; -import { Option } from '../select'; import { AgGridColumnProps } from '@ag-grid-community/react'; import { DatepickerRangeTranslations } from '../datepicker'; import { AgGridReact } from '@ag-grid-community/react/lib/agGridReact'; @@ -49,16 +48,6 @@ export interface DataGridApi { export type DataGridColumnValueType = 'number' | 'integer' | 'currency' | 'date' | 'time' | 'datetime' | 'duration'; export type DataGridAggFunc = 'sum'; -export interface DataGridRowSelectProps { - placeholder: string; - labelKey: string; - valueKey: string; - onChangeHandler: (data: any) => void; - options: Option[]; - optionProp: string; - isLockedIconDisplayedFunc?: (data: any) => boolean; -} - export interface DataGridColumn extends AgGridColumnProps { field: string; label?: string; diff --git a/src/components/datepicker-popover/DatepickerPopover.stories.tsx b/src/components/datepicker-popover/DatepickerPopover.stories.tsx index f4b8d748c..14851685e 100755 --- a/src/components/datepicker-popover/DatepickerPopover.stories.tsx +++ b/src/components/datepicker-popover/DatepickerPopover.stories.tsx @@ -3,6 +3,7 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { DatepickerPopover } from '.'; import { DatepickerPopoverProps } from './types'; +import { TcDate } from '@timechimp/timechimp-typescript-helpers'; export default { title: 'Components/DatepickerPopover', @@ -16,7 +17,8 @@ const Template: Story = (args) => (isOpen = !isOpen), + quickSelect: true, }; diff --git a/src/components/datepicker-popover/DatepickerPopover.tsx b/src/components/datepicker-popover/DatepickerPopover.tsx index 19837678a..ed3cc7d67 100755 --- a/src/components/datepicker-popover/DatepickerPopover.tsx +++ b/src/components/datepicker-popover/DatepickerPopover.tsx @@ -1,11 +1,11 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Popover } from '../popover'; import { borderBottom } from '../../utils'; import { useTheme } from '../../providers'; -import { Calendar, QuickSelectOption } from 'baseui/datepicker'; +import { Calendar } from 'baseui/datepicker'; import { SingleSelect } from '../select'; import { getDateLocale, TcDate } from '@timechimp/timechimp-typescript-helpers'; -import { DatepickerPopoverProps } from './types'; +import { DatepickerOption, DatepickerPopoverProps } from './types'; export const DatepickerPopover = ({ date, @@ -17,6 +17,7 @@ export const DatepickerPopover = ({ overrides, translations, onChange, + quickSelect = false, ...rest }: DatepickerPopoverProps) => { const [localeObj, setLocaleObj] = useState(); @@ -41,7 +42,7 @@ export const DatepickerPopover = ({ } }, [locale, weekStartDay]); - const quickSelectOptions: QuickSelectOption[] = [ + const quickSelectOptions: DatepickerOption[] = [ { id: translations?.today ?? 'Today', beginDate: new Date(), @@ -94,6 +95,47 @@ export const DatepickerPopover = ({ }, ]; + const isSameDate = (option: DatepickerOption, _date: Date[]) => { + const selectedBeginDate = _date[0]; + const selectedEndDate = _date[1]; + const optionBeginDate = new TcDate(option.beginDate); + const optionEndDate = new TcDate(option.endDate); + + return optionBeginDate.isSame(selectedBeginDate, 'day') && optionEndDate.isSame(selectedEndDate, 'day'); + }; + + const isSameSingleDate = (option: DatepickerOption, _date: Date) => { + const selectedDate = _date; + const optionBeginDate = new TcDate(option.beginDate); + + return optionBeginDate.isSame(selectedDate, 'day'); + }; + + const isDateInQuickSelectOptions = useMemo(() => { + if (!date || !quickSelect) { + return false; + } + + if (!Array.isArray(date)) { + return quickSelectOptions.some((option) => isSameSingleDate(option, date)); + } + return quickSelectOptions.some((option) => isSameDate(option, date)); + }, [date, quickSelectOptions]); + + const quickSelectValue = useMemo(() => { + if (!date || !quickSelect || !isDateInQuickSelectOptions) { + return undefined; + } + + if (!Array.isArray(date)) { + const quickSelectOption = quickSelectOptions.find((option) => isSameSingleDate(option, date)); + return quickSelectOption; + } + + const quickSelectOption = quickSelectOptions.find((option) => isSameDate(option, date)); + return quickSelectOption; + }, [date, quickSelectOptions, isDateInQuickSelectOptions]); + return ( ( { + if (date) { + onChange(date as Date | Date[]); + } + }} locale={localeObj} - quickSelect - quickSelectOptions={quickSelectOptions} + quickSelect={quickSelect} + range={quickSelect} overrides={{ CalendarHeader: { style: { @@ -146,16 +192,20 @@ export const DatepickerPopover = ({ }, }, QuickSelect: { - component: (props) => { - console.log(props); - return ( - onChange && onChange({ date: option?.id as unknown as Date })} - /> - ); - }, + component: () => ( + { + if (option && option.beginDate && option.endDate) { + onChange([option.beginDate, option.endDate]); + } + }} + /> + ), }, ...overrides, }} diff --git a/src/components/datepicker-popover/types.ts b/src/components/datepicker-popover/types.ts index dfd19f0ff..d442e4aa9 100644 --- a/src/components/datepicker-popover/types.ts +++ b/src/components/datepicker-popover/types.ts @@ -2,13 +2,17 @@ import { TetherPlacement } from 'baseui/layer'; import { CalendarProps } from 'baseui/datepicker'; import { SupportedLocale } from '@timechimp/timechimp-typescript-helpers'; import { DatepickerRangeTranslations } from '../datepicker'; +import { Option } from '../select'; -export interface DatepickerPopoverProps extends CalendarProps { +export type DatepickerOption = Option; + +export interface DatepickerPopoverProps extends Omit { date?: Date | Date[]; placement?: TetherPlacement; isOpen: boolean; - setIsOpen: (isOpen: boolean) => any; + setIsOpen: (isOpen: boolean) => void; locale?: SupportedLocale; weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined; translations?: DatepickerRangeTranslations; + onChange: (date: Date | Date[]) => void; } diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx index 217e1cde1..9d816e7af 100755 --- a/src/components/select/Select.stories.tsx +++ b/src/components/select/Select.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; -import { MultiSelect as Select } from './multi-select'; +import { Select } from './multi-select'; import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select'; import { OPTIONS } from './test-data'; import { SelectProps } from './multi-select/types'; @@ -18,7 +18,9 @@ Template.parameters = { }, }; -const SingleSelectTemplate: Story> = (args) => ; +const SingleSelectTemplate: Story> = (args) => ( + +); export const Single = SingleSelectTemplate.bind({}); Single.args = { diff --git a/src/components/select/Select.test.tsx b/src/components/select/Select.test.tsx index 9cf29e68b..6ebb9e70e 100755 --- a/src/components/select/Select.test.tsx +++ b/src/components/select/Select.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; import * as React from 'react'; import { configure, render, screen } from '../../utils/test-utils'; -import { MultiSelect as Select } from '.'; +import { Select } from './multi-select'; import { OPTIONS } from './test-data'; const SKELETON_TEST_ID = 'loader'; diff --git a/src/components/select/index.ts b/src/components/select/index.ts index 2ffb14d4a..a20781b74 100755 --- a/src/components/select/index.ts +++ b/src/components/select/index.ts @@ -1,4 +1,4 @@ -export { MultiSelect } from './multi-select/MultiSelect'; +export { Select } from './multi-select/MultiSelect'; export type { Value, OnChangeParams } from './multi-select/MultiSelect'; export * from './multi-select/types'; export * from './single-select'; diff --git a/src/components/select/multi-select/MultiSelect.tsx b/src/components/select/multi-select/MultiSelect.tsx index 83c6a98f7..060c8a3d1 100755 --- a/src/components/select/multi-select/MultiSelect.tsx +++ b/src/components/select/multi-select/MultiSelect.tsx @@ -16,7 +16,7 @@ import { CaretDownIcon } from '../../icons/caret-down'; import { SelectProps } from './types'; import { DEFAULT_LABEL_KEY, DEFAULT_VALUE_KEY } from '../single-select'; -export const MultiSelect = ({ +export const Select = ({ size = 'compact', valueKey = DEFAULT_VALUE_KEY, labelKey = DEFAULT_LABEL_KEY, @@ -73,7 +73,6 @@ export const MultiSelect = ({ labelKey={labelKey} disabled={disabled || isLoading} error={error} - multi type="select" options={alphabetizeOptions(options, disableSortOptions)} {...rest} diff --git a/src/components/select/multi-select/types.ts b/src/components/select/multi-select/types.ts index 1ca0cf735..6007b7ea1 100644 --- a/src/components/select/multi-select/types.ts +++ b/src/components/select/multi-select/types.ts @@ -10,4 +10,6 @@ export interface SelectProps extends Omit { rootProps?: () => object; }; success?: boolean; + // @deprecated In a future (V10) release, this will be removed in favor of the separation of single and multi select + multi?: boolean; } diff --git a/src/components/select/single-select/SingleSelect.tsx b/src/components/select/single-select/SingleSelect.tsx index 602c4cd18..606e685db 100644 --- a/src/components/select/single-select/SingleSelect.tsx +++ b/src/components/select/single-select/SingleSelect.tsx @@ -16,9 +16,10 @@ import { SingleSelectProps, Option } from './types'; export const DEFAULT_VALUE_KEY = 'id'; export const DEFAULT_LABEL_KEY = 'name'; -export const SingleSelect = ({ +export const SingleSelect = ({ valueKey, labelKey, + defaultValue, showSkeleton = false, disableSortOptions = false, options, @@ -33,7 +34,7 @@ export const SingleSelect = ({ placeholder, createText = (inputValue: string) => `Create ${inputValue}`, onCreateOption, -}: SingleSelectProps) => { +}: SingleSelectProps) => { const { theme: { current: { @@ -50,7 +51,7 @@ export const SingleSelect = ({ const { primary100, contentPrimary, primaryB } = colors; const { dark4 } = customColors; - const alphabetizeOptions = (options: Option[], disableSortOptions?: boolean) => { + const alphabetizeOptions = (options: Option[], disableSortOptions?: boolean) => { if (!options) { return []; } @@ -65,22 +66,23 @@ export const SingleSelect = ({ const alphabetizedOptions = alphabetizeOptions(options, disableSortOptions); - const props: SelectProps, false> = { + const props: SelectProps, false> = { onChange, + defaultValue, options: alphabetizedOptions, placeholder, isClearable: clearable, isSearchable: searchable, isDisabled: disabled || isLoading, isLoading, - getOptionLabel: (option: Option) => { + getOptionLabel: (option: Option) => { if (option.__isNew__) { return createText(option.value); } return option[labelKey ?? DEFAULT_LABEL_KEY]; }, - getOptionValue: (option: Option) => option[valueKey ?? DEFAULT_VALUE_KEY], + getOptionValue: (option: Option) => option[valueKey ?? DEFAULT_VALUE_KEY], styles: { control: (provided, { isFocused }) => ({ ...provided, diff --git a/src/components/select/single-select/types.ts b/src/components/select/single-select/types.ts index 4a5ef3350..9aa5a81b7 100644 --- a/src/components/select/single-select/types.ts +++ b/src/components/select/single-select/types.ts @@ -1,4 +1,4 @@ -export type Option = { +export type Option = { [key in ValueKey]: T; } & { [key in LabelKey]: string; @@ -6,7 +6,7 @@ export type Option { +export interface SingleSelectProps { valueKey?: ValueKey; labelKey?: LabelKey; showSkeleton?: boolean; @@ -18,6 +18,7 @@ export interface SingleSelectProps | null) => void; + defaultValue?: Option | null; placeholder?: string; error?: boolean; success?: boolean; From 7fa126a11289660dfe296bcb62340dda3a2a6e33 Mon Sep 17 00:00:00 2001 From: Hidde Ottens Date: Wed, 12 Jul 2023 15:54:55 +0200 Subject: [PATCH 5/7] chore: add deprecated select component --- src/components/datepicker-popover/types.ts | 2 +- src/components/select/Select.tsx | 272 ++++++++++++++++++ src/components/select/index.ts | 9 +- .../select/multi-select/MultiSelect.tsx | 7 +- src/components/select/multi-select/types.ts | 4 +- src/components/select/types.ts | 21 ++ 6 files changed, 305 insertions(+), 10 deletions(-) create mode 100644 src/components/select/Select.tsx create mode 100644 src/components/select/types.ts diff --git a/src/components/datepicker-popover/types.ts b/src/components/datepicker-popover/types.ts index d442e4aa9..20645109f 100644 --- a/src/components/datepicker-popover/types.ts +++ b/src/components/datepicker-popover/types.ts @@ -2,7 +2,7 @@ import { TetherPlacement } from 'baseui/layer'; import { CalendarProps } from 'baseui/datepicker'; import { SupportedLocale } from '@timechimp/timechimp-typescript-helpers'; import { DatepickerRangeTranslations } from '../datepicker'; -import { Option } from '../select'; +import { SingleSelectOption as Option } from '../select'; export type DatepickerOption = Option; diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx new file mode 100644 index 000000000..f71e810eb --- /dev/null +++ b/src/components/select/Select.tsx @@ -0,0 +1,272 @@ +import React from 'react'; +import { Select as BaseSelect, Option, Value, OnChangeParams } from 'baseui/select'; +import { useTheme } from '../../providers'; +import { + border, + borderBottom, + borderRadius, + getInputBorderColor, + getInputBackgroundColor, + padding, + margin, +} from '../../utils'; +import { Skeleton } from '../skeleton'; +import { FlexItem } from '../flex-item'; +import { CaretDownIcon } from '../icons/caret-down'; +import { SelectProps } from './types'; +import { AddLineIcon } from '../icons'; +import { Button } from '../button'; +import { ButtonKind } from '../../models'; + +/** + * @deprecated This component will be removed in the next major release (v10). Please use the `MultiSelect` or the `SingleSelect` components instead. + */ +export const Select = ({ + size = 'compact', + valueKey = 'id', + labelKey = 'name', + showSkeleton = false, + propOverrides, + onChangeHandler, + multi, + options, + success = false, + disableSortOptions = false, + disabled = false, + error = false, + stickyButtonText, + stickyButtonOnClick, + ...rest +}: SelectProps) => { + const { + theme: { + current: { + colors, + borders, + customColors, + sizing: { scale0, scale100, scale300, scale600, scale700, scale950 }, + customSizing: { scale975 }, + typography: { ParagraphSmall }, + }, + }, + } = useTheme(); + const { border300, radius200 } = borders; + const { primary100, contentPrimary } = colors; + const { primarySubtle, dark4 } = customColors; + + const handleOnChange = (params: OnChangeParams) => { + if (multi) { + return onChangeHandler(params); + } + const { value } = params; + return onChangeHandler({ ...params, value: value?.length === 1 ? value[0] : value }); + }; + + const alphabetizeOptions = (options: Option[] | { [key: string]: Option[] }, disableSortOptions?: boolean) => { + if (!options) { + return []; + } + if (disableSortOptions) { + return options; + } + if (!Array.isArray(options)) { + return Object.entries(options).reduce((acc, [key, value]) => ({ + ...acc, + [key]: value.length > 1 ? [...value].sort((a, b) => a[labelKey]?.localeCompare(b[labelKey])) : value, + })) as Option[]; + } + return options.length > 1 ? [...options].sort((a, b) => a[labelKey]?.localeCompare(b[labelKey])) : options; + }; + + const showStickButton = stickyButtonText && stickyButtonOnClick; + + return ( + <> + {showSkeleton ? ( + + ) : ( + ({ + backgroundColor: getInputBackgroundColor({ disabled, customColors, colors }), + ...borderRadius(radius200), + ...border({ + ...border300, + borderColor: getInputBorderColor({ + error: $error, + success, + isFocused: $isFocused, + customColors, + colors, + }), + }), + ':hover': { + ...border({ + ...border300, + borderColor: getInputBorderColor({ + error: $error, + success, + isFocused: $isFocused, + customColors, + colors, + hover: true, + disabled, + }), + }), + }, + }), + props: { + ...propOverrides?.rootProps?.apply(propOverrides), + }, + }, + Placeholder: { + style: { + ...ParagraphSmall, + color: dark4, + ...margin('0', '0', '0', `-${scale0}`), + }, + }, + DropdownContainer: { + ...(showStickButton && { + props: ({ children, ...rest }) => ({ + ...rest, + children: ( + <> + {children} + + + + + ), + }), + }), + }, + Input: { + style: { + ...ParagraphSmall, + '::placeholder': { + color: customColors.dark4, + }, + }, + }, + ValueContainer: { + style: { + ...ParagraphSmall, + ...padding('0', scale600), + gap: scale300, + }, + }, + Dropdown: { + style: { + ...padding('0'), + ...borderRadius(radius200), + maxHeight: '300px', + boxShadow: 'none', + }, + }, + DropdownListItem: { + style: { + ...borderBottom(border300), + ...ParagraphSmall, + ':hover': { + backgroundColor: primary100, + }, + }, + props: { + ...propOverrides?.dropdownListItemProps?.apply(propOverrides), + }, + }, + SelectArrow: { + component: () => ( + + + + ), + }, + ClearIcon: { + style: { + width: scale700, + height: scale700, + }, + }, + LoadingIndicator: { + props: { + overrides: { + Svg: { + style: { + width: scale700, + height: scale700, + }, + }, + }, + }, + }, + Popover: { + props: { + overrides: { + Body: { + style: { + zIndex: 99999, + }, + }, + }, + }, + }, + Tag: { + props: { + overrides: { + Root: { + style: { + backgroundColor: primarySubtle, + ...borderRadius(radius200), + ...margin('0'), + }, + }, + Text: { + style: { + ...ParagraphSmall, + color: contentPrimary, + }, + }, + Action: { + style: { + color: '#4A4A4A', // NOTE: property does not exist in theme + }, + }, + }, + }, + }, + SingleValue: { + style: { + lineHeight: scale950, + }, + }, + }} + /> + )} + + ); +}; + +export type { Option, Value, OnChangeParams }; diff --git a/src/components/select/index.ts b/src/components/select/index.ts index a20781b74..1587c46ea 100755 --- a/src/components/select/index.ts +++ b/src/components/select/index.ts @@ -1,4 +1,7 @@ -export { Select } from './multi-select/MultiSelect'; -export type { Value, OnChangeParams } from './multi-select/MultiSelect'; +export { MultiSelect } from './multi-select/MultiSelect'; +export type { Value, OnChangeParams, Option } from './multi-select/MultiSelect'; export * from './multi-select/types'; -export * from './single-select'; +export * from './single-select/SingleSelect'; +export { Option as SingleSelectOption } from './single-select/types'; +export * from './Select'; +export * from './types'; diff --git a/src/components/select/multi-select/MultiSelect.tsx b/src/components/select/multi-select/MultiSelect.tsx index 060c8a3d1..a0d526d54 100755 --- a/src/components/select/multi-select/MultiSelect.tsx +++ b/src/components/select/multi-select/MultiSelect.tsx @@ -13,10 +13,10 @@ import { import { Skeleton } from '../../skeleton'; import { FlexItem } from '../../flex-item'; import { CaretDownIcon } from '../../icons/caret-down'; -import { SelectProps } from './types'; +import { MultiSelectProps } from './types'; import { DEFAULT_LABEL_KEY, DEFAULT_VALUE_KEY } from '../single-select'; -export const Select = ({ +export const MultiSelect = ({ size = 'compact', valueKey = DEFAULT_VALUE_KEY, labelKey = DEFAULT_LABEL_KEY, @@ -29,7 +29,7 @@ export const Select = ({ error = false, isLoading = false, ...rest -}: SelectProps) => { +}: MultiSelectProps) => { const { theme: { current: { @@ -75,6 +75,7 @@ export const Select = ({ error={error} type="select" options={alphabetizeOptions(options, disableSortOptions)} + multi {...rest} overrides={{ ControlContainer: { diff --git a/src/components/select/multi-select/types.ts b/src/components/select/multi-select/types.ts index 6007b7ea1..0c81010cd 100644 --- a/src/components/select/multi-select/types.ts +++ b/src/components/select/multi-select/types.ts @@ -2,7 +2,7 @@ import { SelectProps as BaseSelectProps } from 'baseui/select'; type OmittedProps = 'type' | 'multi'; -export interface SelectProps extends Omit { +export interface MultiSelectProps extends Omit { showSkeleton?: boolean; disableSortOptions?: boolean; propOverrides?: { @@ -10,6 +10,4 @@ export interface SelectProps extends Omit { rootProps?: () => object; }; success?: boolean; - // @deprecated In a future (V10) release, this will be removed in favor of the separation of single and multi select - multi?: boolean; } diff --git a/src/components/select/types.ts b/src/components/select/types.ts new file mode 100644 index 000000000..2d86e0434 --- /dev/null +++ b/src/components/select/types.ts @@ -0,0 +1,21 @@ +import { Option, SelectProps as BaseSelectProps } from 'baseui/select'; + +interface CustomParams { + value: any; + option: Option | undefined | null; + type?: any; +} + +export interface SelectProps extends Omit { + showSkeleton?: boolean; + disableSortOptions?: boolean; + options: Option[] | { [key: string]: Option[] }; + onChangeHandler: (params: CustomParams) => void; + propOverrides?: { + dropdownListItemProps?: () => object; + rootProps?: () => object; + }; + success?: boolean; + stickyButtonText?: string; + stickyButtonOnClick?: () => void; +} From 479101bb8a5b8cb6743a709f244c21da538d6b78 Mon Sep 17 00:00:00 2001 From: Hidde Ottens Date: Fri, 14 Jul 2023 13:32:11 +0200 Subject: [PATCH 6/7] fix: minor single select issues --- package-lock.json | 4 +- package.json | 2 +- src/components/modal/Modal.stories.tsx | 11 ++++- src/components/select/Select.stories.tsx | 6 +-- .../select/single-select/SingleSelect.tsx | 27 ++++++++++-- src/components/select/single-select/types.ts | 1 + src/components/select/test-data.ts | 42 +++++++++++++++++++ 7 files changed, 82 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index e488c3253..a51b682ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@timechimp/tacugama", - "version": "9.0.0", + "version": "9.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@timechimp/tacugama", - "version": "9.0.0", + "version": "9.0.1", "license": "MIT", "dependencies": { "@ag-grid-community/client-side-row-model": "25.0.1", diff --git a/package.json b/package.json index 7f152d575..40ff82c87 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "9.0.0", + "version": "9.0.1", "license": "MIT", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/components/modal/Modal.stories.tsx b/src/components/modal/Modal.stories.tsx index e8b0cc352..a4468018e 100755 --- a/src/components/modal/Modal.stories.tsx +++ b/src/components/modal/Modal.stories.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; import { Modal, ModalHeader, ModalBody, ModalFooter, ModalProps, ModalSize } from './'; -import { Button } from 'components'; -import { ButtonKind, ButtonType } from 'models'; +import { Button, MultiSelect, SingleSelect } from '../'; +import { ButtonKind } from '../../models'; export default { title: 'Components/Modal', @@ -26,6 +26,13 @@ const Template: Story = (args) => ( Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus. + diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx index 9d816e7af..237572899 100755 --- a/src/components/select/Select.stories.tsx +++ b/src/components/select/Select.stories.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; -import { Select } from './multi-select'; +import { MultiSelect } from './multi-select'; import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select'; import { OPTIONS } from './test-data'; -import { SelectProps } from './multi-select/types'; +import { MultiSelectProps } from './multi-select/types'; export default { title: 'Components/Select', } as Meta; -const Template: Story = (args) => } + <> + {creatable ? ( + + ) : ( +