@brillout/docpress 0.8.15 → 0.8.16

package/Layout.tsx

@@ -11,7 +11,7 @@ import { EditPageNote } from './components/EditPageNote'
 import { parseTitle } from './parseTitle'
 import { usePageContext, usePageContext2 } from './renderer/usePageContext'
 import { NavSecondaryContent } from './NavSecondaryContent'
-import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal'
+import { closeMenuModalWithDelay, openMenuModal, toggleMenuModal } from './MenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { SearchLink } from './docsearch/SearchLink'
@@ -479,7 +479,7 @@ function MenuLink(props: PropsDiv) {
       }}
       onMouseLeave={() => {
         if (onMouseIgnore) return
-        closeMenuModal()
+        closeMenuModalWithDelay(100)
       }}
       onTouchStart={() => {
         onMouseIgnore = setTimeout(() => {

package/MenuModal.tsx

@@ -2,6 +2,7 @@ export { MenuModal }
 export { toggleMenuModal }
 export { openMenuModal }
 export { closeMenuModal }
+export { closeMenuModalWithDelay }
 
 import React from 'react'
 import { usePageContext } from './renderer/usePageContext'
@@ -12,6 +13,8 @@ import { NavSecondaryContent } from './NavSecondaryContent'
 import { getViewportWidth } from './utils/getViewportWidth'
 import { Style } from './utils/Style'
 
+let closeMenuModalPending: NodeJS.Timeout
+
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
   return (
     <>
@@ -22,7 +25,14 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
         style={{
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
+          /* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh
+           * - Always use `dvh` instead of `vh` once Firefox supports it.
+           * - We use dvh because of mobile: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+          height: 'calc(100dvh - var(--nav-head-height))',
+          /*/
           height: 'calc(100vh - var(--nav-head-height))',
+          maxHeight: 'calc(100dvh - var(--nav-head-height))',
+          //*/
           top: 'var(--nav-head-height)',
           left: 0,
           zIndex: 9999,
@@ -38,7 +48,7 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
             // Place <LinksBottom /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: 'calc(100vh - var(--nav-head-height))',
+            minHeight: 'calc(100dvh - var(--nav-head-height))',
             justifyContent: 'space-between',
             // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
             container: 'container-viewport / inline-size',
@@ -165,8 +175,12 @@ function findCollapsibleEl(navLink: HTMLElement | undefined) {
   return null
 }
 function openMenuModal() {
+  clearTimeout(closeMenuModalPending)
   document.documentElement.classList.add('menu-modal-show')
 }
 function closeMenuModal() {
   document.documentElement.classList.remove('menu-modal-show')
 }
+function closeMenuModalWithDelay(delay: number) {
+  closeMenuModalPending = setTimeout(closeMenuModal, delay)
+}

package/components/Note.tsx

@@ -93,8 +93,12 @@ function NoteGeneric({
   return (
     <blockquote className={className} style={style}>
       <div style={{ marginBottom: 20 }} />
-      <span style={{ fontFamily: 'emoji' }}>{icon}</span>
-      <span style={{ width: iconMargin ?? undefined, display: 'inline-block' }}></span>{' '}
+      {icon && (
+        <>
+          <span style={{ fontFamily: 'emoji' }}>{icon}</span>
+          <span style={{ width: iconMargin ?? undefined, display: 'inline-block' }}></span>{' '}
+        </>
+      )}
       <div className="blockquote-content">{children}</div>
       <div style={{ marginTop: 20 }} />
     </blockquote>

package/dist/Layout.js

@@ -25,7 +25,7 @@ import { EditPageNote } from './components/EditPageNote';
 import { parseTitle } from './parseTitle';
 import { usePageContext, usePageContext2 } from './renderer/usePageContext';
 import { NavSecondaryContent } from './NavSecondaryContent';
-import { closeMenuModal, openMenuModal, toggleMenuModal } from './MenuModal';
+import { closeMenuModalWithDelay, openMenuModal, toggleMenuModal } from './MenuModal';
 import { MenuModal } from './MenuModal';
 import { autoScrollNav_SSR } from './autoScrollNav';
 import { SearchLink } from './docsearch/SearchLink';
@@ -290,7 +290,7 @@ function MenuLink(props) {
         }, onMouseLeave: function () {
             if (onMouseIgnore)
                 return;
-            closeMenuModal();
+            closeMenuModalWithDelay(100);
         }, onTouchStart: function () {
             onMouseIgnore = setTimeout(function () {
                 onMouseIgnore = undefined;

package/dist/MenuModal.d.ts

@@ -2,6 +2,7 @@ export { MenuModal };
 export { toggleMenuModal };
 export { openMenuModal };
 export { closeMenuModal };
+export { closeMenuModalWithDelay };
 import React from 'react';
 declare function MenuModal({ isTopNav }: {
     isTopNav: boolean;
@@ -9,3 +10,4 @@ declare function MenuModal({ isTopNav }: {
 declare function toggleMenuModal(): void;
 declare function openMenuModal(): void;
 declare function closeMenuModal(): void;
+declare function closeMenuModalWithDelay(delay: number): void;

package/dist/MenuModal.js

@@ -6,6 +6,7 @@ export { MenuModal };
 export { toggleMenuModal };
 export { openMenuModal };
 export { closeMenuModal };
+export { closeMenuModalWithDelay };
 import React from 'react';
 import { usePageContext } from './renderer/usePageContext';
 import { NavigationContent } from './navigation/Navigation';
@@ -14,6 +15,7 @@ import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout';
 import { NavSecondaryContent } from './NavSecondaryContent';
 import { getViewportWidth } from './utils/getViewportWidth';
 import { Style } from './utils/Style';
+var closeMenuModalPending;
 function MenuModal(_a) {
     var isTopNav = _a.isTopNav;
     return (React.createElement(React.Fragment, null,
@@ -21,7 +23,14 @@ function MenuModal(_a) {
         React.createElement("div", { id: "menu-modal", className: "link-hover-animation add-transition", style: {
                 position: isTopNav ? 'absolute' : 'fixed',
                 width: '100%',
+                /* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh
+                 * - Always use `dvh` instead of `vh` once Firefox supports it.
+                 * - We use dvh because of mobile: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
+                height: 'calc(100dvh - var(--nav-head-height))',
+                /*/
                 height: 'calc(100vh - var(--nav-head-height))',
+                maxHeight: 'calc(100dvh - var(--nav-head-height))',
+                //*/
                 top: 'var(--nav-head-height)',
                 left: 0,
                 zIndex: 9999,
@@ -33,7 +42,7 @@ function MenuModal(_a) {
                     // Place <LinksBottom /> to the bottom
                     display: 'flex',
                     flexDirection: 'column',
-                    minHeight: 'calc(100vh - var(--nav-head-height))',
+                    minHeight: 'calc(100dvh - var(--nav-head-height))',
                     justifyContent: 'space-between',
                     // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
                     container: 'container-viewport / inline-size',
@@ -99,9 +108,13 @@ function findCollapsibleEl(navLink) {
     return null;
 }
 function openMenuModal() {
+    clearTimeout(closeMenuModalPending);
     document.documentElement.classList.add('menu-modal-show');
 }
 function closeMenuModal() {
     document.documentElement.classList.remove('menu-modal-show');
 }
+function closeMenuModalWithDelay(delay) {
+    closeMenuModalPending = setTimeout(closeMenuModal, delay);
+}
 var templateObject_1;

package/dist/components/Note.js

@@ -86,9 +86,10 @@ function NoteGeneric(_a) {
     }
     return (React.createElement("blockquote", { className: className, style: style },
         React.createElement("div", { style: { marginBottom: 20 } }),
-        React.createElement("span", { style: { fontFamily: 'emoji' } }, icon),
-        React.createElement("span", { style: { width: iconMargin !== null && iconMargin !== void 0 ? iconMargin : undefined, display: 'inline-block' } }),
-        ' ',
+        icon && (React.createElement(React.Fragment, null,
+            React.createElement("span", { style: { fontFamily: 'emoji' } }, icon),
+            React.createElement("span", { style: { width: iconMargin !== null && iconMargin !== void 0 ? iconMargin : undefined, display: 'inline-block' } }),
+            ' ')),
         React.createElement("div", { className: "blockquote-content" }, children),
         React.createElement("div", { style: { marginTop: 20 } })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",