react-panel-layout 0.6.1 → 0.7.0

package/src/components/window/useRevealDrawerTransform.ts

@@ -0,0 +1,105 @@
+/**
+ * @file Hook for managing reveal-mode drawer transform (backward-compatible wrapper).
+ *
+ * This hook is a thin wrapper around useDrawerTransform with mode="reveal".
+ * For new code, prefer using useDrawerTransform directly.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+import * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+import {
+  useDrawerTransform,
+  type DrawerAnimationPhase,
+  type UseDrawerTransformResult,
+} from "./useDrawerTransform.js";
+import { getContentElement } from "./drawerRevealAnimationUtils.js";
+
+/**
+ * Phase of reveal drawer animation lifecycle.
+ * @deprecated Use DrawerAnimationPhase from useDrawerTransform.ts
+ */
+export type RevealDrawerAnimationPhase = DrawerAnimationPhase;
+
+/**
+ * Options for useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformOptions = {
+  /** Ref to the drawer element */
+  drawerRef: React.RefObject<HTMLElement | null>;
+  /** Drawer placement */
+  placement: DrawerPlacement;
+  /** Drawer size in pixels */
+  drawerSize: number;
+  /** Whether the drawer is open */
+  isOpen: boolean;
+  /** Current swipe state */
+  swipeState: ContinuousOperationState;
+  /** Current swipe displacement */
+  displacement: number;
+  /** Whether opening via swipe */
+  isOpening: boolean;
+  /** Whether closing via swipe */
+  isClosing: boolean;
+  /** Whether this hook is enabled */
+  enabled: boolean;
+  /** Whether drawer is inline (affects target element) */
+  inline: boolean;
+  /** Grid container ref for inline mode */
+  gridRef?: React.RefObject<HTMLElement | null>;
+  /** Content background color for stacking context */
+  contentBackground?: string;
+};
+
+/**
+ * Result from useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformResult = UseDrawerTransformResult;
+
+/**
+ * Hook for managing reveal-mode drawer transform.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+export function useRevealDrawerTransform(
+  options: UseRevealDrawerTransformOptions,
+): UseRevealDrawerTransformResult {
+  const {
+    drawerRef,
+    placement,
+    drawerSize,
+    isOpen,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled,
+    inline,
+    gridRef,
+    contentBackground = "#fff",
+  } = options;
+
+  // Create a content ref that resolves the content element
+  const contentRef = React.useRef<HTMLElement | null>(null);
+  React.useLayoutEffect(() => {
+    contentRef.current = getContentElement(inline, gridRef);
+  }, [inline, gridRef]);
+
+  return useDrawerTransform({
+    mode: "reveal",
+    drawerRef,
+    contentRef,
+    placement,
+    drawerSize,
+    isOpen,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled,
+    inline,
+    gridRef,
+    contentBackground,
+  });
+}

package/src/demo/components/FullscreenDemoPage.tsx

@@ -0,0 +1,47 @@
+/**
+ * @file Fullscreen demo page wrapper
+ *
+ * Renders fullscreen demos by ID from the route parameter.
+ */
+import * as React from "react";
+import { useParams, Link } from "react-router";
+import { getFullscreenDemo } from "../fullscreenRoutes";
+
+export const FullscreenDemoPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const demo = id ? getFullscreenDemo(id) : undefined;
+
+  if (!demo) {
+    return (
+      <div style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        gap: "16px",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        <h1>Demo not found</h1>
+        <p>The fullscreen demo "{id}" does not exist.</p>
+        <Link to="/" style={{ color: "#1d9bf0" }}>Go back home</Link>
+      </div>
+    );
+  }
+
+  return (
+    <React.Suspense fallback={
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        Loading...
+      </div>
+    }>
+      {demo.element}
+    </React.Suspense>
+  );
+};

package/src/demo/fullscreenRoutes.tsx

@@ -0,0 +1,32 @@
+/**
+ * @file Fullscreen demo route configuration
+ *
+ * Demos that need to be rendered outside the main Layout
+ * (e.g., reveal-mode drawer that transforms the body).
+ */
+import * as React from "react";
+
+export type FullscreenDemo = {
+  id: string;
+  label: string;
+  element: React.ReactNode;
+};
+
+// Lazy load fullscreen demos
+// eslint-disable-next-line no-restricted-syntax -- dynamic import required for lazy loading
+const DrawerRevealFullscreen = React.lazy(() => import("./pages/Drawer/reveal-fullscreen"));
+
+export const fullscreenDemos: Record<string, FullscreenDemo> = {
+  "drawer-reveal": {
+    id: "drawer-reveal",
+    label: "Drawer Reveal Mode",
+    element: <DrawerRevealFullscreen />,
+  },
+};
+
+/**
+ * Get a fullscreen demo by ID.
+ */
+export function getFullscreenDemo(id: string): FullscreenDemo | undefined {
+  return fullscreenDemos[id];
+}

