diff --git a/package-lock.json b/package-lock.json index 1db759b6476..4b45440a91a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6797,6 +6797,151 @@ "@leafygreen-ui/leafygreen-provider": "^4.0.7" } }, + "node_modules/@leafygreen-ui/drawer": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.0.3.tgz", + "integrity": "sha512-NK3evBf+mT48lKHb4la3qFP58yYr+w1R75+z/Wl+45J8gg5hc2pFTJvA5lJc64k/iN68KLeUDrsbHp5uHx+yEg==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/button": "^25.0.4", + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/icon": "^14.5.0", + "@leafygreen-ui/icon-button": "^17.0.5", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.0.4", + "@leafygreen-ui/resizable": "^0.1.2", + "@leafygreen-ui/tabs": "^17.0.3", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/toolbar": "^1.0.5", + "@leafygreen-ui/typography": "^22.1.2", + "@lg-tools/test-harnesses": "^0.3.4", + "polished": "^4.2.2", + "react-intersection-observer": "^8.25.1" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/drawer/node_modules/@leafygreen-ui/a11y": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/a11y/-/a11y-3.0.4.tgz", + "integrity": "sha512-kNqPkkVYNs3yj+s3ReFcJEe/JP347Zz9lGAWjNspZ12mPkyr5LUegbDj6Zf6d9ELiDwN5Ht8X7cggWI+KEAMcg==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/lib": "^15.3.0" + } + }, + "node_modules/@leafygreen-ui/drawer/node_modules/@leafygreen-ui/descendants": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-3.0.4.tgz", + "integrity": "sha512-0aPXSgXmnd1NzWha2nQRwZX0qQeb1FgQhIj6eElFAg+E6//b+aaA6lg2v7c6/UoxAOV7YLAgADIw9ehPzq8/tQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/lib": "^15.3.0", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/drawer/node_modules/@leafygreen-ui/tabs": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.3.tgz", + "integrity": "sha512-B5qxfnNRw7QSePXbGbXp+tQceTEoXv4nSr5tCDR8xywhNzqk9mtOoy+TwKbXi1TLGcA7KT1jbrbs7j4Djh38Bg==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/a11y": "^3.0.4", + "@leafygreen-ui/descendants": "^3.0.4", + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/polymorphic": "^3.0.4", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.2", + "@lg-tools/test-harnesses": "^0.3.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, + "node_modules/@leafygreen-ui/drawer/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" + } + }, "node_modules/@leafygreen-ui/emotion": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-4.1.1.tgz", @@ -7142,6 +7287,17 @@ "@leafygreen-ui/leafygreen-provider": "^4.0.2" } }, + "node_modules/@leafygreen-ui/resizable": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/resizable/-/resizable-0.1.2.tgz", + "integrity": "sha512-H7dqgMmwnrx0Ap9s5SQF0ajzWURvNOZIA4zXUgwdiUKgAKeIaLl8zK1W95gDlehDonHOWhAohZlpopOFYklnrg==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2" + } + }, "node_modules/@leafygreen-ui/ripple": { "version": "1.1.15", "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-1.1.15.tgz", @@ -7382,6 +7538,134 @@ "polished": "^4.2.2" } }, + "node_modules/@leafygreen-ui/toolbar": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.0.5.tgz", + "integrity": "sha512-d5MpgAWiq7+huqHGqsJRQNlaCEA/aAdiv3WjO5nQhz70wfQdGbKwnR6+6Rkxj5GT6Rz9lKvNvcNEpKKsEkZjDw==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/descendants": "^3.0.4", + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/icon": "^14.5.0", + "@leafygreen-ui/icon-button": "^17.0.5", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/tooltip": "^14.1.3", + "@lg-tools/test-harnesses": "^0.3.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/toolbar/node_modules/@leafygreen-ui/descendants": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-3.0.4.tgz", + "integrity": "sha512-0aPXSgXmnd1NzWha2nQRwZX0qQeb1FgQhIj6eElFAg+E6//b+aaA6lg2v7c6/UoxAOV7YLAgADIw9ehPzq8/tQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/lib": "^15.3.0", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/toolbar/node_modules/@leafygreen-ui/tooltip": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.1.3.tgz", + "integrity": "sha512-VdRu+lqGrTVAzgaaVFuHhg5sy/f5SgeibC+fLfj6tGjdlUYOJb8TPDcE8aPkiVRDzADYuGAjrj4z2OU3WE4uBQ==", + "license": "Apache-2.0", + "dependencies": { + "@leafygreen-ui/emotion": "^5.0.2", + "@leafygreen-ui/hooks": "^9.1.3", + "@leafygreen-ui/icon": "^14.5.0", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^5.0.2", + "@leafygreen-ui/popover": "^14.0.5", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^22.1.2", + "lodash": "^4.17.21", + "polished": "^4.2.2" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^5.0.4" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, + "node_modules/@leafygreen-ui/toolbar/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" + } + }, "node_modules/@leafygreen-ui/tooltip": { "version": "13.0.13", "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-13.0.13.tgz", @@ -47965,7 +48249,7 @@ "@leafygreen-ui/combobox": "^11.0.2", "@leafygreen-ui/confirmation-modal": "^6.0.2", "@leafygreen-ui/copyable": "^10.0.14", - "@leafygreen-ui/descendants": "^2.1.0", + "@leafygreen-ui/drawer": "^5.0.3", "@leafygreen-ui/emotion": "^4.0.9", "@leafygreen-ui/guide-cue": "^7.0.2", "@leafygreen-ui/hooks": "^8.3.4", @@ -47974,7 +48258,6 @@ "@leafygreen-ui/info-sprinkle": "^4.0.2", "@leafygreen-ui/input-option": "^3.0.12", "@leafygreen-ui/leafygreen-provider": "^4.0.2", - "@leafygreen-ui/lib": "^15.3.0", "@leafygreen-ui/logo": "^10.0.2", "@leafygreen-ui/marketing-modal": "^5.0.2", "@leafygreen-ui/menu": "^29.0.5", @@ -48038,6 +48321,7 @@ }, "devDependencies": { "@emotion/css": "^11.11.2", + "@leafygreen-ui/lib": "^15.3.0", "@mongodb-js/eslint-config-compass": "^1.4.10", "@mongodb-js/mocha-config-compass": "^1.7.1", "@mongodb-js/prettier-config-compass": "^1.2.8", @@ -58751,6 +59035,119 @@ "lodash": "^4.17.21" } }, + "@leafygreen-ui/drawer": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/drawer/-/drawer-5.0.3.tgz", + "integrity": "sha512-NK3evBf+mT48lKHb4la3qFP58yYr+w1R75+z/Wl+45J8gg5hc2pFTJvA5lJc64k/iN68KLeUDrsbHp5uHx+yEg==", + "requires": { + "@leafygreen-ui/button": "^22.0.2", + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/icon": "^13.1.2", + "@leafygreen-ui/icon-button": "^16.0.2", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^4.1.3", + "@leafygreen-ui/polymorphic": "^2.0.5", + "@leafygreen-ui/resizable": "^0.1.2", + "@leafygreen-ui/tabs": "^17.0.3", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/toolbar": "^1.0.5", + "@leafygreen-ui/typography": "^20.0.2", + "@lg-tools/test-harnesses": "^0.3.4", + "polished": "^4.2.2", + "react-intersection-observer": "^8.25.1" + }, + "dependencies": { + "@leafygreen-ui/a11y": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/a11y/-/a11y-3.0.4.tgz", + "integrity": "sha512-kNqPkkVYNs3yj+s3ReFcJEe/JP347Zz9lGAWjNspZ12mPkyr5LUegbDj6Zf6d9ELiDwN5Ht8X7cggWI+KEAMcg==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/lib": "^15.3.0" + } + }, + "@leafygreen-ui/descendants": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-3.0.4.tgz", + "integrity": "sha512-0aPXSgXmnd1NzWha2nQRwZX0qQeb1FgQhIj6eElFAg+E6//b+aaA6lg2v7c6/UoxAOV7YLAgADIw9ehPzq8/tQ==", + "requires": { + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/lib": "^15.3.0", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/tabs": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-17.0.3.tgz", + "integrity": "sha512-B5qxfnNRw7QSePXbGbXp+tQceTEoXv4nSr5tCDR8xywhNzqk9mtOoy+TwKbXi1TLGcA7KT1jbrbs7j4Djh38Bg==", + "requires": { + "@leafygreen-ui/a11y": "^3.0.4", + "@leafygreen-ui/descendants": "^3.0.4", + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^4.1.3", + "@leafygreen-ui/polymorphic": "^2.0.5", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/typography": "^20.0.2", + "@lg-tools/test-harnesses": "^0.3.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" + } + }, + "@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" + } + } + } + }, "@leafygreen-ui/emotion": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-4.1.1.tgz", @@ -59029,6 +59426,16 @@ "@leafygreen-ui/typography": "^20.0.2" } }, + "@leafygreen-ui/resizable": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/resizable/-/resizable-0.1.2.tgz", + "integrity": "sha512-H7dqgMmwnrx0Ap9s5SQF0ajzWURvNOZIA4zXUgwdiUKgAKeIaLl8zK1W95gDlehDonHOWhAohZlpopOFYklnrg==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^4.1.3" + } + }, "@leafygreen-ui/ripple": { "version": "1.1.15", "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-1.1.15.tgz", @@ -59228,6 +59635,103 @@ "polished": "^4.2.2" } }, + "@leafygreen-ui/toolbar": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/toolbar/-/toolbar-1.0.5.tgz", + "integrity": "sha512-d5MpgAWiq7+huqHGqsJRQNlaCEA/aAdiv3WjO5nQhz70wfQdGbKwnR6+6Rkxj5GT6Rz9lKvNvcNEpKKsEkZjDw==", + "requires": { + "@leafygreen-ui/descendants": "^3.0.4", + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/icon": "^13.1.2", + "@leafygreen-ui/icon-button": "^16.0.2", + "@leafygreen-ui/lib": "^15.3.0", + "@leafygreen-ui/palette": "^4.1.3", + "@leafygreen-ui/tokens": "^3.2.4", + "@leafygreen-ui/tooltip": "^14.1.3", + "@lg-tools/test-harnesses": "^0.3.4" + }, + "dependencies": { + "@leafygreen-ui/descendants": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/descendants/-/descendants-3.0.4.tgz", + "integrity": "sha512-0aPXSgXmnd1NzWha2nQRwZX0qQeb1FgQhIj6eElFAg+E6//b+aaA6lg2v7c6/UoxAOV7YLAgADIw9ehPzq8/tQ==", + "requires": { + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/lib": "^15.3.0", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/tooltip": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.1.3.tgz", + "integrity": "sha512-VdRu+lqGrTVAzgaaVFuHhg5sy/f5SgeibC+fLfj6tGjdlUYOJb8TPDcE8aPkiVRDzADYuGAjrj4z2OU3WE4uBQ==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.9", + "@leafygreen-ui/hooks": "^8.3.4", + "@leafygreen-ui/icon": "^13.1.2", + "@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", + "lodash": "^4.17.21", + "polished": "^4.2.2" + } + }, + "@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" + } + }, + "@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" + } + } + } + }, "@leafygreen-ui/tooltip": { "version": "13.0.13", "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-13.0.13.tgz", @@ -61537,7 +62041,7 @@ "@leafygreen-ui/combobox": "^11.0.2", "@leafygreen-ui/confirmation-modal": "^6.0.2", "@leafygreen-ui/copyable": "^10.0.14", - "@leafygreen-ui/descendants": "^2.1.0", + "@leafygreen-ui/drawer": "^5.0.3", "@leafygreen-ui/emotion": "^4.0.9", "@leafygreen-ui/guide-cue": "^7.0.2", "@leafygreen-ui/hooks": "^8.3.4", diff --git a/packages/compass-components/.depcheckrc b/packages/compass-components/.depcheckrc index ecd21cbbf6f..e3317665b88 100644 --- a/packages/compass-components/.depcheckrc +++ b/packages/compass-components/.depcheckrc @@ -2,5 +2,8 @@ ignores: [ '@mongodb-js/prettier-config-compass', '@mongodb-js/tsconfig-compass', '@types/chai-dom', + # making sure all of the leafygreen is using the same version of these core + # dependencies '@emotion/css', + "@leafygreen-ui/lib", ] diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json index b73f5e861c5..a2f8193f779 100644 --- a/packages/compass-components/package.json +++ b/packages/compass-components/package.json @@ -46,7 +46,7 @@ "@leafygreen-ui/combobox": "^11.0.2", "@leafygreen-ui/confirmation-modal": "^6.0.2", "@leafygreen-ui/copyable": "^10.0.14", - "@leafygreen-ui/descendants": "^2.1.0", + "@leafygreen-ui/drawer": "^5.0.3", "@leafygreen-ui/emotion": "^4.0.9", "@leafygreen-ui/guide-cue": "^7.0.2", "@leafygreen-ui/hooks": "^8.3.4", @@ -55,7 +55,6 @@ "@leafygreen-ui/info-sprinkle": "^4.0.2", "@leafygreen-ui/input-option": "^3.0.12", "@leafygreen-ui/leafygreen-provider": "^4.0.2", - "@leafygreen-ui/lib": "^15.3.0", "@leafygreen-ui/logo": "^10.0.2", "@leafygreen-ui/marketing-modal": "^5.0.2", "@leafygreen-ui/menu": "^29.0.5", @@ -119,6 +118,7 @@ }, "devDependencies": { "@emotion/css": "^11.11.2", + "@leafygreen-ui/lib": "^15.3.0", "@mongodb-js/eslint-config-compass": "^1.4.10", "@mongodb-js/mocha-config-compass": "^1.7.1", "@mongodb-js/prettier-config-compass": "^1.2.8", diff --git a/packages/compass-components/src/components/drawer-portal.tsx b/packages/compass-components/src/components/drawer-portal.tsx index 1254ca7fef7..97ed50a6605 100644 --- a/packages/compass-components/src/components/drawer-portal.tsx +++ b/packages/compass-components/src/components/drawer-portal.tsx @@ -7,20 +7,27 @@ import React, { useRef, useState, } from 'react'; - import { DrawerLayout, DisplayMode as DrawerDisplayMode, useDrawerToolbarContext, type DrawerLayoutProps, -} from './drawer'; +} from '@leafygreen-ui/drawer'; import { css, cx } from '@leafygreen-ui/emotion'; import { isEqual } from 'lodash'; import { rafraf } from '../utils/rafraf'; +import { BaseFontSize, fontWeights } from '@leafygreen-ui/tokens'; + +type ToolbarData = Required['toolbarData']; -type SectionData = Required['toolbarData'][number]; +type SectionData = ToolbarData[number]; type DrawerSectionProps = Omit & { + // Title exists in DrawerLayoutProps, but is optional, whereas for us it needs + // to be required (also due to merging of types inside leafygreen, we can't + // convince typescript that our toolbarData is compatible with lg toolbarData + // if that is not explicit) + title: React.ReactNode; /** * If `true` will automatically open the section when first mounted. Default: `false` */ @@ -163,22 +170,19 @@ const drawerLayoutFixesStyles = css({ }, // drawer section - '& > div:nth-child(2)': { - marginTop: -1, // hiding the top border as we already have one in the place where the Anchor is currently rendered + '& > div:nth-child(2) > div': { + // hiding the border border as we already have one in the place where the + // Anchor is currently rendered + borderTop: 'none', + borderBottom: 'none', }, - // We're stretching the title container to all available width so that we can - // layout the controls there better. Doing our best to target the section - // title here, leafygreen really doesn't give us anything else to try. - // - // TODO(ticket): This is obviously a horrible selector and we should make sure - // that LG team provides a better one for us to achieve this behavior when - // we're removing the vendored version of the drawer - '& > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child': + // drawer content > title content + '& > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child': { - flex: 'none', - width: 'calc(100% - 28px)', // disallow going over the title size (100 - close button width) - overflow: 'hidden', + // fix for the flex parent not allowing flex children to collapse if they + // are overflowing the container + minWidth: 0, }, }); @@ -210,13 +214,21 @@ const drawerSectionPortalStyles = css({ height: '100%', }); +// Leafygreen dynamically changes styles of the title group based on whether or +// not title is a `string` or a `ReactNode`, we want it to consistently have +// bold title styles no matter what title you provided, so we wrap it in our own +// container +const drawerTitleGroupStyles = css({ + width: '100%', + fontSize: BaseFontSize.Body2, + fontWeight: fontWeights.bold, +}); + /** * DrawerAnchor component will render the drawer in any place it is rendered. * This component has to wrap any content that Drawer will be shown near */ -export const DrawerAnchor: React.FunctionComponent<{ - displayMode?: DrawerDisplayMode; -}> = ({ displayMode, children }) => { +export const DrawerAnchor: React.FunctionComponent = ({ children }) => { const actions = useContext(DrawerActionsContext); const drawerSectionItems = useContext(DrawerStateContext); const prevDrawerSectionItems = useRef([]); @@ -239,7 +251,13 @@ export const DrawerAnchor: React.FunctionComponent<{ return drawerSectionItems .map((data) => { return { + hasPadding: false, ...data, + title: ( +
+ {data.title} +
+ ), content: (
= ({ children, ...props }) => { - const [portalNode, setPortalNode] = useState(null); + const [portalNode, setPortalNode] = useState(() => { + return querySectionPortal(document, props.id); + }); const actions = useContext(DrawerActionsContext); const prevProps = useRef(); useEffect(() => { @@ -296,14 +326,24 @@ export const DrawerSection: React.FunctionComponent = ({ 'Can not use DrawerSection without DrawerAnchor being mounted on the page' ); } - setPortalNode( - document.querySelector(`[data-drawer-section="${props.id}"]`) - ); + setPortalNode(querySectionPortal(drawerEl, props.id)); const mutationObserver = new MutationObserver((mutations) => { for (const mutation of mutations) { - for (const node of Array.from(mutation.addedNodes) as HTMLElement[]) { - if (node.dataset && node.dataset.drawerSection === props.id) { - setPortalNode(node); + if (mutation.type === 'childList') { + for (const node of Array.from(mutation.addedNodes)) { + // Added node can be either the drawer section portal itself, a + // parent node containing the section (in that case we won't get an + // explicit mutation for the section itself), or something + // completely unrelated, like a text node insert. By searching for + // the section portal from added node parent element we cover all + // these cases in one go + const drawerSectionNode = querySectionPortal( + node.parentElement, + props.id + ); + if (drawerSectionNode) { + setPortalNode(drawerSectionNode); + } } } } @@ -315,7 +355,7 @@ export const DrawerSection: React.FunctionComponent = ({ return () => { mutationObserver.disconnect(); }; - }, [actions, props.id]); + }, [props.id]); useEffect(() => { return () => { actions.current.removeToolbarData(props.id); @@ -333,7 +373,9 @@ export function useDrawerActions() { const actions = useContext(DrawerActionsContext); const stableActions = useRef({ openDrawer: (id: string) => { - actions.current.openDrawer(id); + rafraf(() => { + actions.current.openDrawer(id); + }); }, closeDrawer: () => { actions.current.closeDrawer(); @@ -352,3 +394,5 @@ export const useDrawerState = () => { drawerState.length > 0, }; }; + +export { getLgIds as getDrawerIds } from '@leafygreen-ui/drawer'; diff --git a/packages/compass-components/src/components/drawer/constants.ts b/packages/compass-components/src/components/drawer/constants.ts deleted file mode 100644 index 1986d2aec2b..00000000000 --- a/packages/compass-components/src/components/drawer/constants.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { TOOLBAR_WIDTH } from '../toolbar'; - -export const GRID_AREA = { - drawer: 'drawer', - content: 'content', - toolbar: 'toolbar', - innerDrawer: 'inner-drawer', -}; - -export const PANEL_WIDTH = 432; diff --git a/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.tsx b/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.tsx deleted file mode 100644 index 2c432ea4a72..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { forwardRef } from 'react'; - -import { consoleOnce } from '@leafygreen-ui/lib'; - -import { DisplayMode } from '../drawer/drawer.types'; -import { DrawerToolbarLayout } from '../drawer-toolbar-layout'; -import { LayoutComponent } from '../layout-component'; - -import type { DrawerLayoutProps } from './drawer-layout.types'; - -/** - * `DrawerLayout` is a component that provides a flexible layout for displaying content in a drawer. - * It can be used in both `overlay` and `embedded` modes, with or without a `Toolbar`. - */ -export const DrawerLayout = forwardRef( - ( - { - toolbarData, - children, - displayMode = DisplayMode.Overlay, - isDrawerOpen = false, - ...rest - }: DrawerLayoutProps, - forwardedRef - ) => { - // If there is data, we render the DrawerToolbarLayout. - if (toolbarData) { - return ( - - {children} - - ); - } - - consoleOnce.warn( - 'Using a Drawer without a toolbar is not recommended. To include a toolbar, pass a toolbarData prop containing the desired toolbar items.' - ); - - // If there is no data, we render the LayoutComponent. - // The LayoutComponent will read the displayMode and render the appropriate layout. - return ( - - {children} - - ); - } -); - -DrawerLayout.displayName = 'DrawerLayout'; diff --git a/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.types.ts b/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.types.ts deleted file mode 100644 index ab43ec1e9a5..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-layout/drawer-layout.types.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib'; - -import type { DrawerProps } from '../drawer/drawer.types'; -import type { DrawerToolbarLayoutProps } from '../drawer-toolbar-layout'; -import type { LayoutComponentProps } from '../layout-component'; - -export type PickedDrawerProps = Pick; - -export interface BaseDrawerLayoutProps - extends PickedDrawerProps, - HTMLElementProps<'div'>, - DarkModeProps { - children: React.ReactNode; -} - -export type DrawerLayoutPropsWithoutToolbar = Omit< - LayoutComponentProps, - 'displayMode' | 'isDrawerOpen' -> & { - /** - * An array of data that will be used to render the toolbar items and the drawer content. - */ - toolbarData?: never; - - /** - * Event handler called on close button click. If provided, a close button will be rendered in the Drawer header. - */ - onClose?: never; - - /** - * Determines if the Drawer is open. This is only needed if using the Drawer without a toolbar. This will shift the layout to the right by the width of the drawer if `displayMode` is set to 'embedded'. - */ - isDrawerOpen?: boolean; -} & BaseDrawerLayoutProps; - -export type DrawerLayoutPropsWithToolbar = Omit< - DrawerToolbarLayoutProps, - 'displayMode' -> & { - /** - * Determines if the Drawer is open. This is only needed if using the Drawer without a toolbar. This will shift the layout to the right by the width of the drawer if `displayMode` is set to 'embedded'. - */ - isDrawerOpen?: never; -} & BaseDrawerLayoutProps; - -export type DrawerLayoutProps = - | ({ - toolbarData: DrawerLayoutPropsWithToolbar['toolbarData']; - } & DrawerLayoutPropsWithToolbar) - | ({ toolbarData?: never } & DrawerLayoutPropsWithoutToolbar); diff --git a/packages/compass-components/src/components/drawer/drawer-layout/index.ts b/packages/compass-components/src/components/drawer/drawer-layout/index.ts deleted file mode 100644 index 0103bca5dc2..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-layout/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { DrawerLayout } from './drawer-layout'; -export type { DrawerLayoutProps } from './drawer-layout.types'; diff --git a/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.tsx b/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.tsx deleted file mode 100644 index d617865153f..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { - createContext, - useCallback, - useContext, - useMemo, - useState, -} from 'react'; - -import type { DrawerStackContextType } from './drawer-stack-context.types'; - -export const DrawerStackContext = createContext({ - getDrawerIndex: () => 0, - registerDrawer: () => {}, - unregisterDrawer: () => {}, -}); - -export const DrawerStackProvider = ({ - children, -}: { - children: React.ReactNode; -}) => { - const [stack, setStack] = useState>([]); - - const getDrawerIndex = useCallback( - (id: string) => { - return stack.indexOf(id); - }, - [stack] - ); - - const registerDrawer = useCallback( - (id: string) => { - setStack((prev) => { - if (prev.includes(id)) return prev; - return [...prev, id]; - }); - }, - [setStack] - ); - - const unregisterDrawer = useCallback( - (id: string) => { - setStack((prev) => { - if (!prev.includes(id)) return prev; - return prev.filter((item) => item !== id); - }); - }, - [setStack] - ); - - const value = useMemo( - () => ({ getDrawerIndex, registerDrawer, unregisterDrawer }), - [getDrawerIndex, registerDrawer, unregisterDrawer] - ); - - return ( - - {children} - - ); -}; - -export const useDrawerStackContext = () => { - const context = useContext(DrawerStackContext); - - return context; -}; diff --git a/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.types.ts b/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.types.ts deleted file mode 100644 index 851cbac53ce..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-stack-context/drawer-stack-context.types.ts +++ /dev/null @@ -1,22 +0,0 @@ -export interface DrawerStackContextType { - /** - * Returns the index of a drawer instance in the drawer stack - * @param id - The id of the drawer instance to get the index of - * @returns The index of the drawer instance in the stack - */ - getDrawerIndex: (id: string) => number; - - /** - * Registers a drawer instance in the drawer stack - * @param id - The id of the drawer instance to register - * @returns void - */ - registerDrawer: (id: string) => void; - - /** - * Unregisters a drawer instance from the drawer stack - * @param id - The id of the drawer instance to unregister - * @returns void - */ - unregisterDrawer: (id: string) => void; -} diff --git a/packages/compass-components/src/components/drawer/drawer-stack-context/index.ts b/packages/compass-components/src/components/drawer/drawer-stack-context/index.ts deleted file mode 100644 index d4b114d53d0..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-stack-context/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - DrawerStackContext, - DrawerStackProvider, - useDrawerStackContext, -} from './drawer-stack-context'; -export { type DrawerStackContextType } from './drawer-stack-context.types'; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.tsx b/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.tsx deleted file mode 100644 index 5460c06af23..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { - createContext, - useCallback, - useContext, - useMemo, - useState, -} from 'react'; - -import { drawerTransitionDuration } from '../drawer/drawer.styles'; - -import type { - ContextData, - DataId, - DrawerToolbarContextType, - DrawerToolbarProviderProps, -} from './drawer-toolbar-context.types'; - -export const DrawerToolbarContext = - createContext(null); - -export const DrawerToolbarProvider = ({ - children, - data, -}: DrawerToolbarProviderProps) => { - const [content, setContent] = useState(undefined); - const [isDrawerOpen, setIsDrawerOpen] = useState(false); - - const openDrawer = useCallback( - (id: DataId) => { - const activeDrawerContent = data.find( - (item) => item?.id === id && item?.content - ); - - if (activeDrawerContent) { - setIsDrawerOpen(true); - setContent((prev) => { - if (prev?.id === id) return prev; - return activeDrawerContent; - }); - } else { - // eslint-disable-next-line no-console - console.error( - `No matching item found in the toolbar for the provided id: ${id}. Please verify that the id is correct.` - ); - } - }, - [setContent, data, setIsDrawerOpen] - ); - - const closeDrawer = useCallback(() => { - // Delay the removal of the content to allow the drawer to close before removing the content - setTimeout(() => { - setContent(undefined); - }, drawerTransitionDuration); - setIsDrawerOpen(false); - }, [setContent]); - - const getActiveDrawerContent = useCallback(() => { - return content; - }, [content]); - - const value = useMemo( - () => ({ - openDrawer, - closeDrawer, - getActiveDrawerContent, - isDrawerOpen, - }), - [openDrawer, closeDrawer, getActiveDrawerContent, isDrawerOpen] - ); - - return ( - - {children} - - ); -}; - -export const useDrawerToolbarContext = () => { - const context = useContext(DrawerToolbarContext); - - if (!context) { - throw new Error( - 'useDrawerToolbarContext must be used within a DrawerToolbarProvider' - ); - } - - return context; -}; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.ts b/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.ts deleted file mode 100644 index 2c86db2b0ee..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-context/drawer-toolbar-context.types.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { LayoutData } from '../drawer-toolbar-layout'; - -export type ContextData = LayoutData | undefined; - -export type DataId = LayoutData['id']; - -export interface DrawerToolbarContextType { - /** - * This function is used to open the drawer with the given data. - * @param id - The id of the drawer to open - * @returns void - */ - openDrawer: (id: DataId) => void; - - /** - * This function is used to clear the active drawer data and indicates that the drawer should close. - * @returns void - */ - closeDrawer: () => void; - - /** - * Indicates whether the drawer should be closed. Used to manage transition states. - * For example, during close animations, content should remain until the transition completes. - */ - isDrawerOpen: boolean; - - /** - * This function is used to get the active drawer content. - * @returns The active drawer data - */ - getActiveDrawerContent: () => ContextData; -} - -export interface DrawerToolbarProviderProps { - /** - * The children of the provider - */ - children: React.ReactNode; - - /** - * The data to be used in the drawer - */ - data: Array; -} diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-context/index.ts b/packages/compass-components/src/components/drawer/drawer-toolbar-context/index.ts deleted file mode 100644 index 5a779369eda..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-context/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - DrawerToolbarProvider, - useDrawerToolbarContext, -} from './drawer-toolbar-context'; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx deleted file mode 100644 index 5835483fc54..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { forwardRef } from 'react'; - -import { Toolbar, ToolbarIconButton } from '../../toolbar'; - -import { Drawer } from '../drawer/drawer'; -import { DisplayMode } from '../drawer/drawer.types'; -import { useDrawerToolbarContext } from '../drawer-toolbar-context'; -import { DrawerWithToolbarWrapper } from '../drawer-with-toolbar-wrapper'; -import { LayoutComponent } from '../layout-component'; -import { DEFAULT_LGID_ROOT, getLgIds } from '../utils'; - -import { contentStyles } from './drawer-toolbar-layout.styles'; -import type { - DrawerToolbarLayoutContainerProps, - LayoutData, -} from './drawer-toolbar-layout.types'; - -/** - * @internal - * - * DrawerToolbarLayoutContainer is a component that provides a layout for displaying content in a drawer with a toolbar. - * It manages the state of the drawer and toolbar, and renders the appropriate components based on the display mode. - */ -export const DrawerToolbarLayoutContainer = forwardRef< - HTMLDivElement, - DrawerToolbarLayoutContainerProps ->( - ( - { - children, - displayMode = DisplayMode.Overlay, - toolbarData, - onClose, - // darkMode: darkModeProp, - 'data-lgid': dataLgId = DEFAULT_LGID_ROOT, - ...rest - }: DrawerToolbarLayoutContainerProps, - forwardRef - ) => { - const { - openDrawer, - closeDrawer, - getActiveDrawerContent, - isDrawerOpen: _isDrawerOpen, - } = useDrawerToolbarContext(); - const { id } = getActiveDrawerContent() || {}; - const lgIds = getLgIds(dataLgId); - const hasData = toolbarData && toolbarData.length > 0; - const { title, content } = - toolbarData.find((data) => { - return data.id === id; - }) ?? {}; - - const handleOnClose = (event: React.MouseEvent) => { - onClose?.(event); - closeDrawer(); - }; - - const handleIconClick = ( - event: React.MouseEvent, - id: LayoutData['id'], - onClick?: (event: React.MouseEvent) => void - ) => { - onClick?.(event); - openDrawer(id); - }; - - const isDrawerOpen = Boolean(title && content && _isDrawerOpen); - - return ( - -
{children}
- - - {toolbarData?.map((toolbarItem) => ( - ) => { - if (!toolbarItem.content) { - // If the toolbar item does not have content, we don't want to open/update/close the drawer - // but we still want to call the onClick function if it exists. E.g. open a modal or perform an action - toolbarItem.onClick?.(event); - return; - } - - return handleIconClick( - event, - toolbarItem.id, - toolbarItem.onClick - ); - }} - active={toolbarItem.id === id} - disabled={toolbarItem.disabled} - /> - ))} - - - {content} - - - - ); - } -); - -DrawerToolbarLayoutContainer.displayName = 'DrawerToolbarLayoutContainer'; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.ts b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.ts deleted file mode 100644 index cf0b93d8ba5..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from '@leafygreen-ui/emotion'; - -import { GRID_AREA } from '../constants'; - -export const contentStyles = css` - grid-area: ${GRID_AREA.content}; - overflow: scroll; - height: inherit; -`; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.tsx b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.tsx deleted file mode 100644 index 9ac6b2919db..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { forwardRef } from 'react'; - -import { DrawerToolbarProvider } from '../drawer-toolbar-context'; - -import type { DrawerToolbarLayoutProps } from './drawer-toolbar-layout.types'; -import { DrawerToolbarLayoutContainer } from './drawer-toolbar-layout-container'; - -/** - * @internal - * - * DrawerToolbarLayout is a component that provides a layout for displaying content in a drawer with a toolbar. - */ -export const DrawerToolbarLayout = forwardRef< - HTMLDivElement, - DrawerToolbarLayoutProps ->( - ( - { children, toolbarData, ...rest }: DrawerToolbarLayoutProps, - forwardRef - ) => { - return ( - - - {children} - - - ); - } -); - -DrawerToolbarLayout.displayName = 'DrawerToolbarLayout'; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.ts b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.ts deleted file mode 100644 index 119d3fa3025..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout.types.ts +++ /dev/null @@ -1,58 +0,0 @@ -import type React from 'react'; - -import type { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib'; -import type { ToolbarIconButtonProps } from '../../toolbar'; - -import type { DrawerProps } from '../drawer/drawer.types'; - -type PickedOptionalDrawerProps = Pick; -type PickedRequiredToolbarIconButtonProps = Pick< - ToolbarIconButtonProps, - 'glyph' | 'label' | 'onClick' | 'disabled' ->; - -interface LayoutBase extends PickedRequiredToolbarIconButtonProps { - /** - * The id of the layout. This is used to open the drawer. - */ - id: string; -} - -interface LayoutWithContent extends LayoutBase { - /** - * The title of the drawer. This is not required if the toolbar item should not open a drawer. - */ - title: React.ReactNode; - - /** - * The content of the drawer. This is not required if the toolbar item should not open a drawer. - */ - content: React.ReactNode; -} - -interface LayoutWithoutContent extends LayoutBase { - /** - * The title of the drawer. This is not required if the toolbar item should not open a drawer. - */ - title?: never; - - /** - * The content of the drawer. This is not required if the toolbar item should not open a drawer. - */ - content?: never; -} - -export type LayoutData = LayoutWithContent | LayoutWithoutContent; - -export type DrawerToolbarLayoutProps = PickedOptionalDrawerProps & - DarkModeProps & - LgIdProps & { - /** - * An array of data that will be used to render the toolbar items and the drawer content. - */ - toolbarData: Array; - className?: string; - children: React.ReactNode; - }; - -export type DrawerToolbarLayoutContainerProps = DrawerToolbarLayoutProps; diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/index.ts b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/index.ts deleted file mode 100644 index a516e650db3..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { DrawerToolbarLayout } from './drawer-toolbar-layout'; -export type { - DrawerToolbarLayoutProps, - LayoutData, -} from './drawer-toolbar-layout.types'; diff --git a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.ts b/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.ts deleted file mode 100644 index d0ca13c9405..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.styles.ts +++ /dev/null @@ -1,171 +0,0 @@ -import { css, cx, keyframes } from '@leafygreen-ui/emotion'; -import type { Theme } from '@leafygreen-ui/lib'; -import { addOverflowShadow, breakpoints, Side } from '@leafygreen-ui/tokens'; -import { toolbarClassName } from '../../toolbar'; - -import { GRID_AREA } from '../constants'; -import { PANEL_WIDTH, TOOLBAR_WIDTH } from '../constants'; -import { - drawerClassName, - drawerTransitionDuration, -} from '../drawer/drawer.styles'; -import { DisplayMode } from '../drawer/drawer.types'; - -const MOBILE_BREAKPOINT = breakpoints.Tablet; -const SHADOW_WIDTH = 36; // Width of the shadow padding on the left side - -const drawerIn = keyframes` - from { - // Because of .show() and .close() in the drawer component, transitioning from 0px to (x)px does not transition correctly. Using 1px along with css animations is a workaround to get the animation to work. - grid-template-columns: ${TOOLBAR_WIDTH}px 1px; - } - to { - grid-template-columns: ${TOOLBAR_WIDTH}px ${PANEL_WIDTH}px; - } -`; - -const drawerOut = keyframes` - from { - grid-template-columns: ${TOOLBAR_WIDTH}px ${PANEL_WIDTH}px; - } - to { - grid-template-columns: ${TOOLBAR_WIDTH}px 0px; - } -`; - -const drawerOutMobile = keyframes` - from { - grid-template-columns: ${TOOLBAR_WIDTH}px calc(100vw - ${ - TOOLBAR_WIDTH * 2 -}px); - } - to { - grid-template-columns: ${TOOLBAR_WIDTH}px 0px; - } -`; - -const drawerInMobile = keyframes` - from { - grid-template-columns: ${TOOLBAR_WIDTH}px 1px; - } - to { - grid-template-columns: ${TOOLBAR_WIDTH}px calc(100vw - ${ - TOOLBAR_WIDTH * 2 -}px); - } -`; - -// This animation is used to animate the padding of the drawer when it closes, so that the padding does not block the content underneath it. -const drawerPaddingOut = keyframes` - 0% { - padding-left: ${SHADOW_WIDTH}px; - } - 99% { - padding-left: ${SHADOW_WIDTH}px; - } - 100% { - padding-left: 0px; - } -`; - -const openStyles = css` - animation-name: ${drawerIn}; - animation-fill-mode: forwards; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - animation-name: ${drawerInMobile}; - } -`; - -const closedStyles = css` - animation-name: ${drawerOut}; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - animation-name: ${drawerOutMobile}; - } -`; - -const getDrawerShadowStyles = ({ theme }: { theme: Theme }) => css` - ${addOverflowShadow({ isInside: false, side: Side.Left, theme })}; - - // Need this to show the box shadow since we are using overflow: hidden - padding-left: ${SHADOW_WIDTH}px; - - &::before { - transition-property: opacity; - transition-duration: ${drawerTransitionDuration}ms; - transition-timing-function: ease-in-out; - opacity: 1; - left: ${SHADOW_WIDTH}px; - } -`; - -const baseStyles = css` - display: grid; - grid-template-columns: ${TOOLBAR_WIDTH}px 0px; - grid-template-areas: '${GRID_AREA.toolbar} ${GRID_AREA.innerDrawer}'; - grid-area: ${GRID_AREA.drawer}; - justify-self: end; - animation-timing-function: ease-in-out; - animation-duration: ${drawerTransitionDuration}ms; - z-index: 0; - height: 100%; - overflow: hidden; - - .${toolbarClassName} { - grid-area: ${GRID_AREA.toolbar}; - } - - .${drawerClassName} { - grid-area: ${GRID_AREA.innerDrawer}; - position: unset; - transition: none; - transform: unset; - overflow: hidden; - opacity: 1; - border-left: 0; - border-right: 0; - height: 100%; - animation: none; - - > div::before { - box-shadow: unset; - } - } -`; - -const closedDrawerShadowStyles = css` - padding-left: 0; - animation-name: ${drawerPaddingOut}; - animation-timing-function: ease-in-out; - animation-duration: ${drawerTransitionDuration}ms; - - ::before { - opacity: 0; - } -`; - -export const getDrawerWithToolbarWrapperStyles = ({ - className, - isDrawerOpen, - shouldAnimate, - displayMode, - theme, -}: { - className?: string; - isDrawerOpen: boolean; - shouldAnimate?: boolean; - displayMode: DisplayMode; - theme: Theme; -}) => - cx( - baseStyles, - { - [getDrawerShadowStyles({ theme })]: displayMode === DisplayMode.Overlay, - [closedDrawerShadowStyles]: - displayMode === DisplayMode.Overlay && !isDrawerOpen, - [openStyles]: isDrawerOpen, - [closedStyles]: !isDrawerOpen && shouldAnimate, // This ensures that the drawer does not animate closed on initial render - }, - className - ); diff --git a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.tsx b/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.tsx deleted file mode 100644 index 0cc7f62f05c..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { forwardRef, useEffect, useState } from 'react'; - -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; - -import { getDrawerWithToolbarWrapperStyles } from './drawer-with-toolbar-wrapper.styles'; -import type { DrawerWithToolbarWrapperProps } from './drawer-with-toolbar-wrapper.types'; - -/** - * @internal - * - * This layout wrapper is used to position the toolbar and drawer together. When the drawer is open, the toolbar and drawer will shift to the right. - * - * If the drawer is overlay, a box shadow will be applied to the left side of this component. - */ -export const DrawerWithToolbarWrapper = forwardRef< - HTMLDivElement, - DrawerWithToolbarWrapperProps ->( - ( - { - children, - className, - isDrawerOpen, - displayMode, - }: DrawerWithToolbarWrapperProps, - forwardedRef - ) => { - const { theme } = useDarkMode(); - const [shouldAnimate, setShouldAnimate] = useState(false); - - useEffect(() => { - if (isDrawerOpen) setShouldAnimate(true); - }, [isDrawerOpen]); - - return ( -
- {children} -
- ); - } -); - -DrawerWithToolbarWrapper.displayName = 'DrawerWithToolbarWrapper'; diff --git a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.types.ts b/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.types.ts deleted file mode 100644 index a57b93e09d9..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/drawer-with-toolbar-wrapper.types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { HTMLElementProps } from '@leafygreen-ui/lib'; - -import type { DrawerProps } from '../drawer/drawer.types'; - -type PickedDrawerProps = Required>; - -export interface DrawerWithToolbarWrapperProps - extends HTMLElementProps<'div'>, - PickedDrawerProps { - /** - * Determines if the Drawer instance is open or closed - */ - isDrawerOpen: boolean; -} diff --git a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/index.ts b/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/index.ts deleted file mode 100644 index cd903c21869..00000000000 --- a/packages/compass-components/src/components/drawer/drawer-with-toolbar-wrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DrawerWithToolbarWrapper } from './drawer-with-toolbar-wrapper'; diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.constants.ts b/packages/compass-components/src/components/drawer/drawer/drawer.constants.ts deleted file mode 100644 index 67db13f77d9..00000000000 --- a/packages/compass-components/src/components/drawer/drawer/drawer.constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const HEADER_HEIGHT = 48; -export const MOBILE_BREAKPOINT = 390; diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts b/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts deleted file mode 100644 index 471bd2b1304..00000000000 --- a/packages/compass-components/src/components/drawer/drawer/drawer.styles.ts +++ /dev/null @@ -1,265 +0,0 @@ -import { css, cx, keyframes } from '@leafygreen-ui/emotion'; -import { createUniqueClassName, type Theme } from '@leafygreen-ui/lib'; -import { - addOverflowShadow, - color, - Side, - spacing, - transitionDuration, -} from '@leafygreen-ui/tokens'; - -import { PANEL_WIDTH } from '../constants'; - -import { HEADER_HEIGHT, MOBILE_BREAKPOINT } from './drawer.constants'; -import { DisplayMode } from './drawer.types'; - -export const drawerTransitionDuration = transitionDuration.slower; - -export const drawerClassName = createUniqueClassName('lg-drawer'); - -// Because of .show() and .close() in the drawer component, transitioning from 0px to (x)px does not transition correctly. Having the drawer start at the open position while hidden, moving to the closed position, and then animating to the open position is a workaround to get the animation to work. -// These styles are used for a standalone drawer in overlay mode since it is not part of a grid layout. -const drawerIn = keyframes` - 0% { - transform: translate3d(0%, 0, 0); - opacity: 0; - visibility: hidden; - } - 1% { - transform: translate3d(100%, 0, 0); - opacity: 1; - visibility: visible; - } - 100% { - transform: translate3d(0%, 0, 0); - } -`; - -// Keep the drawer opacity at 1 until the end of the animation. The inner container opacity is transitioned separately. -const drawerOut = keyframes` - 0% { - transform: translate3d(0%, 0, 0); - } - 99% { - transform: translate3d(100%, 0, 0); - opacity: 1; - } - 100% { - opacity: 0; - visibility: hidden; - } -`; - -const getBaseStyles = ({ theme }: { theme: Theme }) => css` - all: unset; - background-color: ${color[theme].background.primary.default}; - border: 1px solid ${color[theme].border.secondary.default}; - max-width: ${PANEL_WIDTH}px; - height: 100%; - overflow: hidden; - box-sizing: border-box; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - max-width: 100%; - height: 50vh; - } -`; - -const overlayOpenStyles = css` - opacity: 1; - animation-name: ${drawerIn}; - - // On mobile, the drawer should be positioned at the bottom of the screen when closed, and slide up to the top when opened. - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - transform: none; - } -`; - -const overlayClosedStyles = css` - pointer-events: none; - animation-name: ${drawerOut}; - - // On mobile, the drawer should be positioned at the bottom of the screen when closed, and slide up to the top when opened. - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - transform: translate3d(0, 100%, 0); - opacity: 0; - } -`; - -const getOverlayStyles = ({ - open, - shouldAnimate, - zIndex, -}: { - open: boolean; - shouldAnimate: boolean; - zIndex: number; -}) => - cx( - css` - position: absolute; - z-index: ${zIndex}; - top: 0; - bottom: 0; - right: 0; - overflow: visible; - - // By default, the drawer is positioned off-screen to the right. - transform: translate3d(100%, 0, 0); - animation-timing-function: ease-in-out; - animation-duration: ${drawerTransitionDuration}ms; - animation-fill-mode: forwards; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - top: unset; - left: 0; - // Since the drawer has position: fixed, we can use normal transitions - animation: none; - position: fixed; - transform: translate3d(0, 100%, 0); - transition: transform ${drawerTransitionDuration}ms ease-in-out, - opacity ${drawerTransitionDuration}ms ease-in-out - ${open ? '0ms' : `${drawerTransitionDuration}ms`}; - } - `, - { - [overlayOpenStyles]: open, - [overlayClosedStyles]: !open && shouldAnimate, // This ensures that the drawer does not animate closed on initial render - } - ); - -const getDisplayModeStyles = ({ - displayMode, - open, - shouldAnimate, - zIndex, -}: { - displayMode: DisplayMode; - open: boolean; - shouldAnimate: boolean; - zIndex: number; -}) => - cx({ - [getOverlayStyles({ open, shouldAnimate, zIndex })]: - displayMode === DisplayMode.Overlay, - }); - -export const getDrawerStyles = ({ - className, - displayMode, - open, - shouldAnimate, - theme, - zIndex, -}: { - className?: string; - displayMode: DisplayMode; - open: boolean; - shouldAnimate: boolean; - theme: Theme; - zIndex: number; -}) => - cx( - getBaseStyles({ theme }), - getDisplayModeStyles({ displayMode, open, shouldAnimate, zIndex }), - className, - drawerClassName - ); - -export const getDrawerShadowStyles = ({ - theme, - displayMode, -}: { - theme: Theme; - displayMode: DisplayMode; -}) => - cx( - css` - height: 100%; - background-color: ${color[theme].background.primary.default}; - `, - { - [css` - ${addOverflowShadow({ isInside: false, side: Side.Left, theme })}; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - ${addOverflowShadow({ isInside: false, side: Side.Top, theme })}; - } - `]: displayMode === DisplayMode.Overlay, - } - ); - -const getBaseInnerContainerStyles = ({ theme }: { theme: Theme }) => css` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - background-color: ${color[theme].background.primary.default}; - opacity: 0; - transition-property: opacity; - transition-duration: ${transitionDuration.faster}ms; - transition-timing-function: linear; -`; - -const getInnerOpenContainerStyles = css` - transition-property: opacity; - transition-duration: ${transitionDuration.slowest}ms; - transition-timing-function: linear; - opacity: 1; - width: ${PANEL_WIDTH}px; -`; - -export const getInnerContainerStyles = ({ - theme, - open, -}: { - theme: Theme; - open: boolean; -}) => - cx(getBaseInnerContainerStyles({ theme }), { - [getInnerOpenContainerStyles]: open, - }); - -export const getHeaderStyles = ({ theme }: { theme: Theme }) => css` - height: ${HEADER_HEIGHT}px; - padding: ${spacing[400]}px; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid ${color[theme].border.secondary.default}; - transition-property: box-shadow; - transition-duration: ${transitionDuration.faster}ms; - transition-timing-function: ease-in-out; -`; - -const baseChildrenContainerStyles = css` - height: 100%; - overflow: hidden; -`; - -export const getChildrenContainerStyles = ({ - hasShadowTop, - theme, -}: { - hasShadowTop: boolean; - theme: Theme; -}) => - cx(baseChildrenContainerStyles, { - [addOverflowShadow({ isInside: true, side: Side.Top, theme })]: - hasShadowTop, - }); - -const baseInnerChildrenContainerStyles = css` - height: 100%; -`; - -const scrollContainerStyles = css` - padding: ${spacing[400]}px; - overflow-y: auto; - overscroll-behavior: contain; -`; - -export const innerChildrenContainerStyles = cx( - baseInnerChildrenContainerStyles, - scrollContainerStyles -); diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.tsx b/packages/compass-components/src/components/drawer/drawer/drawer.tsx deleted file mode 100644 index 98fdf1a85a0..00000000000 --- a/packages/compass-components/src/components/drawer/drawer/drawer.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React, { forwardRef, useEffect, useRef, useState } from 'react'; -import { useInView } from 'react-intersection-observer'; - -import { - useIdAllocator, - useIsomorphicLayoutEffect, - useMergeRefs, -} from '@leafygreen-ui/hooks'; -import IconButton from '@leafygreen-ui/icon-button'; -import LeafyGreenProvider, { - useDarkMode, -} from '@leafygreen-ui/leafygreen-provider'; -import { usePolymorphic } from '@leafygreen-ui/polymorphic'; -import { BaseFontSize } from '@leafygreen-ui/tokens'; -import { Body } from '@leafygreen-ui/typography'; - -import { useDrawerStackContext } from '../drawer-stack-context'; -import { getLgIds } from '../utils'; - -import { - drawerTransitionDuration, - getChildrenContainerStyles, - getDrawerShadowStyles, - getDrawerStyles, - getHeaderStyles, - getInnerContainerStyles, - innerChildrenContainerStyles, -} from './drawer.styles'; -import { DisplayMode, type DrawerProps } from './drawer.types'; -import { Icon } from '../../leafygreen'; -import { css, cx } from '@leafygreen-ui/emotion'; - -const noPaddingFixesStyles = css({ - padding: 0, -}); - -export const Drawer = forwardRef( - ( - { - children, - className, - 'data-lgid': dataLgId, - displayMode = DisplayMode.Overlay, - id: idProp, - onClose, - open = false, - title, - hasPadding = true, - ...rest - }, - fwdRef - ) => { - const { darkMode, theme } = useDarkMode(); - const { Component } = usePolymorphic<'dialog' | 'div'>( - displayMode === DisplayMode.Overlay ? 'dialog' : 'div' - ); - const { getDrawerIndex, registerDrawer, unregisterDrawer } = - useDrawerStackContext(); - const [shouldAnimate, setShouldAnimate] = useState(false); - const ref = useRef(null); - const drawerRef = useMergeRefs([fwdRef, ref]); - - const lgIds = getLgIds(dataLgId); - const id = useIdAllocator({ prefix: 'drawer', id: idProp }); - const titleId = useIdAllocator({ prefix: 'drawer' }); - - // Track when intercept element is no longer visible to add shadow below drawer header - const { ref: interceptRef, inView: isInterceptInView } = useInView({ - initialInView: true, - fallbackInView: true, - }); - - const showCloseButton = !!onClose; - // This will use the default value of 0 if not wrapped in a DrawerStackProvider. If using a Drawer + Toolbar, the DrawerStackProvider will not be necessary. - const drawerIndex = getDrawerIndex(id); - - useIsomorphicLayoutEffect(() => { - const drawerElement = ref.current; - - if (!drawerElement || drawerElement instanceof HTMLDivElement) { - return; - } - - if (open) { - drawerElement.show(); - setShouldAnimate(true); - } else { - drawerElement.close(); - } - }, [ref, open]); - - useEffect(() => { - if (open) { - registerDrawer(id); - } else { - setTimeout(() => unregisterDrawer(id), drawerTransitionDuration); - } - }, [id, open, registerDrawer, unregisterDrawer]); - - /** - * Focuses the first focusable element in the drawer when the animation ends. We have to manually handle this because we are hiding the drawer with visibility: hidden, which breaks the default focus behavior of dialog element. - * - */ - const handleAnimationEnd = () => { - const drawerElement = ref.current; - - // Check if the drawerElement is null or is a div, which means it is not a dialog element. - if (!drawerElement || drawerElement instanceof HTMLDivElement) { - return; - } - - if (open) { - const firstFocusable = drawerElement.querySelector( - 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' - ); - (firstFocusable as HTMLElement)?.focus(); - } - }; - - return ( - - -
-
-
- - {title} - - {showCloseButton && ( - - - - )} -
-
-
- {/* Empty span element used to track if children container has scrolled down */} - {} - {children} -
-
-
-
- - - ); - } -); - -Drawer.displayName = 'Drawer'; diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.types.ts b/packages/compass-components/src/components/drawer/drawer/drawer.types.ts deleted file mode 100644 index e9124983b7b..00000000000 --- a/packages/compass-components/src/components/drawer/drawer/drawer.types.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type React from 'react'; - -import type { - DarkModeProps, - HTMLElementProps, - LgIdProps, -} from '@leafygreen-ui/lib'; - -/** - * Options to control how the drawer element is displayed - * @param Embedded will display a drawer as a `
` element that takes up the full parent container height and on the same elevation as container page content. It is recommended to wrap an embedded drawer within the `DrawerLayout` container - * @param Overlay will display a drawer as a `` element that takes up the full parent container height and elevated above container page content. It is recommended to wrap an overlay drawer within the `DrawerLayout` container - */ -export const DisplayMode = { - Embedded: 'embedded', - Overlay: 'overlay', -} as const; -export type DisplayMode = (typeof DisplayMode)[keyof typeof DisplayMode]; - -export interface DrawerProps - extends Omit, 'title'>, - DarkModeProps, - LgIdProps { - /** - * Options to display the drawer element - * @defaultValue 'overlay' - * @param Embedded will display a drawer as a `
` element that takes up the full parent container height and on the same elevation as container page content. It is recommended to wrap an embedded drawer within the `DrawerLayout` container - * @param Overlay will display a drawer as a `` element that takes up the full parent container height and elevated above container page content. It is recommended to wrap an overlay drawer within the `DrawerLayout` container - */ - displayMode?: DisplayMode; - - /** - * Determines if the Drawer is open or closed - * @defaultValue false - */ - open?: boolean; - - /** - * Event handler called on close button click. If provided, a close button will be rendered in the Drawer header. - */ - onClose?: React.MouseEventHandler; - - /** - * Title of the Drawer - */ - title: React.ReactNode; - - /** - * Determines if the Drawer has padding - * @defaultValue true - */ - hasPadding?: boolean; -} diff --git a/packages/compass-components/src/components/drawer/drawer/index.ts b/packages/compass-components/src/components/drawer/drawer/index.ts deleted file mode 100644 index 6a6390cc331..00000000000 --- a/packages/compass-components/src/components/drawer/drawer/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { Drawer } from './drawer'; -export { MOBILE_BREAKPOINT } from './drawer.constants'; -export { drawerClassName } from './drawer.styles'; -export { DisplayMode, type DrawerProps } from './drawer.types'; diff --git a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.styles.ts b/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.styles.ts deleted file mode 100644 index 5eda206c380..00000000000 --- a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.styles.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { css, cx } from '@leafygreen-ui/emotion'; -import { breakpoints } from '@leafygreen-ui/tokens'; - -import { GRID_AREA } from '../constants'; -import { PANEL_WIDTH, TOOLBAR_WIDTH } from '../constants'; -import { MOBILE_BREAKPOINT } from '../drawer'; -import { drawerTransitionDuration } from '../drawer/drawer.styles'; - -const baseStyles = css` - width: 100%; - display: grid; - grid-template-columns: auto 0; - transition-property: grid-template-columns, grid-template-rows; - transition-timing-function: ease-in-out; - transition-duration: ${drawerTransitionDuration}ms; - overflow: hidden; - position: relative; - height: 100%; -`; - -const drawerBaseStyles = css` - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - grid-template-columns: unset; - grid-template-rows: 100% 0; - } -`; - -// If there is no toolbar and the drawer is open, we need to shift the layout by the panel width; -const drawerOpenStyles = css` - grid-template-columns: auto ${PANEL_WIDTH}px; - - @media only screen and (max-width: ${MOBILE_BREAKPOINT}px) { - grid-template-rows: 50% 50%; - } -`; - -const withToolbarBaseStyles = css` - grid-template-columns: auto ${TOOLBAR_WIDTH}px; - grid-template-areas: '${GRID_AREA.content} ${GRID_AREA.drawer}'; -`; - -// If there is a toolbar and the drawer is open, we need to shift the layout by toolbar width + panel width; -const withToolbarOpenStyles = css` - grid-template-columns: auto ${PANEL_WIDTH + TOOLBAR_WIDTH}px; - - @media only screen and (max-width: ${breakpoints.Tablet}px) { - grid-template-columns: auto ${TOOLBAR_WIDTH}px; - } -`; - -export const getEmbeddedDrawerLayoutStyles = ({ - className, - isDrawerOpen, - hasToolbar = false, -}: { - className?: string; - isDrawerOpen: boolean; - hasToolbar?: boolean; -}) => - cx( - baseStyles, - { - [withToolbarBaseStyles]: hasToolbar, - [withToolbarOpenStyles]: isDrawerOpen && hasToolbar, - [drawerBaseStyles]: !hasToolbar, - [drawerOpenStyles]: isDrawerOpen && !hasToolbar, - }, - className - ); diff --git a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.tsx b/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.tsx deleted file mode 100644 index b555c05dc0f..00000000000 --- a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { forwardRef } from 'react'; - -import { getEmbeddedDrawerLayoutStyles } from './embedded-drawer-layout.styles'; -import type { EmbeddedDrawerLayoutProps } from './embedded-drawer-layout.types'; - -/** - * @internal - * - * This layout wrapper is used to create a layout that has 2 grid columns. The main content is on the left and the drawer is on the right. - * - * Since this layout is used for embedded drawers, when the drawer is open, the layout will shift to the right by the width of the drawer + toolbar if it exists. - * - */ -export const EmbeddedDrawerLayout = forwardRef< - HTMLDivElement, - EmbeddedDrawerLayoutProps ->( - ( - { - children, - className, - isDrawerOpen = false, - hasToolbar = false, - }: EmbeddedDrawerLayoutProps, - forwardedRef - ) => { - return ( -
- {children} -
- ); - } -); - -EmbeddedDrawerLayout.displayName = 'EmbeddedDrawerLayout'; diff --git a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.types.ts b/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.types.ts deleted file mode 100644 index 550a66cc25b..00000000000 --- a/packages/compass-components/src/components/drawer/embedded-drawer-layout/embedded-drawer-layout.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { BaseLayoutComponentProps } from '../layout-component/layout-component.styles'; - -export type EmbeddedDrawerLayoutProps = BaseLayoutComponentProps & { - /** - * Determines if the Drawer is open. This will shift the layout to the right by the width of the drawer + toolbar if it exists if the display mode is set to 'embedded'. - */ - isDrawerOpen?: boolean; -}; diff --git a/packages/compass-components/src/components/drawer/embedded-drawer-layout/index.tsx b/packages/compass-components/src/components/drawer/embedded-drawer-layout/index.tsx deleted file mode 100644 index f3bb4e52e6b..00000000000 --- a/packages/compass-components/src/components/drawer/embedded-drawer-layout/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { EmbeddedDrawerLayout } from './embedded-drawer-layout'; -export { type EmbeddedDrawerLayoutProps } from './embedded-drawer-layout.types'; diff --git a/packages/compass-components/src/components/drawer/index.ts b/packages/compass-components/src/components/drawer/index.ts deleted file mode 100644 index 42c42b2add4..00000000000 --- a/packages/compass-components/src/components/drawer/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -export { - DisplayMode, - Drawer, - drawerClassName, - type DrawerProps, -} from './drawer'; -export { DrawerLayout, type DrawerLayoutProps } from './drawer-layout'; -export { - DrawerStackProvider, - useDrawerStackContext, -} from './drawer-stack-context'; -export { useDrawerToolbarContext } from './drawer-toolbar-context'; -export { getLgIds } from './utils'; diff --git a/packages/compass-components/src/components/drawer/layout-component/index.ts b/packages/compass-components/src/components/drawer/layout-component/index.ts deleted file mode 100644 index 6c7f7d5d1e9..00000000000 --- a/packages/compass-components/src/components/drawer/layout-component/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { LayoutComponent } from './layout-component'; -export { type LayoutComponentProps } from './layout-component.styles'; diff --git a/packages/compass-components/src/components/drawer/layout-component/layout-component.styles.ts b/packages/compass-components/src/components/drawer/layout-component/layout-component.styles.ts deleted file mode 100644 index 07dfb1c8bb3..00000000000 --- a/packages/compass-components/src/components/drawer/layout-component/layout-component.styles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib'; - -import type { DisplayMode } from '../drawer'; -import type { EmbeddedDrawerLayoutProps } from '../embedded-drawer-layout'; -import type { OverlayDrawerLayoutProps } from '../overlay-drawer-layout'; - -export type LayoutComponentProps = { - displayMode: DisplayMode; -} & DarkModeProps & - ( - | EmbeddedDrawerLayoutProps - | (OverlayDrawerLayoutProps & { isDrawerOpen?: never }) - ); - -// This interface is used to define the common properties for OverlayDrawerLayout and EmbeddedDrawerLayout -export interface BaseLayoutComponentProps - extends Omit, 'children'> { - /** - * Determines if the Toolbar is present in the layout - */ - hasToolbar?: boolean; - - /** - * The content to be rendered inside the Drawer - */ - children: React.ReactNode; -} diff --git a/packages/compass-components/src/components/drawer/layout-component/layout-component.tsx b/packages/compass-components/src/components/drawer/layout-component/layout-component.tsx deleted file mode 100644 index 572a0af6248..00000000000 --- a/packages/compass-components/src/components/drawer/layout-component/layout-component.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { forwardRef } from 'react'; - -import LeafyGreenProvider, { - useDarkMode, -} from '@leafygreen-ui/leafygreen-provider'; - -import { DisplayMode } from '../drawer'; -import { EmbeddedDrawerLayout } from '../embedded-drawer-layout'; -import { OverlayDrawerLayout } from '../overlay-drawer-layout'; - -import type { LayoutComponentProps } from './layout-component.styles'; - -/** - * @internal - * - * LayoutComponent is a wrapper component that provides a layout for displaying content with a drawer. - * It can be used in both overlay and embedded modes. - */ -export const LayoutComponent = forwardRef( - ( - { - children, - displayMode, - darkMode: darkModeProp, - isDrawerOpen = false, - ...rest - }: LayoutComponentProps, - forwardRef - ) => { - const { darkMode } = useDarkMode(darkModeProp); - - return ( - - {displayMode === DisplayMode.Overlay ? ( - - {children} - - ) : ( - - {children} - - )} - - ); - } -); - -LayoutComponent.displayName = 'LayoutComponent'; diff --git a/packages/compass-components/src/components/drawer/overlay-drawer-layout/index.ts b/packages/compass-components/src/components/drawer/overlay-drawer-layout/index.ts deleted file mode 100644 index 1305ed9f47e..00000000000 --- a/packages/compass-components/src/components/drawer/overlay-drawer-layout/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { OverlayDrawerLayout } from './overlay-drawer-layout'; -export { type OverlayDrawerLayoutProps } from './overlay-drawer-layout.types'; diff --git a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.styles.ts b/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.styles.ts deleted file mode 100644 index 7196ef8b7c3..00000000000 --- a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.styles.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { css, cx } from '@leafygreen-ui/emotion'; - -import { GRID_AREA, TOOLBAR_WIDTH } from '../constants'; - -const baseStyles = css` - width: 100%; - position: relative; - height: inherit; -`; - -const drawerBaseStyles = css` - display: grid; - grid-template-columns: auto 0px; - overflow: hidden; -`; - -const toolbarBaseStyles = css` - display: grid; - grid-template-columns: auto ${TOOLBAR_WIDTH}px; - grid-template-areas: '${GRID_AREA.content} ${GRID_AREA.drawer}'; - height: 100%; -`; - -export const getOverlayDrawerLayoutStyles = ({ - className, - hasToolbar = false, -}: { - className?: string; - hasToolbar?: boolean; -}) => - cx( - baseStyles, - { - [toolbarBaseStyles]: hasToolbar, - [drawerBaseStyles]: !hasToolbar, - }, - className - ); diff --git a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.tsx b/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.tsx deleted file mode 100644 index aeb54d6aa79..00000000000 --- a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { forwardRef } from 'react'; - -import { getOverlayDrawerLayoutStyles } from './overlay-drawer-layout.styles'; -import type { OverlayDrawerLayoutProps } from './overlay-drawer-layout.types'; - -/** - * @internal - * - * This layout wrapper is used to create a layout that has 2 grid columns. The main content is on the left and the drawer is on the right. - * - * Since this layout is used for overlay drawers, when the drawer is open, the layout will not shift. Instead the shifting is handled by the children of this component. - * - */ -export const OverlayDrawerLayout = forwardRef< - HTMLDivElement, - OverlayDrawerLayoutProps ->( - ( - { children, className, hasToolbar = false }: OverlayDrawerLayoutProps, - forwardedRef - ) => { - return ( -
- {children} -
- ); - } -); - -OverlayDrawerLayout.displayName = 'OverlayDrawerLayout'; diff --git a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.types.ts b/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.types.ts deleted file mode 100644 index bdda28fa048..00000000000 --- a/packages/compass-components/src/components/drawer/overlay-drawer-layout/overlay-drawer-layout.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { BaseLayoutComponentProps } from '../layout-component/layout-component.styles'; - -export type OverlayDrawerLayoutProps = BaseLayoutComponentProps; diff --git a/packages/compass-components/src/components/drawer/utils/get-lg-ids.ts b/packages/compass-components/src/components/drawer/utils/get-lg-ids.ts deleted file mode 100644 index b2724cec531..00000000000 --- a/packages/compass-components/src/components/drawer/utils/get-lg-ids.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { LgIdString } from '@leafygreen-ui/lib'; - -export const DEFAULT_LGID_ROOT = 'lg-drawer'; - -export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => - ({ - root, - closeButton: `${root}-close_button`, - toolbar: `${root}-toolbar`, - } as const); diff --git a/packages/compass-components/src/components/drawer/utils/index.ts b/packages/compass-components/src/components/drawer/utils/index.ts deleted file mode 100644 index a9a390b5345..00000000000 --- a/packages/compass-components/src/components/drawer/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { DEFAULT_LGID_ROOT, getLgIds } from './get-lg-ids'; diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx index 0a00f00c7d2..96f8df17870 100644 --- a/packages/compass-components/src/components/leafygreen.tsx +++ b/packages/compass-components/src/components/leafygreen.tsx @@ -93,8 +93,6 @@ import { ComboboxGroup, } from '@leafygreen-ui/combobox'; -export { getLgIds as getDrawerIds } from './drawer'; - // 2. Wrap and make any changes/workaround to leafygreen components. const Icon = ({ size, diff --git a/packages/compass-components/src/components/toolbar/constants.ts b/packages/compass-components/src/components/toolbar/constants.ts deleted file mode 100644 index c043dbbe3fa..00000000000 --- a/packages/compass-components/src/components/toolbar/constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const TOOLBAR_WIDTH = 48; -export const ICON_BUTTON_HEIGHT = 48; diff --git a/packages/compass-components/src/components/toolbar/context/index.ts b/packages/compass-components/src/components/toolbar/context/index.ts deleted file mode 100644 index b8ca146d438..00000000000 --- a/packages/compass-components/src/components/toolbar/context/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { ToolbarContextProvider, useToolbarContext } from './toolbar-context'; -export { - ToolbarDescendantsContext, - useToolbarDescendantsContext, -} from './toolbar-descendants-context'; diff --git a/packages/compass-components/src/components/toolbar/context/toolbar-context.tsx b/packages/compass-components/src/components/toolbar/context/toolbar-context.tsx deleted file mode 100644 index 944f23ea00f..00000000000 --- a/packages/compass-components/src/components/toolbar/context/toolbar-context.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { - createContext, - type PropsWithChildren, - useContext, - useMemo, -} from 'react'; - -import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider'; - -import { getLgIds } from '../utils'; - -import type { ToolbarProviderProps } from './toolbar-context.types'; - -export const ToolbarContext = createContext({ - focusedIndex: undefined, - shouldFocus: false, - lgIds: getLgIds(), - handleOnIconButtonClick: () => {}, -}); - -export const useToolbarContext = () => - useContext(ToolbarContext); - -export const ToolbarContextProvider = ({ - children, - focusedIndex, - shouldFocus, - lgIds, - handleOnIconButtonClick, - darkMode = false, -}: PropsWithChildren) => { - const ToolbarProvider = ToolbarContext.Provider; - - const toolbarProviderData = useMemo(() => { - return { - focusedIndex, - shouldFocus, - lgIds, - handleOnIconButtonClick, - }; - }, [focusedIndex, shouldFocus, lgIds, handleOnIconButtonClick]); - - return ( - - {children} - - ); -}; diff --git a/packages/compass-components/src/components/toolbar/context/toolbar-context.types.ts b/packages/compass-components/src/components/toolbar/context/toolbar-context.types.ts deleted file mode 100644 index 5a7e89020ca..00000000000 --- a/packages/compass-components/src/components/toolbar/context/toolbar-context.types.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { DarkModeProps } from '@leafygreen-ui/lib'; - -import type { GetLgIdsReturnType } from '../utils'; - -export type ToolbarProviderProps = DarkModeProps & { - /** - * The index of the currently focused item in the toolbar. - */ - focusedIndex?: number; - - /** - * Whether the toolbar should focus the currently focused item. This will prevent this component from hijacking focus on initial page load. - */ - shouldFocus?: boolean; - - /** - * LGIDs for Toolbar components. - */ - lgIds: GetLgIdsReturnType; - - /** - * Callback to handle clicks on ToolbarIconButtons. - */ - handleOnIconButtonClick: ( - event: React.MouseEvent, - focusedIndex: number, - onClick?: (e: React.MouseEvent) => void - ) => void; -}; diff --git a/packages/compass-components/src/components/toolbar/context/toolbar-descendants-context.tsx b/packages/compass-components/src/components/toolbar/context/toolbar-descendants-context.tsx deleted file mode 100644 index c9e035d5976..00000000000 --- a/packages/compass-components/src/components/toolbar/context/toolbar-descendants-context.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { - createDescendantsContext, - useDescendantsContext, -} from '@leafygreen-ui/descendants'; - -export const ToolbarDescendantsContext = - createDescendantsContext('ToolbarDescendantsContext'); - -export function useToolbarDescendantsContext() { - return useDescendantsContext(ToolbarDescendantsContext); -} diff --git a/packages/compass-components/src/components/toolbar/index.ts b/packages/compass-components/src/components/toolbar/index.ts deleted file mode 100644 index db8b53d9ee6..00000000000 --- a/packages/compass-components/src/components/toolbar/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export * from './constants'; -export { Toolbar, toolbarClassName, type ToolbarProps } from './toolbar'; -export { - ToolbarIconButton, - type ToolbarIconButtonProps, -} from './toolbar-icon-button'; -export { DEFAULT_LGID_ROOT, getLgIds, type GetLgIdsReturnType } from './utils'; diff --git a/packages/compass-components/src/components/toolbar/toolbar-icon-button/index.ts b/packages/compass-components/src/components/toolbar/toolbar-icon-button/index.ts deleted file mode 100644 index ed80f67b197..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar-icon-button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ToolbarIconButton } from './toolbar-icon-button'; -export { type ToolbarIconButtonProps } from './toolbar-icon-button.types'; diff --git a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.styles.ts b/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.styles.ts deleted file mode 100644 index 74a16188a3f..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.styles.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { css, cx } from '@leafygreen-ui/emotion'; -import { Theme } from '@leafygreen-ui/lib'; -import { palette } from '@leafygreen-ui/palette'; -import { borderRadius } from '@leafygreen-ui/tokens'; - -import { ICON_BUTTON_HEIGHT } from '../constants'; - -export const baseIconButtonStyles = css` - &, - &:hover, - &[data-hover='true'], - &::before { - border-radius: ${borderRadius[150]}px; - } -`; - -export const getIconButtonActiveStyles = ({ theme }: { theme: Theme }) => - cx( - css` - background: ${theme === Theme.Light - ? palette.green.light3 - : palette.green.dark3}; - - color: ${theme === Theme.Light - ? palette.green.dark2 - : palette.green.light1}; - ` - ); - -export const getIconButtonStyles = ({ - active, - theme, - disabled, - className, -}: { - active: boolean; - theme: Theme; - disabled: boolean; - className?: string; -}) => - cx( - css` - ${baseIconButtonStyles} - `, - { - [getIconButtonActiveStyles({ theme })]: active && !disabled, - }, - className - ); - -export const triggerStyles = css` - display: flex; - height: ${ICON_BUTTON_HEIGHT}px; - align-items: center; -`; diff --git a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.tsx b/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.tsx deleted file mode 100644 index a4015541e6c..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { type ComponentPropsWithoutRef, useEffect } from 'react'; - -import { useDescendant } from '@leafygreen-ui/descendants'; -import Icon from '@leafygreen-ui/icon'; -import IconButton from '@leafygreen-ui/icon-button'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -import { getNodeTextContent } from '@leafygreen-ui/lib'; -import Tooltip, { Align } from '@leafygreen-ui/tooltip'; - -import { ToolbarDescendantsContext, useToolbarContext } from '../context'; - -import { - getIconButtonStyles, - triggerStyles, -} from './toolbar-icon-button.styles'; -import { type ToolbarIconButtonProps } from './toolbar-icon-button.types'; - -export const ToolbarIconButton = React.forwardRef< - HTMLButtonElement, - ToolbarIconButtonProps ->( - ( - { - className, - onClick, - label, - glyph, - disabled = false, - active = false, - 'aria-label': ariaLabel, - ...rest - }: ToolbarIconButtonProps, - forwardedRef - ) => { - const { theme } = useDarkMode(); - const { index, ref } = useDescendant( - ToolbarDescendantsContext, - forwardedRef - ); - const { focusedIndex, shouldFocus, lgIds, handleOnIconButtonClick } = - useToolbarContext(); - const isFocusable = index === focusedIndex; - - if (focusedIndex === undefined) { - // eslint-disable-next-line no-console - console.error( - 'ToolbarIconButton should only be used inside the Toolbar component.' - ); - } - - if (glyph === undefined) { - // eslint-disable-next-line no-console - console.error( - 'A glpyh is required for ToolbarIconButton. Please provide a valid glyph. The list of available glyphs can be found in the LG Icon README, https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#properties.' - ); - } - - useEffect(() => { - // shouldFocus prevents this component from hijacking focus on initial page load. - if (isFocusable && shouldFocus) ref.current?.focus(); - }, [isFocusable, ref, shouldFocus]); - - return ( - - ) => - handleOnIconButtonClick(event, index, onClick) - } - disabled={disabled} - data-testid={`${lgIds.iconButton}-${index}`} - data-lgid={`${lgIds.iconButton}-${index}`} - data-active={active} - ref={ref} - {...(rest as ComponentPropsWithoutRef<'button'>)} - > - - -
- } - > - {label} - - ); - } -); - -ToolbarIconButton.displayName = 'ToolbarIconButton'; diff --git a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.types.ts b/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.types.ts deleted file mode 100644 index 89e3803418d..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar-icon-button/toolbar-icon-button.types.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { GlyphName } from '@leafygreen-ui/icon'; -import type { BaseIconButtonProps as IconButtonProps } from '@leafygreen-ui/icon-button'; - -type ButtonProps = Omit< - IconButtonProps, - | 'tabIndex' - | 'href' - | 'as' - | 'ref' - | 'children' - | 'size' - | 'darkMode' - | 'onClick' ->; - -export interface ToolbarIconButtonProps extends ButtonProps { - /** - * The LG Icon that will render in the button - */ - glyph: GlyphName; - - /** - * The text that will render in the tooltip on hover - */ - label: React.ReactNode; - - /** - * Callback fired when the ToolbarIconButton is clicked - */ - onClick?: (event: React.MouseEvent) => void; -} diff --git a/packages/compass-components/src/components/toolbar/toolbar/index.ts b/packages/compass-components/src/components/toolbar/toolbar/index.ts deleted file mode 100644 index 8af49631bdf..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Toolbar } from './toolbar'; -export { toolbarClassName } from './toolbar.styles'; -export { type ToolbarProps } from './toolbar.types'; diff --git a/packages/compass-components/src/components/toolbar/toolbar/toolbar.styles.ts b/packages/compass-components/src/components/toolbar/toolbar/toolbar.styles.ts deleted file mode 100644 index 40bc9974e18..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar/toolbar.styles.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { css, cx } from '@leafygreen-ui/emotion'; -import { createUniqueClassName, type Theme } from '@leafygreen-ui/lib'; -import { color, focusRing } from '@leafygreen-ui/tokens'; - -import { TOOLBAR_WIDTH } from '../constants'; - -export const toolbarClassName = createUniqueClassName('lg-toolbar'); - -export const getBaseStyles = ({ - theme, - className, -}: { - theme: Theme; - className?: string; -}) => - cx( - css` - height: 100%; - width: ${TOOLBAR_WIDTH}px; - display: flex; - flex-direction: column; - align-items: center; - background: ${color[theme].background.primary.default}; - border: 1px solid ${color[theme].border.secondary.default}; - - // Show the focus ring on the toolbar itself when a child element is focused and only when navigating with a keyboard - &:has(:focus-visible) { - box-shadow: ${focusRing[theme].default}; - // So the focus ring overlaps sibling elements - z-index: 1; - } - `, - toolbarClassName, - className - ); diff --git a/packages/compass-components/src/components/toolbar/toolbar/toolbar.tsx b/packages/compass-components/src/components/toolbar/toolbar/toolbar.tsx deleted file mode 100644 index 7cfaab6f791..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar/toolbar.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useState } from 'react'; - -import { - DescendantsProvider, - useInitDescendants, -} from '@leafygreen-ui/descendants'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; -import { keyMap } from '@leafygreen-ui/lib'; - -import { ToolbarContextProvider, ToolbarDescendantsContext } from '../context'; -import { DEFAULT_LGID_ROOT, getLgIds } from '../utils'; - -import { getBaseStyles } from './toolbar.styles'; -import { type ToolbarProps } from './toolbar.types'; - -export const Toolbar = React.forwardRef( - ( - { - className, - children, - darkMode: darkModeProp, - 'data-lgid': dataLgId = DEFAULT_LGID_ROOT, - ...rest - }: ToolbarProps, - forwardedRef - ) => { - const { darkMode, theme } = useDarkMode(darkModeProp); - const { descendants, dispatch } = useInitDescendants( - ToolbarDescendantsContext - ); - const [focusedIndex, setFocusedIndex] = useState(0); - const childrenLength = descendants?.length ?? 0; - const [isUsingKeyboard, setIsUsingKeyboard] = useState(false); - - const lgIds = getLgIds(dataLgId); - - /** - * Implements roving tabindex - * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex - * @param event Keyboard event - */ - const handleKeyDown = (event: React.KeyboardEvent) => { - // Note: Arrow keys don't fire a keyPress event — need to use onKeyDownCapture - // We only handle up and down arrow keys - switch (event.key) { - case keyMap.ArrowDown: - event.stopPropagation(); - event.preventDefault(); - setIsUsingKeyboard(true); - setFocusedIndex((focusedIndex + 1) % childrenLength); - break; - case keyMap.ArrowUp: - event.stopPropagation(); - event.preventDefault(); - setIsUsingKeyboard(true); - setFocusedIndex((focusedIndex - 1 + childrenLength) % childrenLength); - break; - default: - break; - } - }; - - /** - * Callback to handle click events on ToolbarIconButtons. - * Also updates the focused index to ensure that the correct button is focused when using the up/down arrows. - * @param event MouseEvent - * @param focusedIndex number - * @param onClick MouseEvent - */ - const handleOnIconButtonClick = ( - event: React.MouseEvent, - focusedIndex: number, - onClick?: (e: React.MouseEvent) => void - ) => { - onClick?.(event); - // This ensures that on click, the buttons tabIndex is set to 0 so that when the up/down arrows are pressed, the correct button is focused - setFocusedIndex(focusedIndex); - }; - - return ( - - -
setIsUsingKeyboard(false)} - onMouseDown={() => setIsUsingKeyboard(false)} - data-lgid={lgIds.root} - data-testid={lgIds.root} - {...rest} - > - {children} -
- - - ); - } -); - -Toolbar.displayName = 'Toolbar'; diff --git a/packages/compass-components/src/components/toolbar/toolbar/toolbar.types.ts b/packages/compass-components/src/components/toolbar/toolbar/toolbar.types.ts deleted file mode 100644 index 1be22f0ce54..00000000000 --- a/packages/compass-components/src/components/toolbar/toolbar/toolbar.types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { ComponentPropsWithRef } from 'react'; - -import type { DarkModeProps, LgIdProps } from '@leafygreen-ui/lib'; -export interface ToolbarProps - extends ComponentPropsWithRef<'div'>, - DarkModeProps, - LgIdProps { - children: React.ReactNode; -} diff --git a/packages/compass-components/src/components/toolbar/utils/get-lg-ids.ts b/packages/compass-components/src/components/toolbar/utils/get-lg-ids.ts deleted file mode 100644 index fe01b95443a..00000000000 --- a/packages/compass-components/src/components/toolbar/utils/get-lg-ids.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const DEFAULT_LGID_ROOT = 'lg-toolbar'; - -export const getLgIds = (root: `lg-${string}` = DEFAULT_LGID_ROOT) => { - const ids = { - root, - iconButton: `${root}-icon_button`, - iconButtonTooltip: `${root}-icon_button-tooltip`, - } as const; - return ids; -}; - -export type GetLgIdsReturnType = ReturnType; diff --git a/packages/compass-components/src/components/toolbar/utils/index.ts b/packages/compass-components/src/components/toolbar/utils/index.ts deleted file mode 100644 index a24b0ab00a7..00000000000 --- a/packages/compass-components/src/components/toolbar/utils/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { - DEFAULT_LGID_ROOT, - getLgIds, - type GetLgIdsReturnType, -} from './get-lg-ids';