Replace all Menu to Menu2

Need the default unmountOnClose so don't need the :has() hack
cheeaun · Nov 18, 2023 · 85bdaac · 85bdaac
1 parent d0e0248
commit 85bdaac
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 28 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1577,7 +1577,7 @@ body > .szh-menu-container {
   position: fixed !important;
   z-index: 10;
 }
-.szh-menu-container:has(.szh-menu--state-open) {
+.szh-menu-container:not(:empty) {
   inset: 0;
   inset: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
@@ -29,6 +29,7 @@ import Icon from './icon';
 import Link from './link';
 import ListAddEdit from './list-add-edit';
 import Loader from './loader';
+import Menu2 from './menu2';
 import MenuConfirm from './menu-confirm';
 import Modal from './modal';
 import TranslationBlock from './translation-block';
@@ -906,7 +907,6 @@ function RelatedActions({
   }, [info, isSelf]);
 
   const loading = relationshipUIState === 'loading';
-  const menuInstanceRef = useRef(null);
 
   const [showTranslatedBio, setShowTranslatedBio] = useState(false);
   const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
@@ -947,8 +947,7 @@ function RelatedActions({
               <span>{privateNote}</span>
             </button>
           )}
-          <Menu
-            instanceRef={menuInstanceRef}
+          <Menu2
             portal={{
               target: document.body,
             }}
@@ -957,16 +956,10 @@ function RelatedActions({
                 // Higher than the backdrop
                 zIndex: 1001,
               },
-              onClick: (e) => {
-                if (e.target === e.currentTarget) {
-                  menuInstanceRef.current?.closeMenu?.();
-                }
-              },
             }}
             align="center"
             position="anchor"
             overflow="auto"
-            boundingBoxPadding="8 8 8 8"
             menuButton={
               <button
                 type="button"
@@ -1215,7 +1208,7 @@ function RelatedActions({
               </MenuItem> */}
               </>
             )}
-          </Menu>
+          </Menu2>
           {!relationship && relationshipUIState === 'loading' && (
             <Loader abrupt />
           )}

diff --git a/src/components/media-alt-modal.jsx b/src/components/media-alt-modal.jsx
@@ -7,6 +7,7 @@ import localeMatch from '../utils/locale-match';
 import states from '../utils/states';
 
 import Icon from './icon';
+import Menu2 from './menu2';
 import TranslationBlock from './translation-block';
 
 export default function MediaAltModal({ alt, lang, onClose }) {
@@ -33,7 +34,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
       <header class="header-grid">
         <h2>Media description</h2>
         <div class="header-side">
-          <Menu
+          <Menu2
             align="end"
             menuButton={
               <button type="button" class="plain4">
@@ -50,7 +51,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
               <Icon icon="translate" />
               <span>Translate</span>
             </MenuItem>
-          </Menu>
+          </Menu2>
         </div>
       </header>
       <main lang={lang} dir="auto">

diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
@@ -15,6 +15,7 @@ import states from '../utils/states';
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
+import Menu2 from './menu2';
 import MenuLink from './menu-link';
 
 function MediaModal({
@@ -259,11 +260,10 @@ function MediaModal({
           <span />
         )}
         <span>
-          <Menu
+          <Menu2
             overflow="auto"
             align="end"
             position="anchor"
-            boundingBoxPadding="8 8 8 8"
             gap={4}
             menuClassName="glass-menu"
             menuButton={
@@ -284,7 +284,7 @@ function MediaModal({
               <Icon icon="popout" />
               <span>Open original media</span>
             </MenuLink>
-          </Menu>{' '}
+          </Menu2>{' '}
           <Link
             to={`${instance ? `/${instance}` : ''}/s/${statusID}${
               window.matchMedia('(min-width: calc(40em + 350px))').matches

diff --git a/src/components/menu2.jsx b/src/components/menu2.jsx
@@ -6,13 +6,15 @@ import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 
 // It's like Menu but with sensible defaults, bug fixes and improvements.
 function Menu2(props) {
-  const { containerProps } = props;
+  const { containerProps, instanceRef: _instanceRef } = props;
   const size = useWindowSize();
-  const instanceRef = useRef();
+  const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
+
   return (
     <Menu
       boundingBoxPadding={safeBoundingBoxPadding()}
       repositionFlag={`${size.width}x${size.height}`}
+      unmountOnClose
       {...props}
       instanceRef={instanceRef}
       containerProps={{

diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
@@ -14,6 +14,7 @@ import states from '../utils/states';
 import AsyncText from './AsyncText';
 import Icon from './icon';
 import Link from './link';
+import Menu2 from './menu2';
 import MenuLink from './menu-link';
 
 function Shortcuts() {
@@ -139,11 +140,10 @@ function Shortcuts() {
           </ul>
         </nav>
       ) : (
-        <Menu
+        <Menu2
           instanceRef={menuRef}
           overflow="auto"
           viewScroll="close"
-          boundingBoxPadding="8 8 8 8"
           menuClassName="glass-menu shortcuts-menu"
           gap={8}
           position="anchor"
@@ -195,7 +195,7 @@ function Shortcuts() {
               </MenuLink>
             );
           })}
-        </Menu>
+        </Menu2>
       )}
     </div>
   );

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -28,6 +28,7 @@ import { snapshot } from 'valtio/vanilla';
 import AccountBlock from '../components/account-block';
 import EmojiText from '../components/emoji-text';
 import Loader from '../components/loader';
+import Menu2 from '../components/menu2';
 import MenuConfirm from '../components/menu-confirm';
 import Modal from '../components/modal';
 import NameText from '../components/name-text';
@@ -1629,7 +1630,7 @@ function Status({
                   onClick={bookmarkStatus}
                 />
               </div>
-              <Menu
+              <Menu2
                 portal={{
                   target:
                     document.querySelector('.status-deck') || document.body,
@@ -1638,7 +1639,6 @@ function Status({
                 gap={4}
                 overflow="auto"
                 viewScroll="close"
-                boundingBoxPadding="8 8 8 8"
                 menuButton={
                   <div class="action">
                     <button
@@ -1652,7 +1652,7 @@ function Status({
                 }
               >
                 {StatusMenuItems}
-              </Menu>
+              </Menu2>
             </div>
           </>
         )}

diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
@@ -7,6 +7,7 @@ import { useReducer } from 'preact/hooks';
 import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import Link from '../components/link';
+import Menu2 from '../components/menu2';
 import MenuConfirm from '../components/menu-confirm';
 import NameText from '../components/name-text';
 import { api } from '../utils/api';
@@ -92,7 +93,7 @@ function Accounts({ onClose }) {
                         <span class="tag">Default</span>{' '}
                       </>
                     )}
-                    <Menu
+                    <Menu2
                       align="end"
                       menuButton={
                         <button
@@ -150,7 +151,7 @@ function Accounts({ onClose }) {
                         <Icon icon="exit" />
                         <span>Log out…</span>
                       </MenuConfirm>
-                    </Menu>
+                    </Menu2>
                   </div>
                 </li>
               );

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
@@ -23,6 +23,7 @@ import Icon from '../components/icon';
 import Link from '../components/link';
 import Loader from '../components/loader';
 import MediaModal from '../components/media-modal';
+import Menu2 from '../components/menu2';
 import NameText from '../components/name-text';
 import RelativeTime from '../components/relative-time';
 import Status from '../components/status';
@@ -1034,7 +1035,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             >
               <Icon icon="layout4" size="l" />
             </button>
-            <Menu
+            <Menu2
               align="end"
               portal={{
                 // Need this, else the menu click will cause scroll jump
@@ -1114,7 +1115,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                   Switch to post's instance (<b>{postInstance}</b>)
                 </small>
               </MenuItem>
-            </Menu>
+            </Menu2>
             <Link class="button plain deck-close" to={closeLink}>
               <Icon icon="x" size="xl" />
             </Link>