chore: bump react-medium-image-zoom (#8064)

project-words.txt

@@ -284,6 +284,7 @@ reponame
 requireindex
 retrocompatibility
 retrocompatible
+rmiz
 roadmap
 rocketvalidator
 rtcts

website/docs/advanced/architecture.md

@@ -7,7 +7,7 @@ description: How Docusaurus works to build your app
 ```mdx-code-block
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Zoom from '@site/src/components/Zoom';
+import Zoom from 'react-medium-image-zoom';
 ```
 
 <Zoom>

website/package.json

@@ -59,7 +59,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-lite-youtube-embed": "^2.3.1",
-    "react-medium-image-zoom": "^4.4.3",
+    "react-medium-image-zoom": "^5.0.2",
     "react-popper": "^2.3.0",
     "rehype-katex": "^6.0.2",
     "remark-math": "^3.0.1",

website/src/components/Zoom/index.tsx

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import {useColorMode} from '@docusaurus/theme-common';
-import BasicZoom from 'react-medium-image-zoom';
-import 'react-medium-image-zoom/dist/styles.css';
-
-export default function Zoom({
-  children,
-}: {
-  children: React.ReactNode;
-}): JSX.Element {
-  const {colorMode} = useColorMode();
-  return (
-    <BasicZoom
-      overlayBgColorEnd={
-        colorMode === 'dark'
-          ? 'rgba(0, 0, 0, 0.95)'
-          : 'rgba(255, 255, 255, 0.95)'
-      }>
-      {children}
-    </BasicZoom>
-  );
-}

website/src/css/custom.css

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import 'react-medium-image-zoom/dist/styles.css';
+
 :root {
   /*
   See css var + hsl color palette technique:
@@ -220,3 +222,11 @@ div[class^='announcementBar_'] {
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
 }
+
+[data-rmiz-modal-overlay='visible'] {
+  background-color: rgba(255 255 255 / 95%);
+}
+
+[data-theme='dark'] [data-rmiz-modal-overlay='visible'] {
+  background-color: rgba(0 0 0 / 95%);
+}

website/testCSSOrder.mjs

@@ -31,7 +31,6 @@ const EXPECTED_CSS_MARKERS = [
   // See https://github.com/facebook/docusaurus/pull/6222
   '.markdown>h2',
   '.button--outline.button--active',
-  '.DocSearch-Hit-content-wrapper',
   '--ifm-color-scheme:light',
   '.col[class*=col--]',
   '.padding-vert--xl',
@@ -49,6 +48,7 @@ const EXPECTED_CSS_MARKERS = [
 
   // Lazy-loaded lib
   '.DocSearch-Modal',
+  '.DocSearch-Hit-content-wrapper',
 ];
 
 const cssDirName = fileURLToPath(new URL('build/assets/css', import.meta.url));

website/versioned_docs/version-2.0.1/advanced/architecture.md

@@ -7,7 +7,7 @@ description: How Docusaurus works to build your app
 ```mdx-code-block
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Zoom from '@site/src/components/Zoom';
+import Zoom from 'react-medium-image-zoom';
 ```
 
 <Zoom>

website/versioned_docs/version-2.1.0/advanced/architecture.md

@@ -7,7 +7,7 @@ description: How Docusaurus works to build your app
 ```mdx-code-block
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Zoom from '@site/src/components/Zoom';
+import Zoom from 'react-medium-image-zoom';
 ```
 
 <Zoom>

yarn.lock

@@ -7657,11 +7657,6 @@ flux@^4.0.1:
     fbemitter "^3.0.0"
     fbjs "^3.0.1"
 
-focus-options-polyfill@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/focus-options-polyfill/-/focus-options-polyfill-1.5.1.tgz#0f422580d9d1fb65651f2968b547032eb17dab3c"
-  integrity sha512-7yH20IePROHJLLbJvqqtsG420jE6DuukccapiB/WagtUpnc98r9NzHbX5rnjCDgdZqLgcqlzGjn+8l0Zb8Zf9w==
-
 follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.7:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
@@ -12669,13 +12664,10 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-react-medium-image-zoom@^4.4.3:
+react-medium-image-zoom@^5.0.2:
-  version "4.4.3"
+  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-4.4.3.tgz#d5e3074becef7be4bfe35ebcd291eac462093bf5"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-5.0.2.tgz#2ec051205e7bfc53759f8a3a1bfd1c594f96100c"
-  integrity sha512-I928Z6mEMRUup4CPa+XtASiSuFzdVb1ecztXpF7xAJddXv4XZSE4n5gleZNYCn5wEU1LQY5LiN4aNW4KgrOVIA==
+  integrity sha512-DGdsNaixDgXnEFFpCV6YHJYG4VQOvzs3PHS3h+nfIV82GO0cWetXrBQFGA77DMGODe6DuBX2SQPqZAQVKpLdcw==
-  dependencies:
-    focus-options-polyfill "1.5.1"
-    tslib "^2.4.0"
 
 react-popper@^2.3.0:
   version "2.3.0"