From 7ebcee52e8f1545ffcdcb8d1e6e91b7a17e2b295 Mon Sep 17 00:00:00 2001 From: mmeigs Date: Thu, 26 Sep 2024 14:18:17 -0400 Subject: [PATCH 1/3] DOP-5027: Chatbot menu dropdown width (#1256) --- package-lock.json | 16 ++++---- src/components/ActionBar/SearchInput.js | 39 ++++++++++--------- src/components/ActionBar/styles.js | 11 ++++-- .../__snapshots__/Presentation.test.js.snap | 8 ++-- 4 files changed, 40 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd20fefb6..57be7946f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8067,17 +8067,17 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/@mdb/consistent-nav": { - "version": "2.2.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/consistent-nav/-/@mdb/consistent-nav-2.2.0.tgz", - "integrity": "sha512-JwA/NJF9GwdEGobvTkWQYfMktSMezhP5w89UIMmR7enGnERMbFDeBasJkfSsn6oNUuW/p57phoEHYfQ0G6bYAQ==", + "version": "2.2.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/consistent-nav/-/@mdb/consistent-nav-2.2.2.tgz", + "integrity": "sha512-cvnUm3zMXuXSzkEJk6pzuoWgfkkwfc/PdLnxRaPGzKStvWlstyXo82mbxbXaf5GKvqDgTPpc7wdxes33oHadqw==", "peerDependencies": { "@emotion/react": ">= 11.6.0", "@emotion/styled": ">= 11.6.0", - "@mdb/flora": "^1.7.1", + "@mdb/flora": "1.14.2", "@mdx-js/react": "^1.6.22", "react": ">= 16.8", "react-dom": ">= 16.8", - "theme-ui": ">= 0.13.1" + "theme-ui": ">= 0.16.0" } }, "node_modules/@mdb/flora": { @@ -37298,9 +37298,9 @@ } }, "@mdb/consistent-nav": { - "version": "2.2.0", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/consistent-nav/-/@mdb/consistent-nav-2.2.0.tgz", - "integrity": "sha512-JwA/NJF9GwdEGobvTkWQYfMktSMezhP5w89UIMmR7enGnERMbFDeBasJkfSsn6oNUuW/p57phoEHYfQ0G6bYAQ==" + "version": "2.2.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/consistent-nav/-/@mdb/consistent-nav-2.2.2.tgz", + "integrity": "sha512-cvnUm3zMXuXSzkEJk6pzuoWgfkkwfc/PdLnxRaPGzKStvWlstyXo82mbxbXaf5GKvqDgTPpc7wdxes33oHadqw==" }, "@mdb/flora": { "version": "1.5.6", diff --git a/src/components/ActionBar/SearchInput.js b/src/components/ActionBar/SearchInput.js index b926c0a93..43893adfc 100644 --- a/src/components/ActionBar/SearchInput.js +++ b/src/components/ActionBar/SearchInput.js @@ -15,7 +15,7 @@ import debounce from '../../utils/debounce'; import { isBrowser } from '../../utils/is-browser'; import { SuspenseHelper } from '../SuspenseHelper'; import { getCurrLocale } from '../../utils/locale'; -import { searchIconStyling, searchInputStyling, StyledInputContainer } from './styles'; +import { searchIconStyling, searchInputStyling, StyledInputContainer, StyledSearchBoxRef } from './styles'; import { ShortcutIcon, SparkleIcon } from './SparkIcon'; const Chatbot = lazy(() => import('mongodb-chatbot-ui')); const SearchMenu = lazy(() => import('./SearchMenu')); @@ -208,26 +208,27 @@ const SearchInput = ({ className, slug }) => { - { - setSearchValue(e.target.value); - }} - onClick={() => { - setIsOpen(!!searchValue.length); - }} - onSubmit={(e) => { - inputRef.current?.blur(); - setIsOpen(false); - }} - ref={inputRef} - /> + + { + setSearchValue(e.target.value); + }} + onClick={() => { + setIsOpen(!!searchValue.length); + }} + onSubmit={(e) => { + inputRef.current?.blur(); + setIsOpen(false); + }} + ref={inputRef} + /> + {isMedium && mobileSearchActive && ( (sidenav ? '70' : '100')}%; - padding-right: ${theme.size.medium}; } ${(props) => { @@ -169,8 +168,9 @@ export const StyledInputContainer = styled.div` z-index: 40; max-width: unset; left: ${theme.size.medium}; + column-gap: ${theme.size.medium}; - > form { + form { width: 100%; margin-right: ${theme.size.medium}; } @@ -179,6 +179,11 @@ export const StyledInputContainer = styled.div` }} `; +// Used to ensure dropdown is same width as input +export const StyledSearchBoxRef = styled.div` + width: 100%; +`; + export const searchInputStyling = ({ mobileSearchActive }) => css` ${displayNone.onMedium}; @@ -207,7 +212,7 @@ export const ActionsBox = styled('div')` column-gap: ${theme.size.default}; position: relative; top: 0; - padding-right: ${theme.size.large}; + padding: 0 ${theme.size.large} 0 ${theme.size.medium}; justify-self: flex-end; grid-column: -2/-1; diff --git a/tests/unit/__snapshots__/Presentation.test.js.snap b/tests/unit/__snapshots__/Presentation.test.js.snap index f145fd735..9becad717 100644 --- a/tests/unit/__snapshots__/Presentation.test.js.snap +++ b/tests/unit/__snapshots__/Presentation.test.js.snap @@ -267,7 +267,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` margin: 0; min-width: 0; display: none; - font-family: Akzidenz-Grotesk Std; + font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-weight: 300; font-size: 12px; color: #b8c4c2; @@ -296,7 +296,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } .emotion-23 { - font-family: Akzidenz-Grotesk Std; + font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-weight: 500; font-size: 16px; margin-bottom: 24px; @@ -332,7 +332,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` color: #ffffff; -webkit-text-decoration: none; text-decoration: none; - font-family: Akzidenz-Grotesk Std; + font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-weight: 300; font-size: 14px; line-height: 32px; @@ -351,7 +351,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` margin: 0; min-width: 0; display: block; - font-family: Akzidenz-Grotesk Std; + font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-weight: 300; font-size: 12px; color: #b8c4c2; From fb4c5e790bf627c08883b00be76061b54eda12fc Mon Sep 17 00:00:00 2001 From: mmeigs Date: Thu, 26 Sep 2024 16:07:37 -0400 Subject: [PATCH 2/3] DOP-4902: Update flora to v1.14.2 (#1257) --- package-lock.json | 700 +++++++++++++++++- package.json | 2 +- .../__snapshots__/Presentation.test.js.snap | 8 +- 3 files changed, 698 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 57be7946f..fa7514d62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,7 @@ "@leafygreen-ui/typography": "^18.3.0", "@loadable/component": "^5.14.1", "@mdb/consistent-nav": "^2.2.0", - "@mdb/flora": "^1.5.6", + "@mdb/flora": "1.14.2", "@mdx-js/react": "^2.2.1", "abort-controller": "^3.0.0", "adm-zip": "^0.5.9", @@ -8081,14 +8081,24 @@ } }, "node_modules/@mdb/flora": { - "version": "1.5.6", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/flora/-/@mdb/flora-1.5.6.tgz", - "integrity": "sha512-+ArnKzKYC/vZHsiD44vicGlcvn+mEkvMzQPW6gD1Gtr0YCiN/1U0hCXuvyRX7Add/MrQaO1IDjWLFsWjGhJ+HA==", + "version": "1.14.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/flora/-/@mdb/flora-1.14.2.tgz", + "integrity": "sha512-ye2aLrOGRIl4vJH47mxOWWJ/Z+CgehI4zfDCMugF3DIyttBMvUiw4+Ettecm7R/z3ljO7SIPSJJ3NEfr7JwpJQ==", "dependencies": { + "@emotion/css": "^11.11.2", + "@emotion/react": ">= 11.6.0", + "@emotion/styled": ">= 11.6.0", "@imgix/js-core": "3.7.1", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "codemirror": "5.62.2", "codemirror-ssr": "0.0.6", - "lazysizes": "5.3.2" + "hex-rgb": "^4.3.0", + "lazysizes": "5.3.2", + "react": ">= 16.8", + "react-dom": ">= 16.8", + "theme-ui": ">= 0.13.1", + "usehooks-ts": "^3.1.0" }, "peerDependencies": { "@emotion/react": ">= 11.6.0", @@ -8099,6 +8109,14 @@ "theme-ui": ">= 0.13.1" } }, + "node_modules/@mdb/flora/node_modules/hex-rgb": { + "version": "4.3.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/hex-rgb/-/hex-rgb-4.3.0.tgz", + "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==", + "engines": { + "node": ">=6" + } + }, "node_modules/@mdx-js/react": { "version": "2.3.0", "license": "MIT", @@ -9495,6 +9513,302 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz", + "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz", + "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-escape-keydown": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz", + "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz", + "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-portal/-/react-portal-1.1.1.tgz", + "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", + "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", + "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@reach/observe-rect": { "version": "1.2.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@reach/observe-rect/-/observe-rect-1.2.0.tgz", @@ -11637,6 +11951,17 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-hidden": { + "version": "1.2.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/aria-hidden/-/aria-hidden-1.2.4.tgz", + "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/aria-query": { "version": "5.1.3", "license": "Apache-2.0", @@ -14460,6 +14785,11 @@ "node": ">=8" } }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "node_modules/detect-port": { "version": "1.5.1", "license": "MIT", @@ -17898,6 +18228,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/get-own-enumerable-property-symbols": { "version": "3.0.2", "dev": true, @@ -26732,6 +27070,51 @@ "node": ">=0.10.0" } }, + "node_modules/react-remove-scroll": { + "version": "2.5.7", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", + "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.4", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.6", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz", + "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-resizable": { "version": "3.0.5", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-resizable/-/react-resizable-3.0.5.tgz", @@ -26770,6 +27153,28 @@ "node": ">=0.4.0" } }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-tabs": { "version": "3.2.3", "license": "MIT", @@ -30485,6 +30890,26 @@ "version": "1.3.2", "license": "MIT" }, + "node_modules/use-callback-ref": { + "version": "1.3.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-callback-ref/-/use-callback-ref-1.3.2.tgz", + "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-composed-ref": { "version": "1.3.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-composed-ref/-/use-composed-ref-1.3.0.tgz", @@ -30534,6 +30959,41 @@ "react-dom": "16.8.0 - 18" } }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/usehooks-ts": { + "version": "3.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/usehooks-ts/-/usehooks-ts-3.1.0.tgz", + "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==", + "dependencies": { + "lodash.debounce": "^4.0.8" + }, + "engines": { + "node": ">=16.15.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "license": "MIT" @@ -37303,14 +37763,31 @@ "integrity": "sha512-cvnUm3zMXuXSzkEJk6pzuoWgfkkwfc/PdLnxRaPGzKStvWlstyXo82mbxbXaf5GKvqDgTPpc7wdxes33oHadqw==" }, "@mdb/flora": { - "version": "1.5.6", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/flora/-/@mdb/flora-1.5.6.tgz", - "integrity": "sha512-+ArnKzKYC/vZHsiD44vicGlcvn+mEkvMzQPW6gD1Gtr0YCiN/1U0hCXuvyRX7Add/MrQaO1IDjWLFsWjGhJ+HA==", + "version": "1.14.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@mdb/flora/-/@mdb/flora-1.14.2.tgz", + "integrity": "sha512-ye2aLrOGRIl4vJH47mxOWWJ/Z+CgehI4zfDCMugF3DIyttBMvUiw4+Ettecm7R/z3ljO7SIPSJJ3NEfr7JwpJQ==", "requires": { + "@emotion/css": "^11.11.2", + "@emotion/react": ">= 11.6.0", + "@emotion/styled": ">= 11.6.0", "@imgix/js-core": "3.7.1", + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "codemirror": "5.62.2", "codemirror-ssr": "0.0.6", - "lazysizes": "5.3.2" + "hex-rgb": "^4.3.0", + "lazysizes": "5.3.2", + "react": ">= 16.8", + "react-dom": ">= 16.8", + "theme-ui": ">= 0.13.1", + "usehooks-ts": "^3.1.0" + }, + "dependencies": { + "hex-rgb": { + "version": "4.3.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/hex-rgb/-/hex-rgb-4.3.0.tgz", + "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==" + } } }, "@mdx-js/react": { @@ -38140,6 +38617,137 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, + "@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==" + }, + "@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==" + }, + "@radix-ui/react-dialog": { + "version": "1.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz", + "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==", + "requires": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + } + }, + "@radix-ui/react-dismissable-layer": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz", + "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==", + "requires": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-escape-keydown": "1.1.0" + } + }, + "@radix-ui/react-focus-guards": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz", + "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==" + }, + "@radix-ui/react-focus-scope": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz", + "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==", + "requires": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0" + } + }, + "@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "requires": { + "@radix-ui/react-use-layout-effect": "1.1.0" + } + }, + "@radix-ui/react-portal": { + "version": "1.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-portal/-/react-portal-1.1.1.tgz", + "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==", + "requires": { + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + } + }, + "@radix-ui/react-presence": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", + "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", + "requires": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + } + }, + "@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "requires": { + "@radix-ui/react-slot": "1.1.0" + } + }, + "@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "requires": { + "@radix-ui/react-compose-refs": "1.1.0" + } + }, + "@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==" + }, + "@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "requires": { + "@radix-ui/react-use-callback-ref": "1.1.0" + } + }, + "@radix-ui/react-use-escape-keydown": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz", + "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==", + "requires": { + "@radix-ui/react-use-callback-ref": "1.1.0" + } + }, + "@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==" + }, "@reach/observe-rect": { "version": "1.2.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@reach/observe-rect/-/observe-rect-1.2.0.tgz", @@ -39593,6 +40201,14 @@ "sprintf-js": "~1.0.2" } }, + "aria-hidden": { + "version": "1.2.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/aria-hidden/-/aria-hidden-1.2.4.tgz", + "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", + "requires": { + "tslib": "^2.0.0" + } + }, "aria-query": { "version": "5.1.3", "requires": { @@ -41415,6 +42031,11 @@ "version": "3.1.0", "dev": true }, + "detect-node-es": { + "version": "1.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "detect-port": { "version": "1.5.1", "requires": { @@ -43681,6 +44302,11 @@ "has-symbols": "^1.0.3" } }, + "get-nonce": { + "version": "1.0.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==" + }, "get-own-enumerable-property-symbols": { "version": "3.0.2", "dev": true @@ -49267,6 +49893,27 @@ "react-refresh": { "version": "0.14.0" }, + "react-remove-scroll": { + "version": "2.5.7", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", + "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==", + "requires": { + "react-remove-scroll-bar": "^2.3.4", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + } + }, + "react-remove-scroll-bar": { + "version": "2.3.6", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz", + "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==", + "requires": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + } + }, "react-resizable": { "version": "3.0.5", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-resizable/-/react-resizable-3.0.5.tgz", @@ -49289,6 +49936,16 @@ } } }, + "react-style-singleton": { + "version": "2.2.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "requires": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + } + }, "react-tabs": { "version": "3.2.3", "requires": { @@ -51725,6 +52382,14 @@ "url-template": { "version": "2.0.8" }, + "use-callback-ref": { + "version": "1.3.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-callback-ref/-/use-callback-ref-1.3.2.tgz", + "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==", + "requires": { + "tslib": "^2.0.0" + } + }, "use-composed-ref": { "version": "1.3.0", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-composed-ref/-/use-composed-ref-1.3.0.tgz", @@ -51751,6 +52416,23 @@ "@juggle/resize-observer": "^3.3.1" } }, + "use-sidecar": { + "version": "1.1.2", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "requires": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + } + }, + "usehooks-ts": { + "version": "3.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/usehooks-ts/-/usehooks-ts-3.1.0.tgz", + "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==", + "requires": { + "lodash.debounce": "^4.0.8" + } + }, "util-deprecate": { "version": "1.0.2" }, diff --git a/package.json b/package.json index d02933b43..314751c9e 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@leafygreen-ui/typography": "^18.3.0", "@loadable/component": "^5.14.1", "@mdb/consistent-nav": "^2.2.0", - "@mdb/flora": "^1.5.6", + "@mdb/flora": "1.14.2", "@mdx-js/react": "^2.2.1", "abort-controller": "^3.0.0", "adm-zip": "^0.5.9", diff --git a/tests/unit/__snapshots__/Presentation.test.js.snap b/tests/unit/__snapshots__/Presentation.test.js.snap index 9becad717..646b3353e 100644 --- a/tests/unit/__snapshots__/Presentation.test.js.snap +++ b/tests/unit/__snapshots__/Presentation.test.js.snap @@ -188,7 +188,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } .emotion-10 { - font-family: Akzidenz-Grotesk Std; + font-family: Akzidenz-Grotesk Std,Noto Sans KR,Noto Sans SC,Noto Sans JP; font-size: 16px; line-height: 16px; color: #ffffff; @@ -233,7 +233,7 @@ exports[`DocumentBody renders the necessary elements 1`] = ` line-height: 16px; font-size: 16px; color: #ffffff; - font-family: Akzidenz-Grotesk Std; + font-family: Akzidenz-Grotesk Std,Noto Sans KR,Noto Sans SC,Noto Sans JP; background-color: #21313c; border: 1px solid #b8c4c2; border-radius: 8px; @@ -390,7 +390,9 @@ exports[`DocumentBody renders the necessary elements 1`] = ` MongoDB logo @@ -722,6 +724,8 @@ exports[`DocumentBody renders the necessary elements 2`] = ` MongoDB logo `; From 6943a0a77ecf1e71fd9ab8fac62b444eda17da84 Mon Sep 17 00:00:00 2001 From: Maya Raman Date: Fri, 27 Sep 2024 10:51:37 -0400 Subject: [PATCH 3/3] DOP-5029: CTAs should initialize in dark mode preference (#1251) --- src/components/Banner/Banner.js | 108 ++++++++++++++++-- src/components/Banner/CTABanner.js | 25 ++-- tests/unit/__snapshots__/Banner.test.js.snap | 42 ++++++- .../unit/__snapshots__/CTABanner.test.js.snap | 60 +++++++--- 4 files changed, 196 insertions(+), 39 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 9913894ce..74db406a5 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { palette } from '@leafygreen-ui/palette'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import styled from '@emotion/styled'; import LeafyBanner, { Variant as LeafyVariant } from '@leafygreen-ui/banner'; import ComponentFactory from '../ComponentFactory'; @@ -14,21 +13,114 @@ export const alertMap = { success: LeafyVariant.Success, }; +const styleMapLight = { + info: { + backgroundColor: palette.blue.light3, + color: palette.blue.dark2, + borderColor: palette.blue.light2, + linkColor: palette.blue.dark3, + beforeColor: palette.blue.base, + iconColor: palette.blue.base, + }, + warning: { + backgroundColor: palette.yellow.light3, + color: palette.yellow.dark2, + borderColor: palette.yellow.light2, + linkColor: palette.yellow.dark3, + beforeColor: palette.yellow.base, + iconColor: palette.yellow.dark2, + }, + danger: { + backgroundColor: palette.red.light3, + color: palette.red.dark2, + borderColor: palette.red.light2, + linkColor: palette.red.dark3, + beforeColor: palette.red.base, + iconColor: palette.red.base, + }, + success: { + backgroundColor: palette.green.light3, + color: palette.green.dark2, + borderColor: palette.green.light2, + linkColor: palette.green.dark3, + }, +}; +const styleMapDark = { + info: { + backgroundColor: palette.blue.dark3, + color: palette.blue.light2, + borderColor: palette.blue.dark2, + linkColor: palette.blue.light3, + beforeColor: palette.blue.light1, + iconColor: palette.blue.light1, + }, + warning: { + backgroundColor: palette.yellow.dark3, + color: palette.yellow.light2, + borderColor: palette.yellow.dark2, + linkColor: palette.yellow.light3, + beforeColor: palette.yellow.dark2, + iconColor: palette.yellow.base, + }, + danger: { + backgroundColor: palette.red.dark3, + color: palette.red.light2, + borderColor: palette.red.dark2, + linkColor: palette.red.light3, + beforeColor: palette.red.base, + iconColor: palette.red.light1, + }, + success: { + backgroundColor: palette.green.dark3, + color: palette.green.light2, + borderColor: palette.green.dark2, + linkColor: palette.green.light3, + }, +}; + const StyledBanner = styled((props) => )` ${baseBannerStyle} + background-color: ${(props) => styleMapLight[props.variant].backgroundColor}; + color: ${(props) => styleMapLight[props.variant].color}; + border-color: ${(props) => styleMapLight[props.variant].borderColor}; + // copied from LG + ::before { + background: linear-gradient(to left, transparent 6px, ${(props) => styleMapLight[props.variant].beforeColor}} 6px); + } + a { + color: ${(props) => styleMapLight[props.variant].linkColor}; + :hover { + color: ${(props) => styleMapLight[props.variant].color}; + text-decoration-color: ${(props) => styleMapLight[props.variant].color}; + } + } + > svg { + color: ${(props) => styleMapLight[props.variant].iconColor}; + } - a:hover { - text-decoration-color: var(--text-decoration-color); + .dark-theme & { + background-color: ${(props) => styleMapDark[props.variant].backgroundColor}; + color: ${(props) => styleMapDark[props.variant].color}; + border-color: ${(props) => styleMapDark[props.variant].borderColor}; + ::before { + background: linear-gradient(to left, transparent 6px, ${(props) => styleMapDark[props.variant].beforeColor} 6px); + } + a { + color: ${(props) => styleMapDark[props.variant].linkColor}; + :hover { + color: ${(props) => styleMapDark[props.variant].color}; + text-decoration-color: ${(props) => styleMapDark[props.variant].color}; + } + } + > svg { + color: ${(props) => styleMapDark[props.variant].iconColor}; + } } `; const Banner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); return ( - + {children.map((child, i) => ( ))} diff --git a/src/components/Banner/CTABanner.js b/src/components/Banner/CTABanner.js index 8e72e7923..a7a4876b7 100644 --- a/src/components/Banner/CTABanner.js +++ b/src/components/Banner/CTABanner.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { palette } from '@leafygreen-ui/palette'; import Icon, { glyphs } from '@leafygreen-ui/icon'; import ComponentFactory from '../ComponentFactory'; @@ -9,11 +8,18 @@ import { baseBannerStyle } from './styles/bannerItemStyle'; const videoBannerStyling = css` ${baseBannerStyle}; + background-color: ${palette.blue.light3}; + border: 1px solid ${palette.blue.light2}; + color: ${palette.blue.dark2}; + .dark-theme & { + background-color: ${palette.blue.dark3}; + border: 1px solid ${palette.blue.dark2}; + color: ${palette.blue.light2}; + } align-items: center; - background-color: var(--background-color); + border-radius: 6px; - border: 1px solid var(--border); - color: var(--color); + display: flex; font-size: 14px; margin: 24px 0px; @@ -41,10 +47,10 @@ const lgIconStyling = css` const linkStyling = css` text-decoration: none !important; + color: unset; `; const CTABanner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); // Handles case sensitivity for specified icons let lgIcon = 'Play'; if (options?.icon) { @@ -56,14 +62,7 @@ const CTABanner = ({ nodeData: { children, options }, ...rest }) => { return ( -
+
diff --git a/tests/unit/__snapshots__/Banner.test.js.snap b/tests/unit/__snapshots__/Banner.test.js.snap index 5f5a7495c..89fc1c0b7 100644 --- a/tests/unit/__snapshots__/Banner.test.js.snap +++ b/tests/unit/__snapshots__/Banner.test.js.snap @@ -5,6 +5,9 @@ exports[`renders a Banner correctly 1`] = ` .emotion-0 { margin: 16px 0; font-size: 13px; + background-color: #E1F7FF; + color: #083C90; + border-color: #C3E7FE; } .emotion-0>div>div>* { @@ -28,8 +31,44 @@ exports[`renders a Banner correctly 1`] = ` text-underline-offset: 3px; } +.emotion-0::before { + background: linear-gradient(to left, transparent 6px, #016BF8} 6px); +} + +.emotion-0 a { + color: #0C2657; +} + .emotion-0 a:hover { - text-decoration-color: var(--text-decoration-color); + color: #083C90; + text-decoration-color: #083C90; +} + +.emotion-0>svg { + color: #016BF8; +} + +.dark-theme .emotion-0 { + background-color: #0C2657; + color: #C3E7FE; + border-color: #083C90; +} + +.dark-theme .emotion-0::before { + background: linear-gradient(to left, transparent 6px, #0498EC 6px); +} + +.dark-theme .emotion-0 a { + color: #E1F7FF; +} + +.dark-theme .emotion-0 a:hover { + color: #C3E7FE; + text-decoration-color: #C3E7FE; +} + +.dark-theme .emotion-0>svg { + color: #0498EC; } .emotion-2 { @@ -146,7 +185,6 @@ exports[`renders a Banner correctly 1`] = `