@myst-theme/site 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -25,11 +25,11 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^1.2.0",
-    "@myst-theme/diagrams": "^1.2.0",
-    "@myst-theme/frontmatter": "^1.2.0",
-    "@myst-theme/providers": "^1.2.0",
-    "@myst-theme/search": "^1.2.0",
+    "@myst-theme/common": "^1.3.0",
+    "@myst-theme/diagrams": "^1.3.0",
+    "@myst-theme/frontmatter": "^1.3.0",
+    "@myst-theme/providers": "^1.3.0",
+    "@myst-theme/search": "^1.3.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
@@ -37,9 +37,9 @@
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.8.1",
     "myst-config": "^1.7.9",
-    "myst-demo": "^1.2.0",
+    "myst-demo": "^1.3.0",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^1.2.0",
+    "myst-to-react": "^1.3.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Keywords.tsx

@@ -12,7 +12,7 @@ export function Keywords({
 }) {
   if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
-    <div className={classNames('myst-keywords mb-10 group', className)}>
+    <div id="myst-keywords" className={classNames('myst-keywords mb-10 group', className)}>
       <span className="myst-keywords-label mr-2 font-semibold">Keywords:</span>
       <span className="myst-keywords-list">
         {keywords.map((k, i) => (
@@ -26,7 +26,7 @@ export function Keywords({
           </span>
         ))}
       </span>
-      <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
+      <HashLink id="myst-keywords" title="Link to Keywords" hover className="ml-2" />
     </div>
   );
 }

package/src/components/Navigation/Search.tsx

@@ -245,13 +245,13 @@ function SearchResultItem({
     />
   );
 
-  // Render the subtitle i.e. file name
-  let subtitleRenderer;
+  // Render the context i.e. file name
+  let contextRenderer;
   if (result.type === 'lvl1') {
-    subtitleRenderer = undefined;
+    contextRenderer = undefined;
   } else {
-    const subtitle = result.hierarchy.lvl1!;
-    subtitleRenderer = <MarkedText text={subtitle} matches={matches} className="text-xs" />;
+    const contextName = result.hierarchy.lvl1!;
+    contextRenderer = <MarkedText text={contextName} matches={matches} className="text-xs" />;
   }
 
   const enterIconRenderer = (
@@ -268,8 +268,8 @@ function SearchResultItem({
       <div className="flex flex-row h-11">
         {iconRenderer}
         <div className="flex flex-col justify-center truncate grow">
+          {contextRenderer}
           {titleRenderer}
-          {subtitleRenderer}
         </div>
         {enterIconRenderer}
       </div>
@@ -527,6 +527,7 @@ function SearchForm({
             id={searchInputID}
             aria-labelledby={searchLabelID}
             aria-controls={searchListID}
+            aria-expanded={!!searchResults}
             placeholder="Search"
             type="search"
             required
@@ -557,9 +558,15 @@ const SearchPlaceholderButton = forwardRef<
   HTMLButtonElement,
   SearchPlaceholderButtonProps & Dialog.DialogTriggerProps
 >(({ className, disabled, ...props }, ref) => {
+  // Here we remove aria-controls from props so we can *decide* whether to insert it later
+  // This is because radix has a bug where it'll try pointing to a non-existent element
+  // if the dialog isn't open, so that's the logic we test below.
+  // ref: https://github.com/radix-ui/primitives/issues/3560
+  const { 'aria-controls': ariaControls, ...restProps } = props;
   return (
     <button
-      {...props}
+      {...restProps}
+      aria-controls={restProps['aria-expanded'] ? ariaControls : undefined}
       className={classNames(
         'myst-search-bar',
         className,

package/src/components/Navigation/ThemeButton.tsx

@@ -1,6 +1,5 @@
 import { useThemeSwitcher } from '@myst-theme/providers';
-import { MoonIcon } from '@heroicons/react/24/solid';
-import { SunIcon } from '@heroicons/react/24/outline';
+import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 
 export function ThemeButton({ className = 'w-10 h-10 mx-3' }: { className?: string }) {
@@ -8,15 +7,15 @@ export function ThemeButton({ className = 'w-10 h-10 mx-3' }: { className?: stri
   return (
     <button
       className={classNames(
-        'myst-theme-button theme rounded-full aspect-square border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
+        'myst-theme-button theme shrink-0 rounded-full border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
         className,
       )}
       title={`Toggle theme between light and dark mode`}
       aria-label={`Toggle theme between light and dark mode`}
       onClick={nextTheme}
     >
-      <MoonIcon className="myst-theme-moon-icon h-full w-full p-0.5 hidden dark:block" />
-      <SunIcon className="myst-theme-sun-icon h-full w-full p-0.5 dark:hidden" />
+      <MoonIcon className="myst-theme-moon-icon h-full w-full p-[18%] hidden dark:block" />
+      <SunIcon className="myst-theme-sun-icon h-full w-full p-[18%] dark:hidden" />
     </button>
   );
 }

package/src/components/Navigation/TopNav.tsx

@@ -128,8 +128,12 @@ export function TopNav({
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
   const { logo, logo_dark, logo_text, logo_url, logo_alt } = config?.options ?? {};
+  // TODO: when the nav wraps to multiple lines the header grows past 60px, but
+  //   there are downstream consumers of DEFAULT_NAV_HEIGHT and this will
+  //   cause a mismatch if the navbar grows. Here we set it to `min-h` to let
+  //   it grow, but we'll need to revisit downstream height consumers eventually.
   return (
-    <div className="myst-top-nav bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-full top-0 z-30 h-[60px]">
+    <div className="myst-top-nav bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-full top-0 z-30 min-h-[60px]">
       <nav className="myst-top-nav-bar flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
         <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center shrink-0">
           {
@@ -165,7 +169,7 @@ export function TopNav({
           {/* Search bar */}
           {!hideSearch && <Search />}
           {/* Light/Dark theme button */}
-          <ThemeButton className="w-10 h-10 ml-3" />
+          <ThemeButton className="w-8 h-8 ml-3" />
           {/* Custom part at end of navbar. It is `hidden` up until xl size since it will be in the sidebar drawer up to that point */}
           {navbarEnd && (
             <div className="article myst-navbar-end hidden xl:flex items-center ml-3 [&>*]:m-0">