UI: Support preloading search dialog

.changeset/mighty-ways-search.md

@@ -0,0 +1,5 @@
+---
+'next-docs-ui': patch
+---
+
+Support preloading Search Dialog

apps/docs/app/provider.tsx

@@ -1,8 +1,12 @@
 'use client';
 
 import { RootProvider } from 'next-docs-ui/provider';
+import dynamic from 'next/dynamic';
 import type { ReactNode } from 'react';
-import SearchDialog from '@/components/search';
+
+const SearchDialog = dynamic(() => import('@/components/search'), {
+  ssr: false,
+});
 
 export function Provider({ children }: { children: ReactNode }): JSX.Element {
   return (

packages/ui/src/components/accordion.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react';
 import { cn } from '@/utils/cn';
 import { useCopyButton } from '@/utils/use-copy-button';
-import { buttonVariants } from '@/theme/shared';
+import { buttonVariants } from '@/theme/variants';
 
 export const Accordions = forwardRef<
   HTMLDivElement,

packages/ui/src/components/roll-button.tsx

@@ -3,7 +3,7 @@
 import { ChevronUpIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/theme/shared';
+import { buttonVariants } from '@/theme/variants';
 
 interface RollButtonProps {
   /**

packages/ui/src/components/ui/command.tsx

@@ -3,7 +3,7 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/theme/shared';
+import { buttonVariants } from '@/theme/variants';
 import {
   Drawer as Dialog,
   DrawerClose as DialogClose,

packages/ui/src/components/ui/drawer.tsx

@@ -4,6 +4,8 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cn } from '@/utils/cn';
 
+const TIMING_FUNCTION = 'cubic-bezier(0.32, 0.72, 0, 1)';
+
 const Context = React.createContext<{
   isOpen: boolean;
   setIsOpen: (v: boolean) => void;
@@ -84,7 +86,7 @@ const DrawerContent = React.forwardRef<
 
     isDraggingRef.current = true;
 
-    contentRef.current.style.setProperty('transition', 'none');
+    setTransition(false);
 
     window.addEventListener(
       'touchend',
@@ -120,15 +122,22 @@ const DrawerContent = React.forwardRef<
     setOffset(Math.max(-50, getOffset() + e.movementY));
   };
 
-  const onReset = (): void => {
-    if (contentRef.current) {
-      contentRef.current.style.setProperty(
-        'transition',
-        `transform 0.5s cubic-bezier(${[0.32, 0.72, 0, 1].join(',')})`,
-      );
+  const setTransition = (enabled: boolean): void => {
+    contentRef.current?.style.setProperty(
+      'transition',
+      enabled ? `transform 0.5s ${TIMING_FUNCTION}` : 'none',
+    );
 
-      setOffset(0);
-    }
+    overlayRef.current?.style.setProperty(
+      'transition',
+      enabled ? `opacity 0.5s ${TIMING_FUNCTION}` : 'none',
+    );
+  };
+
+  const onReset = (): void => {
+    if (!contentRef.current) return;
+    setTransition(true);
+    setOffset(0);
   };
 
   const shouldDrag = (
@@ -175,15 +184,29 @@ const DrawerContent = React.forwardRef<
 
   return (
     <DrawerPortal>
+      <style>
+        {`
+        [docs-ui-drawer]::after {
+          content: '';
+          position: absolute;
+          top: 100%;
+          background: inherit;
+          background-color: inherit;
+          left: 0;
+          right: 0;
+          height: 200%;
+        }`}
+      </style>
       <DrawerOverlay
         ref={overlayRef}
         onMouseUp={onRelease}
         className="data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
       />
       <DialogPrimitive.Content
+        docs-ui-drawer=""
         ref={mergedRefs}
         style={{
-          transform: 'translateY(var(--offset-y))',
+          transform: `translateY(var(--offset-y))`,
         }}
         onPointerDown={onPress}
         onPointerUp={onRelease}

packages/ui/src/contexts/search.tsx

@@ -6,9 +6,17 @@ import type { SharedProps } from '../components/dialog/search';
 
 const DefaultSearchDialog = dynamic(
   () => import('../components/dialog/search-default'),
+  { ssr: false },
 );
 
 export interface SearchProviderProps {
+  /**
+   * Preload search dialog before opening it
+   *
+   * @defaultValue `true`
+   */
+  preload?: boolean;
+
   links?: DefaultSearchDialogProps['links'];
 
   /**
@@ -33,9 +41,10 @@ export function useSearchContext(): SearchContextType {
 export function SearchProvider({
   SearchDialog,
   children,
+  preload = true,
   ...props
 }: SearchProviderProps): JSX.Element {
-  const [isOpen, setIsOpen] = useState<boolean>();
+  const [isOpen, setIsOpen] = useState(preload ? false : undefined);
 
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {

packages/ui/src/mdx/pre.tsx

@@ -5,7 +5,7 @@ import { forwardRef, useCallback, useRef } from 'react';
 import { cn } from '@/utils/cn';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useCopyButton } from '@/utils/use-copy-button';
-import { buttonVariants } from '@/theme/shared';
+import { buttonVariants } from '@/theme/variants';
 
 export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
   allowCopy?: boolean;

packages/ui/src/nav.tsx

@@ -24,7 +24,7 @@ import {
 } from '@/components/ui/popover';
 import { type LinkItem } from './contexts/tree';
 import { isActive } from './utils/shared';
-import { buttonVariants } from './theme/shared';
+import { buttonVariants } from './theme/variants';
 
 export interface NavLinkProps {
   icon: ReactNode;