fumadocs-core 11.2.1 → 11.3.0

package/dist/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ReactNode, ElementType, ReactElement, ComponentPropsWithoutRef } from 'react';
 
 interface SidebarProviderProps {
     open?: boolean;
@@ -6,14 +6,21 @@ interface SidebarProviderProps {
     children: ReactNode;
 }
 declare function SidebarProvider(props: SidebarProviderProps): React.ReactElement;
-type WithAs<T extends ElementType, Extend = object> = Omit<ComponentPropsWithoutRef<T>, 'as' | keyof Extend> & Extend & {
+type AsProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'as'> & {
     as?: T;
 };
-type SidebarTriggerProps<T extends ElementType> = WithAs<T>;
-declare function SidebarTrigger<T extends ElementType = 'button'>({ as, ...props }: SidebarTriggerProps<T>): React.ReactElement;
-type SidebarContentProps<T extends ElementType> = WithAs<T, {
+type SidebarTriggerProps<T extends ElementType> = AsProps<T>;
+declare function SidebarTrigger<T extends ElementType = 'button'>({ as, ...props }: SidebarTriggerProps<T>): ReactElement;
+type SidebarContentProps<T extends ElementType> = AsProps<T> & {
+    /**
+     * @deprecated Use `blockScrollingWidth` instead
+     */
     minWidth?: number;
-}>;
-declare function SidebarList<T extends ElementType = 'aside'>({ as, minWidth, ...props }: SidebarContentProps<T>): React.ReactElement;
+    /**
+     * Disable scroll blocking when the viewport width is larger than a certain number (in pixels)
+     */
+    blockScrollingWidth?: number;
+};
+declare function SidebarList<T extends ElementType = 'aside'>({ as, minWidth, blockScrollingWidth, ...props }: SidebarContentProps<T>): ReactElement;
 
 export { type SidebarContentProps, SidebarList, SidebarProvider, type SidebarProviderProps, SidebarTrigger, type SidebarTriggerProps };

package/dist/sidebar.js

@@ -6,7 +6,13 @@ import {
 
 // src/sidebar.tsx
 import { usePathname } from "next/navigation";
-import { createContext, useContext, useEffect, useState } from "react";
+import {
+  useCallback,
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
 import { RemoveScroll } from "react-remove-scroll";
 import { jsx } from "react/jsx-runtime";
 var SidebarContext = createContext(void 0);
@@ -26,7 +32,7 @@ function SidebarProvider(props) {
   const pathname = usePathname();
   useEffect(() => {
     setOpen(false);
-  }, [pathname]);
+  }, [pathname, setOpen]);
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: [open, setOpen], children: props.children });
 }
 function SidebarTrigger(_a) {
@@ -40,44 +46,47 @@ function SidebarTrigger(_a) {
   return /* @__PURE__ */ jsx(
     As,
     __spreadValues({
+      "aria-label": "Toggle Sidebar",
       "data-open": open,
-      onClick: () => {
+      onClick: useCallback(() => {
         setOpen(!open);
-      }
+      }, [open, setOpen])
     }, props)
   );
 }
 function SidebarList(_a) {
   var _b = _a, {
     as,
-    minWidth
+    minWidth,
+    blockScrollingWidth = minWidth
   } = _b, props = __objRest(_b, [
     "as",
-    "minWidth"
+    "minWidth",
+    "blockScrollingWidth"
   ]);
   const [open] = useSidebarContext();
-  const [isMobileLayout, setIsMobileLayout] = useState(false);
+  const [isBlocking, setIsBlocking] = useState(false);
   useEffect(() => {
-    if (minWidth === void 0)
+    if (!blockScrollingWidth)
       return;
     const mediaQueryList = window.matchMedia(
-      `(min-width: ${minWidth.toString()}px)`
+      `(min-width: ${blockScrollingWidth.toString()}px)`
     );
     const handleChange = () => {
-      setIsMobileLayout(!mediaQueryList.matches);
+      setIsBlocking(!mediaQueryList.matches);
     };
     handleChange();
     mediaQueryList.addEventListener("change", handleChange);
     return () => {
       mediaQueryList.removeEventListener("change", handleChange);
     };
-  }, [minWidth]);
+  }, [blockScrollingWidth]);
   return /* @__PURE__ */ jsx(
     RemoveScroll,
     __spreadProps(__spreadValues({
       as: as != null ? as : "aside",
-      "data-open": isMobileLayout ? open : false,
-      enabled: isMobileLayout ? open : false
+      "data-open": open,
+      enabled: Boolean(isBlocking && open)
     }, props), {
       children: props.children
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "11.2.1",
+  "version": "11.3.0",
   "description": "The library for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -113,8 +113,8 @@
   ],
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@shikijs/rehype": "^1.6.0",
-    "@shikijs/transformers": "^1.6.0",
+    "@shikijs/rehype": "^1.6.1",
+    "@shikijs/transformers": "^1.6.1",
     "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
     "hast-util-to-estree": "^3.1.0",
@@ -125,7 +125,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^1.6.0",
+    "shiki": "^1.6.1",
     "swr": "^2.2.5",
     "unist-util-visit": "^5.0.0"
   },
@@ -138,7 +138,7 @@
     "@types/mdast": "^4.0.3",
     "@types/negotiator": "^0.6.3",
     "@types/node": "18.17.5",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.23.3",
     "next": "^14.2.3",