diff --git a/package-lock.json b/package-lock.json index f30a6b82cb6..063f4bcfde9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7788,39 +7788,6 @@ "@leafygreen-ui/leafygreen-provider": "^4.0.2" } }, - "node_modules/@leafygreen-ui/select": { - "version": "14.0.2", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-14.0.2.tgz", - "integrity": "sha512-9SQFkyyXG0x0p5x64yTacVxVUSaRqepHGmJRJqlr0cAeAxJ1S9CT3Cj+V9rMWTbIUlZ6Tgma4WWGt4cav3LZNQ==", - "license": "Apache-2.0", - "dependencies": { - "@leafygreen-ui/button": "^22.0.2", - "@leafygreen-ui/emotion": "^4.0.9", - "@leafygreen-ui/form-field": "^2.0.2", - "@leafygreen-ui/hooks": "^8.3.4", - "@leafygreen-ui/icon": "^13.1.2", - "@leafygreen-ui/input-option": "^3.0.2", - "@leafygreen-ui/lib": "^14.0.2", - "@leafygreen-ui/palette": "^4.1.3", - "@leafygreen-ui/popover": "^13.0.2", - "@leafygreen-ui/tokens": "^2.11.3", - "@leafygreen-ui/typography": "^20.0.2", - "@lg-tools/test-harnesses": "^0.1.4", - "@types/react-is": "^18.0.0", - "lodash": "^4.17.21", - "polished": "^4.1.3", - "react-is": "^18.0.1" - }, - "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^4.0.2" - } - }, - "node_modules/@leafygreen-ui/select/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", - "license": "MIT" - }, "node_modules/@leafygreen-ui/skeleton-loader": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/@leafygreen-ui/skeleton-loader/-/skeleton-loader-2.0.11.tgz", @@ -48749,7 +48716,7 @@ "@leafygreen-ui/radio-group": "^12.0.2", "@leafygreen-ui/search-input": "^5.0.2", "@leafygreen-ui/segmented-control": "^10.0.2", - "@leafygreen-ui/select": "^14.0.2", + "@leafygreen-ui/select": "^16.2.0", "@leafygreen-ui/skeleton-loader": "^2.0.11", "@leafygreen-ui/split-button": "^4.1.5", "@leafygreen-ui/table": "^13.0.1", @@ -49105,6 +49072,216 @@ "polished": "^4.2.2" } }, + "packages/compass-components/node_modules/@leafygreen-ui/ripple": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-2.0.6.tgz", + "integrity": "sha512-8c9FRWsxn+Y1g8m/DB6DQ2Mpzrfe3EP7bmEZLcTYfM0t8tR+0bcUsReW38kqfTDBW2upqDMURgq/fDHPPEo/Bw==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/tokens": "^3.2.4" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-16.2.0.tgz", + "integrity": "sha512-QzSKrFHvZ0NlVGeX+XKq5msGaho4UHOA76ZOshyA9X6OHqn2nfCgdhgi5si8E7oSQ6e9+Z55xZJtVGBbKrdWFw==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/button": "^25.1.1", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/form-field": "^4.0.5", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/input-option": "^4.1.1", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/popover": "^14.2.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4", + "@lg-tools/test-harnesses": "^0.3.4", + "@types/react-is": "^18.0.0", + "lodash": "^4.17.21", + "polished": "^4.1.3", + "react-is": "^18.0.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/a11y": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/a11y/-/a11y-3.0.5.tgz", + "integrity": "sha512-HJqDsLCNj4d1RQiifYuhpazZVYgsLZJeEboaQ+UsNhAppV13kdPb2qX7H4RbGmXkalTBzHOkbAYp6vvioSAVdQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.3", + "@leafygreen-ui/hooks": "^9.1.4", + "@leafygreen-ui/lib": "^15.4.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/button": { + "version": "25.1.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/button/-/button-25.1.1.tgz", + "integrity": "sha512-/Nf/cs6Wqy/lLWlCsoAS8i2AfGtYTbQCD5WLRclZUxj+FbFe2OiWjOhqYnasN/GDFv8oBj8gORj6ZSRJn49yDA==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/ripple": "^2.0.6", + "@leafygreen-ui/tokens": "^3.2.4", + "@lg-tools/test-harnesses": "^0.3.4", + "polished": "^4.2.2" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/emotion": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.4.tgz", + "integrity": "sha512-ZNdWq9gK3PGjSKTVDWuF/RVPOo1i3OGv+5XAoCTwidvdMl5B1jBy+ZM4XeFtVJ6IB6n9hFjKVDMSbj9j7VD/pw==", + "license": "Apache-2.0", + "dependencies": { + "@emotion/css": "^11.1.3", + "@emotion/server": "^11.4.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/form-field": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.5.tgz", + "integrity": "sha512-Rdw33xUMIOXniNojZqoWrMTUiyKtGsZZLPgiow7y8kbyNl/6YHrvrKw1qmzecBFcpmak17xZa2gF/JAzRDpeNA==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/hooks": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.2.1.tgz", + "integrity": "sha512-yFJu5RITboWYJh5x9iVdumkPlSuNEY8PQcockO+6lOExldER4Yoqfp8MSLN5X2uPEwMmrxL/xwfZnEKUtEmW3g==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/tokens": "^3.2.4", + "lodash": "^4.17.21" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/input-option": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/input-option/-/input-option-4.1.1.tgz", + "integrity": "sha512-zEHmbF5e/QhgZYlS1NKlPw+q8rzaB162iF9QbA5VnKbCX+gyRwWjHoUnFPYA4fJ/7MWglEn/EBQmRotIb/9o6A==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/a11y": "^3.0.5", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/lib": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz", + "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==", + "license": "Apache-2.0", + "dependencies": { + "lodash": "^4.17.21" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/palette": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.2.tgz", + "integrity": "sha512-+PrfGeJSv4goxm/vKpfJJDOP7t/uElj+14K8jiIyu3qR3TcFRIZ5h1VMvICTUgqvRc8W+xIZYQwsLa2XCu2lvw==", + "license": "Apache-2.0" + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/polymorphic": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-3.1.0.tgz", + "integrity": "sha512-5fbXD6ExTmMScvODuipfB1Ti/Dvoaxxg+daSftqXfNQlEkEnd5cPnezOOl1LMsu2xUoZT6NXsFgukZYsmXEVpQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/lib": "^15.4.0", + "lodash": "^4.17.21" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/popover": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-14.2.0.tgz", + "integrity": "sha512-AiW6WTastN7fYAxP1t7jaoB9I46ky3lJ4KmYfs6KZ6WdgFrdMkWuKdEeoBYb/VYNwhW+dXma6tUJ7uT4Rt3TiA==", + "license": "Apache-2.0", + "dependencies": { + "@floating-ui/react": "^0.26.28", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/portal": "^7.1.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@types/react-transition-group": "^4.4.5", + "lodash": "^4.17.21", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/portal": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-7.1.0.tgz", + "integrity": "sha512-wCldB70m/NtlIeVRxi5S/U74W6jxQScqptI2I4+7RweBquBfxIg1SipHXqMC+Zo3aL+s/fCMuFKNlLuwGWu8MA==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/hooks": "^9.2.0", + "@leafygreen-ui/lib": "^15.6.1" + }, + "peerDependencies": { + "react-dom": "^17.0.0 || ^18.0.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@leafygreen-ui/typography": { + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.1.4.tgz", + "integrity": "sha512-evGgcjOUxjJ0zbEVYeQphzPw7A3n8I0vyUDgylKhDvlMAbUJXwLoJWOFcYTxCU9WrcE4fBsd8O8q/6J2Go4xCQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/tokens": "^3.2.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": ">=3.2.0" + } + }, + "packages/compass-components/node_modules/@leafygreen-ui/select/node_modules/@lg-tools/test-harnesses": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@lg-tools/test-harnesses/-/test-harnesses-0.3.4.tgz", + "integrity": "sha512-JfJj2LSMe5vTSDQoLxWUHx2r4wUgKqU1UrgqjvNYM7iebXE0JCE7RvLiEg5SnsRO8xXQbEMjgISErmCDR4DS7Q==", + "license": "Apache-2.0", + "dependencies": { + "@testing-library/dom": "9.3.1" + } + }, "packages/compass-components/node_modules/@leafygreen-ui/table": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-13.0.1.tgz", @@ -49395,6 +49572,81 @@ "react": "^17.0.0 || ^18.0.0" } }, + "packages/compass-components/node_modules/@testing-library/dom": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", + "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=14" + } + }, + "packages/compass-components/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "packages/compass-components/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "packages/compass-components/node_modules/aria-query": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "license": "Apache-2.0", + "dependencies": { + "deep-equal": "^2.0.5" + } + }, + "packages/compass-components/node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "packages/compass-components/node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "license": "MIT" + }, + "packages/compass-components/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "packages/compass-components/node_modules/sinon": { "version": "9.2.4", "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", @@ -60710,36 +60962,6 @@ "polished": "^4.2.2" } }, - "@leafygreen-ui/select": { - "version": "14.0.2", - "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-14.0.2.tgz", - "integrity": "sha512-9SQFkyyXG0x0p5x64yTacVxVUSaRqepHGmJRJqlr0cAeAxJ1S9CT3Cj+V9rMWTbIUlZ6Tgma4WWGt4cav3LZNQ==", - "requires": { - "@leafygreen-ui/button": "^22.0.2", - "@leafygreen-ui/emotion": "^4.0.9", - "@leafygreen-ui/form-field": "^2.0.2", - "@leafygreen-ui/hooks": "^8.3.4", - "@leafygreen-ui/icon": "^14.6.0", - "@leafygreen-ui/input-option": "^3.0.4", - "@leafygreen-ui/lib": "^15.3.0", - "@leafygreen-ui/palette": "^4.1.3", - "@leafygreen-ui/popover": "^13.0.11", - "@leafygreen-ui/tokens": "^3.2.4", - "@leafygreen-ui/typography": "^20.0.2", - "@lg-tools/test-harnesses": "^0.1.4", - "@types/react-is": "^18.0.0", - "lodash": "^4.17.21", - "polished": "^4.1.3", - "react-is": "^18.0.1" - }, - "dependencies": { - "react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" - } - } - }, "@leafygreen-ui/skeleton-loader": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/@leafygreen-ui/skeleton-loader/-/skeleton-loader-2.0.11.tgz", @@ -63385,7 +63607,7 @@ "@leafygreen-ui/radio-group": "^12.0.2", "@leafygreen-ui/search-input": "^5.0.2", "@leafygreen-ui/segmented-control": "^10.0.2", - "@leafygreen-ui/select": "^14.0.2", + "@leafygreen-ui/select": "^16.2.0", "@leafygreen-ui/skeleton-loader": "^2.0.11", "@leafygreen-ui/split-button": "^4.1.5", "@leafygreen-ui/table": "^13.0.1", @@ -63692,6 +63914,179 @@ } } }, + "@leafygreen-ui/ripple": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-2.0.6.tgz", + "integrity": "sha512-8c9FRWsxn+Y1g8m/DB6DQ2Mpzrfe3EP7bmEZLcTYfM0t8tR+0bcUsReW38kqfTDBW2upqDMURgq/fDHPPEo/Bw==", + "requires": { + "@leafygreen-ui/tokens": "^3.2.4" + } + }, + "@leafygreen-ui/select": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-16.2.0.tgz", + "integrity": "sha512-QzSKrFHvZ0NlVGeX+XKq5msGaho4UHOA76ZOshyA9X6OHqn2nfCgdhgi5si8E7oSQ6e9+Z55xZJtVGBbKrdWFw==", + "requires": { + "@leafygreen-ui/button": "^25.1.1", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/form-field": "^4.0.5", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/input-option": "^4.1.1", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/popover": "^14.2.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4", + "@lg-tools/test-harnesses": "^0.3.4", + "@types/react-is": "^18.0.0", + "lodash": "^4.17.21", + "polished": "^4.1.3", + "react-is": "^18.0.1" + }, + "dependencies": { + "@leafygreen-ui/a11y": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/a11y/-/a11y-3.0.5.tgz", + "integrity": "sha512-HJqDsLCNj4d1RQiifYuhpazZVYgsLZJeEboaQ+UsNhAppV13kdPb2qX7H4RbGmXkalTBzHOkbAYp6vvioSAVdQ==", + "requires": { + "@leafygreen-ui/emotion": "^5.0.3", + "@leafygreen-ui/hooks": "^9.1.4", + "@leafygreen-ui/lib": "^15.4.0" + } + }, + "@leafygreen-ui/button": { + "version": "25.1.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/button/-/button-25.1.1.tgz", + "integrity": "sha512-/Nf/cs6Wqy/lLWlCsoAS8i2AfGtYTbQCD5WLRclZUxj+FbFe2OiWjOhqYnasN/GDFv8oBj8gORj6ZSRJn49yDA==", + "requires": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/ripple": "^2.0.6", + "@leafygreen-ui/tokens": "^3.2.4", + "@lg-tools/test-harnesses": "^0.3.4", + "polished": "^4.2.2" + } + }, + "@leafygreen-ui/emotion": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.4.tgz", + "integrity": "sha512-ZNdWq9gK3PGjSKTVDWuF/RVPOo1i3OGv+5XAoCTwidvdMl5B1jBy+ZM4XeFtVJ6IB6n9hFjKVDMSbj9j7VD/pw==", + "requires": { + "@emotion/css": "^11.1.3", + "@emotion/server": "^11.4.0" + } + }, + "@leafygreen-ui/form-field": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/form-field/-/form-field-4.0.5.tgz", + "integrity": "sha512-Rdw33xUMIOXniNojZqoWrMTUiyKtGsZZLPgiow7y8kbyNl/6YHrvrKw1qmzecBFcpmak17xZa2gF/JAzRDpeNA==", + "requires": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4" + } + }, + "@leafygreen-ui/hooks": { + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.2.1.tgz", + "integrity": "sha512-yFJu5RITboWYJh5x9iVdumkPlSuNEY8PQcockO+6lOExldER4Yoqfp8MSLN5X2uPEwMmrxL/xwfZnEKUtEmW3g==", + "requires": { + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/tokens": "^3.2.4", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/input-option": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/input-option/-/input-option-4.1.1.tgz", + "integrity": "sha512-zEHmbF5e/QhgZYlS1NKlPw+q8rzaB162iF9QbA5VnKbCX+gyRwWjHoUnFPYA4fJ/7MWglEn/EBQmRotIb/9o6A==", + "requires": { + "@leafygreen-ui/a11y": "^3.0.5", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.4" + } + }, + "@leafygreen-ui/lib": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz", + "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==", + "requires": { + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/palette": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.2.tgz", + "integrity": "sha512-+PrfGeJSv4goxm/vKpfJJDOP7t/uElj+14K8jiIyu3qR3TcFRIZ5h1VMvICTUgqvRc8W+xIZYQwsLa2XCu2lvw==" + }, + "@leafygreen-ui/polymorphic": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-3.1.0.tgz", + "integrity": "sha512-5fbXD6ExTmMScvODuipfB1Ti/Dvoaxxg+daSftqXfNQlEkEnd5cPnezOOl1LMsu2xUoZT6NXsFgukZYsmXEVpQ==", + "requires": { + "@leafygreen-ui/lib": "^15.4.0", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/popover": { + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-14.2.0.tgz", + "integrity": "sha512-AiW6WTastN7fYAxP1t7jaoB9I46ky3lJ4KmYfs6KZ6WdgFrdMkWuKdEeoBYb/VYNwhW+dXma6tUJ7uT4Rt3TiA==", + "requires": { + "@floating-ui/react": "^0.26.28", + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/hooks": "^9.2.1", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/portal": "^7.1.0", + "@leafygreen-ui/tokens": "^3.2.4", + "@types/react-transition-group": "^4.4.5", + "lodash": "^4.17.21", + "react-transition-group": "^4.4.5" + } + }, + "@leafygreen-ui/portal": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-7.1.0.tgz", + "integrity": "sha512-wCldB70m/NtlIeVRxi5S/U74W6jxQScqptI2I4+7RweBquBfxIg1SipHXqMC+Zo3aL+s/fCMuFKNlLuwGWu8MA==", + "requires": { + "@leafygreen-ui/hooks": "^9.2.0", + "@leafygreen-ui/lib": "^15.6.1" + } + }, + "@leafygreen-ui/typography": { + "version": "22.1.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.1.4.tgz", + "integrity": "sha512-evGgcjOUxjJ0zbEVYeQphzPw7A3n8I0vyUDgylKhDvlMAbUJXwLoJWOFcYTxCU9WrcE4fBsd8O8q/6J2Go4xCQ==", + "requires": { + "@leafygreen-ui/emotion": "^5.0.4", + "@leafygreen-ui/icon": "^14.6.0", + "@leafygreen-ui/lib": "^15.6.2", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.1.0", + "@leafygreen-ui/tokens": "^3.2.4" + } + }, + "@lg-tools/test-harnesses": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@lg-tools/test-harnesses/-/test-harnesses-0.3.4.tgz", + "integrity": "sha512-JfJj2LSMe5vTSDQoLxWUHx2r4wUgKqU1UrgqjvNYM7iebXE0JCE7RvLiEg5SnsRO8xXQbEMjgISErmCDR4DS7Q==", + "requires": { + "@testing-library/dom": "9.3.1" + } + } + } + }, "@leafygreen-ui/table": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-13.0.1.tgz", @@ -63938,6 +64333,61 @@ } } }, + "@testing-library/dom": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz", + "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + } + }, + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==" + }, + "aria-query": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "requires": { + "deep-equal": "^2.0.5" + } + }, + "pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "requires": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } + } + }, + "react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "sinon": { "version": "9.2.4", "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json index 934c709f2d9..ec6763b429a 100644 --- a/packages/compass-components/package.json +++ b/packages/compass-components/package.json @@ -69,7 +69,7 @@ "@leafygreen-ui/radio-group": "^12.0.2", "@leafygreen-ui/search-input": "^5.0.2", "@leafygreen-ui/segmented-control": "^10.0.2", - "@leafygreen-ui/select": "^14.0.2", + "@leafygreen-ui/select": "^16.2.0", "@leafygreen-ui/skeleton-loader": "^2.0.11", "@leafygreen-ui/split-button": "^4.1.5", "@leafygreen-ui/table": "^13.0.1", diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx index 3e490889ea2..0faa9bb207e 100644 --- a/packages/compass-crud/src/components/crud-toolbar.spec.tsx +++ b/packages/compass-crud/src/components/crud-toolbar.spec.tsx @@ -482,8 +482,8 @@ describe('CrudToolbar Component', function () { describe('documents per page select', function () { it('should render a select to update documents fetched per page', function () { renderCrudToolbar(); - expect(screen.getByLabelText('Update number of documents per page')).to.be - .visible; + expect(screen.getByLabelText(/Update number of documents per page/i)).to + .be.visible; }); it('should call updateDocumentsPerPage when select value changes', function () { @@ -492,7 +492,7 @@ describe('CrudToolbar Component', function () { updateMaxDocumentsPerPage: stub, }); userEvent.click( - screen.getByLabelText('Update number of documents per page') + screen.getByLabelText(/Update number of documents per page/i) ); userEvent.click(screen.getByText('75')); expect(stub).to.be.calledWithExactly(75); diff --git a/packages/compass-crud/src/components/table-view/types-dropdown.tsx b/packages/compass-crud/src/components/table-view/types-dropdown.tsx index 307613a193d..0ac28f9157b 100644 --- a/packages/compass-crud/src/components/table-view/types-dropdown.tsx +++ b/packages/compass-crud/src/components/table-view/types-dropdown.tsx @@ -32,9 +32,6 @@ const TypesDropdown: React.FunctionComponent = ({ onChange={handleTypeChange} allowDeselect={false} value={element.currentType} - readOnly={false} - // NOTE: Leafygreen doesn't support aria-label and only understand "aria-labelledby" and "label" instead - aria-labelledby="" aria-label="Field type" className={cx(selectStyles, 'table-view-cell-editor-types')} data-testid="table-view-types-dropdown-select" diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx index 6f5a148bc55..ce6f94bc66c 100644 --- a/packages/compass-data-modeling/src/components/diagram-editor.tsx +++ b/packages/compass-data-modeling/src/components/diagram-editor.tsx @@ -23,6 +23,7 @@ import { deleteRelationship, removeField, renameField, + changeFieldType, } from '../store/diagram'; import type { EdgeProps, @@ -56,6 +57,7 @@ import { relationshipToDiagramEdge, } from '../utils/nodes-and-edges'; import toNS from 'mongodb-ns'; +import { FIELD_TYPES } from '../utils/field-types'; const loadingContainerStyles = css({ width: '100%', @@ -162,6 +164,11 @@ const DiagramContent: React.FunctionComponent<{ fieldPath: FieldPath, newName: string ) => void; + onChangeFieldType: (data: { + ns: string; + fieldPath: FieldPath; + newTypes: string[]; + }) => void; onDiagramBackgroundClicked: () => void; onDeleteCollection: (ns: string) => void; onDeleteRelationship: (rId: string) => void; @@ -190,6 +197,7 @@ const DiagramContent: React.FunctionComponent<{ onRelationshipSelect, onFieldSelect, onRenameField, + onChangeFieldType, onDiagramBackgroundClicked, onCreateNewRelationship, onRelationshipDrawn, @@ -367,6 +375,17 @@ const DiagramContent: React.FunctionComponent<{ [onAddFieldToObjectField] ); + const onFieldTypeChange = useCallback( + (ns: string, fieldPath: FieldPath, newTypes: string[]) => { + onChangeFieldType({ + ns, + fieldPath, + newTypes, + }); + }, + [onChangeFieldType] + ); + const deleteItem = useCallback(() => { switch (selectedItems?.type) { case 'collection': @@ -406,8 +425,10 @@ const DiagramContent: React.FunctionComponent<{ onEdgeClick, onFieldClick, onFieldNameChange: onRenameField, + onFieldTypeChange, onNodeDragStop, onConnect, + fieldTypes: FIELD_TYPES, } satisfies DiagramProps), [ isDarkMode, @@ -421,6 +442,7 @@ const DiagramContent: React.FunctionComponent<{ onEdgeClick, onFieldClick, onRenameField, + onFieldTypeChange, onNodeDragStop, onConnect, ] @@ -485,6 +507,7 @@ const ConnectedDiagramContent = connect( onRelationshipSelect: selectRelationship, onFieldSelect: selectField, onRenameField: renameField, + onChangeFieldType: changeFieldType, onDiagramBackgroundClicked: selectBackground, onCreateNewRelationship: createNewRelationship, onDeleteCollection: deleteCollection, diff --git a/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx index 6f4b8533468..c3cdb357711 100644 --- a/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx +++ b/packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx @@ -9,7 +9,6 @@ import { ComboboxOption, TextInput, } from '@mongodb-js/compass-components'; -import { BSONType } from 'mongodb'; import { changeFieldType, createNewRelationship, @@ -33,6 +32,7 @@ import { isIdField, isRelationshipOfAField, } from '../../utils/utils'; +import { FIELD_TYPES } from '../../utils/field-types'; type FieldDrawerContentProps = { namespace: string; @@ -57,18 +57,14 @@ type FieldDrawerContentProps = { onChangeFieldType: ({ ns, fieldPath, - oldTypes, newTypes, }: { ns: string; fieldPath: FieldPath; - oldTypes: string[]; newTypes: string[]; }) => void; }; -const BSON_TYPES = Object.keys(BSONType); - export function getIsFieldNameValid( currentFieldPath: FieldPath, existingFields: FieldPath[], @@ -158,7 +154,6 @@ const FieldDrawerContent: React.FunctionComponent = ({ onChangeFieldType({ ns: namespace, fieldPath, - oldTypes: fieldTypes, newTypes, }); }; @@ -195,7 +190,7 @@ const FieldDrawerContent: React.FunctionComponent = ({ state={fieldTypeEditErrorMessage ? 'error' : undefined} errorMessage={fieldTypeEditErrorMessage} > - {BSON_TYPES.map((type) => ( + {FIELD_TYPES.map((type) => ( ))} diff --git a/packages/compass-data-modeling/src/store/diagram.ts b/packages/compass-data-modeling/src/store/diagram.ts index 9a1f99697d1..f0f685c4eb1 100644 --- a/packages/compass-data-modeling/src/store/diagram.ts +++ b/packages/compass-data-modeling/src/store/diagram.ts @@ -821,12 +821,10 @@ export function getTypeNameForTelemetry( export function changeFieldType({ ns, fieldPath, - oldTypes, newTypes, }: { ns: string; fieldPath: FieldPath; - oldTypes: string[]; newTypes: string[]; }): DataModelingThunkAction { return (dispatch, getState, { track }) => { @@ -838,6 +836,7 @@ export function changeFieldType({ jsonSchema: collectionSchema, fieldPath: fieldPath, }); + const oldTypes = field?.fieldTypes; if (!field) throw new Error('Field not found in schema'); const to = getSchemaWithNewTypes(field.jsonSchema, newTypes); diff --git a/packages/compass-data-modeling/src/utils/field-types.ts b/packages/compass-data-modeling/src/utils/field-types.ts new file mode 100644 index 00000000000..da23ba5deca --- /dev/null +++ b/packages/compass-data-modeling/src/utils/field-types.ts @@ -0,0 +1,3 @@ +import { BSONType } from 'mongodb'; + +export const FIELD_TYPES = Object.keys(BSONType); diff --git a/packages/compass-import-export/src/components/import-options.tsx b/packages/compass-import-export/src/components/import-options.tsx index 40a167da3c8..ce03287a26f 100644 --- a/packages/compass-import-export/src/components/import-options.tsx +++ b/packages/compass-import-export/src/components/import-options.tsx @@ -116,7 +116,6 @@ function ImportOptions({ ({