package/src/demo/index.tsx

@@ -8,6 +8,7 @@ import { HashRouter, Routes, Route, Outlet, Link } from "react-router";
 import { Layout } from "./Layout";
 import { PanelLayoutDemo } from "./pages/PanelLayout/PanelLayoutDemo";
 import { demoCategories } from "./routes";
+import { FullscreenDemoPage } from "./components/FullscreenDemoPage";
 import * as React from "react";
 import { useMedia } from "./hooks/useMedia";
 import "./demo.css";
@@ -263,6 +264,10 @@ function App() {
   return (
     <HashRouter>
       <Routes>
+        {/* Fullscreen pages (outside Layout) */}
+        <Route path="/fullscreen/:id" element={<FullscreenDemoPage />} />
+
+        {/* Regular pages (inside Layout) */}
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="panel-demo" element={<PanelLayoutDemo />} />

package/src/demo/pages/Dialog/components/CardExpandDemo.tsx

@@ -158,6 +158,28 @@ const viewTransitionStyles = `
   }
 `;
 
+/**
+ * Render expanded view if item is expanded.
+ */
+function renderExpandedView(
+  expandedItem: Album | null,
+  getTargetProps: (nameIndex?: number) => { style: React.CSSProperties },
+  getSwipeContainerProps: () => React.HTMLAttributes<HTMLElement> & { style: React.CSSProperties },
+  collapse: () => void,
+): React.ReactNode {
+  if (expandedItem === null) {
+    return null;
+  }
+  return (
+    <ExpandedView
+      album={expandedItem}
+      targetProps={getTargetProps()}
+      swipeContainerProps={getSwipeContainerProps()}
+      onClose={collapse}
+    />
+  );
+}
+
 /**
  * Demo component for Apple Music style card expansion using viewTransition
  */
@@ -191,14 +213,7 @@ export const CardExpandDemo: React.FC = () => {
         ))}
       </div>
 
-      {expandedItem && (
-        <ExpandedView
-          album={expandedItem}
-          targetProps={getTargetProps()}
-          swipeContainerProps={getSwipeContainerProps()}
-          onClose={collapse}
-        />
-      )}
+      {renderExpandedView(expandedItem, getTargetProps, getSwipeContainerProps, collapse)}
     </div>
   );
 };

package/src/demo/pages/Drawer/components/DrawerBasics.module.css

