Merge branch 'main' of github.com:nextui-org/nextui into canary

apps/docs/components/docs/components/codeblock.tsx

@@ -99,6 +99,10 @@ const CodeBlockHighlight = ({
       ref={intersectionRef}
       style={{
         height: isVisible ? "auto" : `${height}px`,
+        // due to display: contents on the scrollable child element, this div will also scroll
+        // this causes the intersection observer to trigger if scrolled far enough horizontally
+        // set the width to fit-content to prevent this div from going off screen
+        width: "fit-content",
       }}
     >
       {isVisible ? (

apps/docs/components/docs/sidebar.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import {FC, useEffect, useState} from "react";
+import {FC, useEffect, useState, useRef, useMemo, useLayoutEffect} from "react";
 import {usePostHog} from "posthog-js/react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
 import {CollectionBase, Expandable, MultipleSelection, Node, ItemProps} from "@react-types/shared";
 import {BaseItem} from "@nextui-org/aria-utils";
-import React, {useRef, useMemo} from "react";
 import {useFocusRing} from "@react-aria/focus";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {useSelectableCollection} from "@react-aria/selection";
 import {usePress} from "@react-aria/interactions";
-import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, debounce, isEmpty} from "@nextui-org/shared-utils";
 import {
   SpacerProps,
   Spacer,
@@ -19,7 +18,6 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";
@@ -243,6 +241,8 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
 
   let ref = useRef<HTMLDivElement>(null);
 
+  const scrollViewPortRef = useRef<HTMLDivElement>(null);
+
   let keyboardDelegate = useMemo(
     // @ts-expect-error
     () => new TreeKeyboardDelegate(state.collection, state.disabledKeys),
@@ -255,12 +255,36 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
     keyboardDelegate,
   });
 
+  /*  Handle scroll preservation */
+  useLayoutEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedPosition = sessionStorage.getItem("docsSidebarScrollPosition");
+
+      if (savedPosition && scrollViewPortRef.current) {
+        scrollViewPortRef.current.scrollTop = Number(savedPosition);
+      }
+    }
+  }, []);
+
+  const handleScroll = () => {
+    if (typeof window !== "undefined" && scrollViewPortRef.current) {
+      sessionStorage.setItem(
+        "docsSidebarScrollPosition",
+        scrollViewPortRef.current.scrollTop.toString(),
+      );
+    }
+  };
+
+  const debouncedHandleScroll = debounce(handleScroll, 200);
+
   return (
     <ScrollArea
       ref={ref}
       className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
+      scrollViewPortRef={scrollViewPortRef}
+      onScroll={debouncedHandleScroll}
     >
       {[...state.collection].map((item) => {
         if (item.type === "section") {
@@ -317,7 +341,7 @@ export const DocsSidebar: FC<DocsSidebarProps> = ({routes, slug, tag, className}
         )}
       </Tree>
     );
-  }, [routes]);
+  }, [routes, slug, tag]);
 
   return (
     <div

apps/docs/components/scroll-area.tsx

@@ -6,15 +6,23 @@ import {cn} from "@nextui-org/react";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    scrollViewPortRef?: React.RefObject<HTMLDivElement>;
+  }
 >(({className, children, ...props}, ref) => {
+  const {onScroll, scrollViewPortRef, ...restProps} = props;
+
   return (
     <ScrollAreaPrimitive.Root
       ref={ref}
       className={cn("relative overflow-hidden", className)}
-      {...props}
+      {...restProps}
     >
-      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-28">
+      <ScrollAreaPrimitive.Viewport
+        ref={scrollViewPortRef}
+        className="h-full w-full rounded-[inherit] pb-28"
+        onScroll={onScroll}
+      >
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />

apps/docs/content/blog/v2.6.0.mdx

@@ -87,7 +87,7 @@ NextUI version **v2.6.0** comes with 4 new components **Form**, **Drawer**, **In
 
 ## Form Component
 
-Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/forms) component provides accessible form handling with built-in submission, validation and error management.
+Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/form) component provides accessible form handling with built-in submission, validation and error management.
 
 <Spacer y={4} />
 
@@ -313,7 +313,7 @@ function Example() {
 - **Form Libraries Support**: Supports popular form libraries like `react-hook-form` and `formik`
 - **Accessibility**: Built-in accessibility features including ARIA attributes and keyboard navigation
 
-Check out our [Forms documentation](/docs/components/forms) for a deep dive into all the features and capabilities.
+Check out our [Forms documentation](/docs/components/form) for a deep dive into all the features and capabilities.
 
 <Spacer y={4} />
 
@@ -566,7 +566,7 @@ declare module "@react-types/shared" {
 - **Improved Base Path Support**: Better handling of base paths through the new `useHref` prop in `NextUIProvider`
 - **Framework-specific Optimizations**: Built-in support for Next.js (both App and Pages Router), React Router, Remix, and TanStack Router
 
-See the [Routing documentation](/docs/guides/routing) for more details.
+See the [Routing documentation](/docs/guide/routing) for more details.
 
 <Spacer y={4} />
 

apps/docs/content/docs/components/form.mdx

@@ -67,7 +67,7 @@ The `onSubmit` event will be triggered when a user submits the form with the `En
 
 <CodeDemo title="Validation" files={formContent.serverValidation} />
 
-See the [Forms](/docs/guides/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.
+See the [Forms](/docs/guide/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.
 
 
 ### Validation Behavior