Merge branch 'nextui-org:canary' into canary

.changeset/chilly-rules-marry.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+label placement with file input type (#4364)

.changeset/clever-teachers-live.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/shared-utils": patch
+---
+
+fix process is not defined

.changeset/violet-tools-refuse.md → .changeset/famous-avocados-run.md

@@ -2,7 +2,6 @@
 "@nextui-org/checkbox": patch
 "@nextui-org/switch": patch
 "@nextui-org/radio": patch
-"@nextui-org/theme": patch
 ---
 
-Fix #4252 #4260 interactive elements were not working properly
+bump `@nextui-org/theme` in peerDependencies

.changeset/many-kiwis-pretend.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+Fix #4382 `hideIconWrapper` property wasn't removing the borded on `Alert` component

.changeset/old-peas-cheat.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+menu base use overflow-clip to fix listbox section sticky (#4335)

.changeset/polite-dingos-call.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+fix alert slots & variantProps import (#4336)

.changeset/silent-jars-grow.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input-otp": patch
+---
+
+Change ensures that the input value does not accept any disallowed characters when the value prop contains them (#4329)

.changeset/twelve-ducks-thank.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/system-rsc": patch
+---
+
+Fix data type returned by the extendVariants function (#4269)

.changeset/two-ghosts-search.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+replace decrepate onClick in Alert

.github/workflows/release.yaml

@@ -27,9 +27,18 @@ jobs:
         run: pnpm test
 
       - name: Build
-        run: pnpm build
+        id: build
+        continue-on-error: false
+        # Custom turbo build failure information
+        run: |
+          pnpm build || {
+            echo "Turbo build failed with exit code $?"
+            exit 1
+          }
 
       - name: Create Release Pull Request or Publish to NPM
+        # Run only if the build is successful
+        if: steps.build.outcome == 'success'
         id: changesets
         uses: changesets/action@v1
         with:
@@ -43,7 +52,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Create canary release
-        if: steps.changesets.outputs.published != 'true'
+        if: steps.build.outcome == 'success' && steps.changesets.outputs.published != 'true'
         timeout-minutes: 15
         run: |
           git checkout canary

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -83,6 +83,7 @@ export default async function DocPage({params}: DocPageProps) {
   if (!doc) {
     notFound();
   }
+
   const editUrl = `${GITHUB_URL}/${REPO_NAME}/edit/${TAG}${CONTENT_PATH}${currentRoute?.path}`;
 
   return (

apps/docs/app/providers.tsx

@@ -18,26 +18,27 @@ export interface ProvidersProps {
   themeProps?: ThemeProviderProps;
 }
 
-export function Providers({children, themeProps}: ProvidersProps) {
-  const router = useRouter();
-
-  const ProviderWrapper = ({children}: {children: ReactNode}) => {
-    useEffect(() => {
-      if (typeof window !== "undefined" && __PROD__) {
-        posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-          api_host: "/ingest",
-          person_profiles: "identified_only",
-          ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-        });
-      }
-    }, []);
-
-    if (__PROD__) {
-      return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+const ProviderWrapper = ({children}: {children: ReactNode}) => {
+  useEffect(() => {
+    // Initialize PostHog only once when the app starts
+    if (typeof window !== "undefined" && __PROD__ && !posthog.isFeatureEnabled("capture")) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+        api_host: "/ingest",
+        person_profiles: "identified_only",
+        ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      });
     }
+  }, []);
+
+  if (__PROD__) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  }
 
-    return children;
-  };
+  return children;
+};
+
+export function Providers({children, themeProps}: ProvidersProps) {
+  const router = useRouter();
 
   return (
     <ProviderWrapper>

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/components/package-managers.tsx

@@ -99,10 +99,10 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2 text-small" color="warning">
+        <Blockquote className="my-2 text-base md:text-small" color="warning">
           The above command is for individual installation only. You may skip this step if{" "}
-          <Code className="px-1 py-0.5 text-tiny font-mono">@nextui-org/react</Code> is already
-          installed globally.
+          <Code className="px-1 py-0.5 text-small md:text-tiny font-mono">@nextui-org/react</Code>{" "}
+          is already installed globally.
         </Blockquote>
       )}
     </>

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/mdx-components.tsx

@@ -205,9 +205,20 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
   );
 };
 
-const InlineCodeChip = ({children}: {children?: React.ReactNode}) => {
+const InlineCodeChip = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
   return (
-    <InlineCode className="before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5">
+    <InlineCode
+      className={clsx(
+        "before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5",
+        className,
+      )}
+    >
       {children}
     </InlineCode>
   );
@@ -218,6 +229,7 @@ interface APITableProps {
     attribute: string;
     type: string;
     description: string;
+    deprecated?: boolean;
     default?: string;
   }[];
 }
@@ -237,7 +249,9 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
           {data.map((item, index) => (
             <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
               <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
-                <InlineCodeChip>{item.attribute}</InlineCodeChip>
+                <InlineCodeChip className={item.deprecated ? "line-through" : ""}>
+                  {item.attribute}
+                </InlineCodeChip>
                 {item.description && (
                   <>
                     {/* Desktop tooltip */}