@@ -1,4 +1,4 @@
-.container {
+.wrapper {
   position: relative;
   width: 100%;
   height: 100%;
@@ -9,6 +9,11 @@
   box-shadow: var(--rpl-demo-shadow-md);
 }
 
+.container {
+  width: 100%;
+  height: 100%;
+}
+
 .hero {
   display: grid;
   place-items: center;

package/src/demo/pages/Drawer/components/DrawerBasics.tsx

@@ -1,5 +1,5 @@
 /**
- * @file Basic drawer layout sample (default Drawer styling)
+ * @file Basic drawer layout sample (default Drawer styling with swipe gestures)
  */
 import * as React from "react";
 import { GridLayout } from "../../../../components/grid/GridLayout";
@@ -31,8 +31,7 @@ export const DrawerBasics: React.FC = () => {
               Open drawer
             </DemoButton>
             <p className={styles.lead}>
-              This sample uses the default Drawer styling. The drawer anchors to the left, covers the page surface, and
-              uses the built-in header/close affordance.
+              Swipe from the left edge to open the drawer, or drag the drawer left to close it.
             </p>
           </div>
         </div>
@@ -63,7 +62,14 @@ export const DrawerBasics: React.FC = () => {
         open,
         onStateChange: setOpen,
         dismissible: true,
+        inline: true,
         header: { title: "Navigation" },
+        swipeGestures: {
+          edgeSwipeOpen: true,
+          swipeClose: true,
+          edgeWidth: 24,
+          dismissThreshold: 0.3,
+        },
       },
       position: { left: 0 },
       width: 320,
@@ -72,5 +78,9 @@ export const DrawerBasics: React.FC = () => {
     },
   ];
 
-  return <GridLayout config={config} layers={layers} />;
+  return (
+    <div className={styles.wrapper}>
+      <GridLayout config={config} layers={layers} />
+    </div>
+  );
 };

package/src/demo/pages/Drawer/components/DrawerReveal.module.css

@@ -0,0 +1,157 @@
+/**
+ * @file Styles for DrawerReveal demo
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  background: #fff;
+  color: #0f1419;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 480px;
+}
+
+.lead {
+  color: #536471;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px;
+  background: #f7f9f9;
+  border-radius: 16px;
+}
+
+.instruction {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: #536471;
+}
+
+.instructionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: #1d9bf0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.fullscreenLink {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 10px 20px;
+  background: #1d9bf0;
+  color: #fff;
+  border-radius: 9999px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+  transition: background 0.15s ease;
+}
+
+.fullscreenLink:hover {
+  background: #1a8cd8;
+}
+
+.drawerContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+  background: #fff;
+  border-right: 1px solid #eff3f4;
+}
+
+.profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid #eff3f4;
+  margin-bottom: 8px;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: #1d9bf0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.profileName {
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f1419;
+}
+
+.profileHandle {
+  font-size: 13px;
+  color: #536471;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  padding: 8px 0;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 9999px;
+  color: #0f1419;
+  font-size: 20px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 0.2s ease;
+}
+
+.navItem:hover {
+  background: #e7e7e8;
+}
+
+.navIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
+  font-weight: 700;
+}

package/src/demo/pages/Drawer/components/DrawerReveal.tsx

@@ -0,0 +1,128 @@
+/**
+ * @file Reveal mode drawer demo
+ *
+ * Demonstrates the reveal animation mode where content slides away
+ * to reveal the drawer behind it (like X/Twitter's navigation menu).
+ */
+import * as React from "react";
+import { Link } from "react-router";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerReveal.module.css";
+
+export const DrawerReveal: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["content"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "content",
+      gridArea: "content",
+      component: (
+        <div className={styles.container}>
+          <div className={styles.hero}>
+            <DemoButton variant="primary" size="lg" onClick={() => setOpen(true)}>
+              Open drawer
+            </DemoButton>
+            <p className={styles.lead}>
+              This demo shows the reveal animation mode with <code>inline: true</code>. The container slides to reveal
+              the drawer behind it, similar to X/Twitter's navigation menu.
+            </p>
+            <Link to="/fullscreen/drawer-reveal" className={styles.fullscreenLink} target="_blank">
+              View Fullscreen Demo
+            </Link>
+          </div>
+
+          <div className={styles.instructions}>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>1</span>
+              <span>Swipe from the left edge to open</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>2</span>
+              <span>Content slides right to reveal drawer</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>3</span>
+              <span>Swipe left on content to close</span>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-reveal",
+      component: (
+        <div className={styles.drawerContent}>
+          <div className={styles.profile}>
+            <div className={styles.avatar}>U</div>
+            <div className={styles.profileInfo}>
+              <div className={styles.profileName}>User Name</div>
+              <div className={styles.profileHandle}>@username</div>
+            </div>
+          </div>
+
+          <nav className={styles.nav}>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>H</span>
+              Home
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>S</span>
+              Search
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>N</span>
+              Notifications
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>M</span>
+              Messages
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>P</span>
+              Profile
+            </a>
+            <a href="#" className={styles.navItem}>
+              <span className={styles.navIcon}>C</span>
+              Settings
+            </a>
+          </nav>
+
+          <DemoButton variant="secondary" size="md" onClick={() => setOpen(false)}>
+            Close
+          </DemoButton>
+        </div>
+      ),
+      drawer: {
+        open,
+        onStateChange: setOpen,
+        dismissible: true,
+        animationMode: "reveal",
+        inline: true,
+        swipeGestures: {
+          edgeSwipeOpen: true,
+          swipeClose: true,
+          edgeWidth: 24,
+          dismissThreshold: 0.3,
+        },
+      },
+      position: { left: 0 },
+      width: 280,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} />;
+};

package/src/demo/pages/Drawer/reveal/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Drawer - Reveal Mode page
+ */
+import * as React from "react";
+import { DrawerReveal } from "../components/DrawerReveal";
+import DrawerRevealSource from "../components/DrawerReveal.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Drawer / Reveal Mode" code={DrawerRevealSource} codeTitle="DrawerReveal.tsx" previewHeight={520}>
+      <DrawerReveal />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;