react-panel-layout 0.5.2 → 0.6.1

package/src/demo/pages/Stack/components/StackTablet.tsx

@@ -0,0 +1,422 @@
+/**
+ * @file Stack Tablet demo - iPad Settings-style stacking sidebar
+ * Each menu panel has its own header that stacks with the content.
+ * Uses SwipeStackContent for direct DOM manipulation during swipe gestures.
+ */
+import * as React from "react";
+import { useStackNavigation } from "../../../../modules/stack/useStackNavigation.js";
+import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
+import { SwipeStackContent } from "../../../../modules/stack/SwipeStackContent.js";
+import { useResizeObserver } from "../../../../hooks/useResizeObserver.js";
+import { toContinuousOperationState } from "../../../../hooks/gesture/types.js";
+import type { StackPanel } from "../../../../modules/stack/types.js";
+import styles from "./StackTablet.module.css";
+import "../../../styles/stack-themes.css";
+
+export type StackTheme = "ios" | "android" | "fluent" | "instant";
+
+const THEME_CLASSES: Record<StackTheme, string> = {
+  ios: "stack-theme-ios",
+  android: "stack-theme-android",
+  fluent: "stack-theme-fluent",
+  instant: "stack-theme-instant",
+};
+
+// Animation durations matching CSS custom properties
+const THEME_DURATIONS: Record<StackTheme, number> = {
+  ios: 350,
+  android: 400,
+  fluent: 250,
+  instant: 0,
+};
+
+const panels: StackPanel[] = [
+  { id: "root", title: "Settings", content: null },
+  { id: "general", title: "General", content: null },
+  { id: "about", title: "About", content: null },
+  { id: "name", title: "Name", content: null },
+  { id: "software", title: "Software Update", content: null },
+  { id: "storage", title: "Storage", content: null },
+  { id: "display", title: "Display", content: null },
+  { id: "sounds", title: "Sounds", content: null },
+];
+
+// Menu structure - each menu has items that can navigate deeper
+type MenuItem = { id: string; icon: string; label: string };
+
+const menus: Record<string, { title: string; parentTitle?: string; items: MenuItem[] }> = {
+  root: {
+    title: "Settings",
+    items: [
+      { id: "general", icon: "⚙️", label: "General" },
+      { id: "display", icon: "☀️", label: "Display & Brightness" },
+      { id: "sounds", icon: "🔔", label: "Sounds & Haptics" },
+    ],
+  },
+  general: {
+    title: "General",
+    parentTitle: "Settings",
+    items: [
+      { id: "about", icon: "ℹ️", label: "About" },
+      { id: "software", icon: "📲", label: "Software Update" },
+      { id: "storage", icon: "💾", label: "iPad Storage" },
+    ],
+  },
+  about: {
+    title: "About",
+    parentTitle: "General",
+    items: [{ id: "name", icon: "📝", label: "Name" }],
+  },
+  name: {
+    title: "Name",
+    parentTitle: "About",
+    items: [],
+  },
+  software: {
+    title: "Software Update",
+    parentTitle: "General",
+    items: [],
+  },
+  storage: {
+    title: "iPad Storage",
+    parentTitle: "General",
+    items: [],
+  },
+  display: {
+    title: "Display & Brightness",
+    parentTitle: "Settings",
+    items: [],
+  },
+  sounds: {
+    title: "Sounds & Haptics",
+    parentTitle: "Settings",
+    items: [],
+  },
+};
+
+// Detail content for right panel
+type DetailData = { title: string; items: Array<{ label: string; value: string }> };
+
+const detailContent: Record<string, DetailData> = {
+  root: {
+    title: "Settings",
+    items: [{ label: "Tip", value: "Select a menu item from the sidebar" }],
+  },
+  general: {
+    title: "General",
+    items: [{ label: "Info", value: "Configure general device settings" }],
+  },
+  about: {
+    title: "About",
+    items: [
+      { label: "iOS Version", value: "17.2" },
+      { label: "Model Name", value: "iPad Pro" },
+      { label: "Model Number", value: "A2759" },
+    ],
+  },
+  name: {
+    title: "Name",
+    items: [
+      { label: "Device Name", value: "iPad" },
+      { label: "Tip", value: "Tap to edit your device name" },
+    ],
+  },
+  software: {
+    title: "Software Update",
+    items: [
+      { label: "Current Version", value: "17.2" },
+      { label: "Status", value: "Your software is up to date" },
+    ],
+  },
+  storage: {
+    title: "iPad Storage",
+    items: [
+      { label: "Used", value: "64 GB of 256 GB" },
+      { label: "Available", value: "192 GB" },
+    ],
+  },
+  display: {
+    title: "Display & Brightness",
+    items: [
+      { label: "Brightness", value: "Auto" },
+      { label: "True Tone", value: "On" },
+      { label: "Night Shift", value: "Off" },
+    ],
+  },
+  sounds: {
+    title: "Sounds & Haptics",
+    items: [
+      { label: "Ringtone", value: "Reflection" },
+      { label: "Text Tone", value: "Note" },
+    ],
+  },
+};
+
+type MenuPanelProps = {
+  id: string;
+  title: string;
+  parentTitle?: string;
+  items: MenuItem[];
+  onItemClick: (id: string) => void;
+  onBack: () => void;
+  canGoBack: boolean;
+  currentPanelId: string;
+};
+
+const getButtonClass = (isActive: boolean): string => {
+  if (isActive) {
+    return `${styles.menuButton} ${styles.menuButtonActive}`;
+  }
+  return styles.menuButton;
+};
+
+const MenuPanel: React.FC<MenuPanelProps> = ({
+  title,
+  parentTitle,
+  items,
+  onItemClick,
+  onBack,
+  canGoBack,
+  currentPanelId,
+}) => {
+  const renderBackButton = (): React.ReactNode => {
+    if (!canGoBack) {
+      return null;
+    }
+    return (
+      <button className={styles.panelBackButton} onClick={onBack}>
+        ← {parentTitle}
+      </button>
+    );
+  };
+
+  const renderMenuList = (): React.ReactNode => (
+    <ul className={styles.menuList}>
+      {items.map((item) => {
+        const isActive = currentPanelId === item.id;
+        const buttonClass = getButtonClass(isActive);
+        return (
+          <li key={item.id} className={styles.menuItem}>
+            <button className={buttonClass} onClick={() => onItemClick(item.id)}>
+              <span className={styles.menuIcon}>{item.icon}</span>
+              <span className={styles.menuLabel}>{item.label}</span>
+              <span className={styles.menuChevron}>›</span>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const renderLeafContent = (): React.ReactNode => (
+    <div className={styles.leafContent}>
+      <p className={styles.leafText}>This is the deepest level for this menu.</p>
+      <p className={styles.leafHint}>Swipe from left edge or tap back to return.</p>
+    </div>
+  );
+
+  const renderContent = (): React.ReactNode => {
+    if (items.length > 0) {
+      return renderMenuList();
+    }
+    return renderLeafContent();
+  };
+
+  return (
+    <div className={styles.menuPanel}>
+      <header className={styles.panelHeader}>
+        {renderBackButton()}
+        <h2 className={styles.panelTitle}>{title}</h2>
+      </header>
+      {renderContent()}
+    </div>
+  );
+};
+
+type StackTabletProps = {
+  theme?: StackTheme;
+};
+
+export const StackTablet: React.FC<StackTabletProps> = ({ theme = "ios" }) => {
+  const sidebarRef = React.useRef<HTMLDivElement>(null);
+  const [selectedTheme, setSelectedTheme] = React.useState<StackTheme>(theme);
+
+  const navigation = useStackNavigation({
+    panels,
+    displayMode: "stack",
+    transitionMode: "none", // Using direct DOM manipulation instead
+  });
+
+  const { isEdgeSwiping, progress, inputState, containerProps } = useStackSwipeInput({
+    containerRef: sidebarRef,
+    navigation,
+    edge: "left",
+    edgeWidth: 20,
+  });
+
+  // Track container size for SwipeStackContent
+  const { rect } = useResizeObserver(sidebarRef, { box: "border-box" });
+  const containerSize = rect?.width ?? 0;
+
+  const handleMenuClick = (id: string) => {
+    navigation.push(id as (typeof panels)[number]["id"]);
+  };
+
+  const handleBack = () => {
+    navigation.go(-1);
+  };
+
+  const currentPanelId = navigation.currentPanelId;
+  const currentDetail = detailContent[currentPanelId] ?? detailContent.root;
+
+  // Get visible panels: active + behind (for swipe reveal) + exiting (for back animation)
+  const { stack, depth } = navigation.state;
+
+  // Track exiting panel when navigating back.
+  // CRITICAL: exitingPanelId must be computed synchronously during render
+  // to prevent the exiting panel from being unmounted for a frame.
+  // If the panel unmounts, it loses its position state and causes a visual jump.
+  const prevDepthRef = React.useRef(depth);
+  const prevStackRef = React.useRef<ReadonlyArray<string>>(stack);
+  const exitingPanelClearTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [exitingPanelState, setExitingPanelState] = React.useState<string | null>(null);
+
+  // Compute exiting panel ID synchronously during render
+  // This ensures the panel stays in the render tree even on the navigation change render
+  const prevDepth = prevDepthRef.current;
+  const prevStack = prevStackRef.current;
+  const isNavigatingBack = depth < prevDepth;
+  const computedExitingId = isNavigatingBack ? (prevStack[prevDepth] ?? null) : null;
+
+  // Use computed value if navigating back, otherwise use state (for timeout-based cleanup)
+  const exitingPanelId = computedExitingId ?? exitingPanelState;
+
+  // Update refs and state in effect
+  React.useLayoutEffect(() => {
+    // Update refs
+    prevDepthRef.current = depth;
+    prevStackRef.current = stack;
+
+    // If we just started navigating back, update state and schedule cleanup
+    if (computedExitingId != null) {
+      setExitingPanelState(computedExitingId);
+
+      // Clear any existing timeout
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+
+      // Clear exiting panel after animation completes
+      exitingPanelClearTimeoutRef.current = setTimeout(() => {
+        setExitingPanelState(null);
+        exitingPanelClearTimeoutRef.current = null;
+      }, THEME_DURATIONS[selectedTheme]);
+    }
+
+    return () => {
+      if (exitingPanelClearTimeoutRef.current != null) {
+        clearTimeout(exitingPanelClearTimeoutRef.current);
+      }
+    };
+  }, [depth, stack, selectedTheme, computedExitingId]);
+
+  const visiblePanelIds = React.useMemo(() => {
+    const ids = [stack[depth]]; // Active panel
+    if (depth > 0) {
+      ids.unshift(stack[depth - 1]); // Behind panel
+    }
+    // Include exiting panel if not already in the list
+    if (exitingPanelId != null && !ids.includes(exitingPanelId)) {
+      ids.push(exitingPanelId);
+    }
+    return ids;
+  }, [stack, depth, exitingPanelId]);
+
+  const containerClassName = `${styles.container} ${THEME_CLASSES[selectedTheme]}`;
+
+  return (
+    <div className={containerClassName}>
+      {/* Sidebar with stacking menus */}
+      <aside className={styles.sidebar}>
+        <div ref={sidebarRef} className={styles.sidebarContent} {...containerProps}>
+          {visiblePanelIds.map((panelId) => {
+            const menu = menus[panelId];
+            if (menu == null) {
+              return null;
+            }
+
+            // Panel is only "exiting" if it matches exitingPanelId AND is not in current stack
+            // This prevents the bug where a re-pushed panel is incorrectly treated as exiting
+            const isInCurrentStack = stack.includes(panelId);
+            const isExiting = panelId === exitingPanelId && !isInCurrentStack;
+            // For exiting panels, use depth + 1 since they were previously at the active position
+            const panelDepth = isExiting ? depth + 1 : stack.indexOf(panelId);
+            const isActive = panelDepth === depth && !isExiting;
+
+            return (
+              <SwipeStackContent
+                key={panelId}
+                id={panelId}
+                depth={panelDepth}
+                navigationDepth={depth}
+                isActive={isActive}
+                operationState={toContinuousOperationState(inputState)}
+                containerSize={containerSize}
+                animateOnMount={true}
+                animationDuration={THEME_DURATIONS[selectedTheme]}
+                displayMode="stack"
+              >
+                <MenuPanel
+                  id={panelId}
+                  title={menu.title}
+                  parentTitle={menu.parentTitle}
+                  items={menu.items}
+                  onItemClick={handleMenuClick}
+                  onBack={handleBack}
+                  canGoBack={panelDepth > 0}
+                  currentPanelId={currentPanelId}
+                />
+              </SwipeStackContent>
+            );
+          })}
+        </div>
+      </aside>
+
+      {/* Detail panel (right side) */}
+      <main className={styles.detail}>
+        <header className={styles.detailHeader}>
+          <h1 className={styles.detailTitle}>{currentDetail.title}</h1>
+        </header>
+        <div className={styles.detailBody}>
+          <ul className={styles.detailList}>
+            {currentDetail.items.map((item, index) => (
+              <li key={index} className={styles.detailItem}>
+                <span className={styles.detailLabel}>{item.label}</span>
+                <span className={styles.detailValue}>{item.value}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </main>
+
+      {/* Debug info */}
+      <div className={styles.debugInfo}>
+        <span>Depth: {navigation.state.depth}</span>
+        <span>Stack: [{navigation.state.stack.join(" → ")}]</span>
+        <label className={styles.themeSelector}>
+          Theme:
+          <select
+            value={selectedTheme}
+            onChange={(e) => setSelectedTheme(e.target.value as StackTheme)}
+          >
+            <option value="ios">iOS</option>
+            <option value="android">Android</option>
+            <option value="fluent">Fluent</option>
+            <option value="instant">Instant</option>
+          </select>
+        </label>
+        {isEdgeSwiping ? <span>Swiping: {Math.round(progress * 100)}%</span> : null}
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Stack/tablet/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Stack - Tablet demo page
+ */
+import * as React from "react";
+import { StackTablet } from "../components/StackTablet";
+import StackTabletSource from "../components/StackTablet.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Stack / Tablet"
+      code={StackTabletSource}
+      codeTitle="StackTablet.tsx"
+      previewHeight={600}
+    >
+      <StackTablet />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/StickyHeader/basics/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file StickyHeader - Basics page
+ */
+import * as React from "react";
+import { StickyHeaderBasics } from "../components/StickyHeaderBasics";
+import StickyHeaderBasicsSource from "../components/StickyHeaderBasics.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout/SingleSamplePage";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="StickyHeader / Basics" code={StickyHeaderBasicsSource} codeTitle="StickyHeaderBasics.tsx">
+      <StickyHeaderBasics />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/StickyHeader/components/StickyHeader.module.css

@@ -0,0 +1,219 @@
+/* StickyHeader demo styles */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.scrollArea {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.coverPlaceholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.header {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 24px;
+  box-sizing: border-box;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.header h1 {
+  margin: 0 0 8px 0;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.header p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.content {
+  background: var(--rpl-color-surface-elevated, #fff);
+  padding: 24px;
+  min-height: 400px;
+}
+
+.footer {
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  box-sizing: border-box;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.footer p {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.content h2 {
+  margin: 0 0 16px 0;
+  font-size: 20px;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.content p {
+  margin: 0 0 16px 0;
+  color: var(--rpl-color-text-secondary, #666);
+  line-height: 1.6;
+}
+
+.content ul {
+  margin: 0 0 16px 0;
+  padding-left: 20px;
+}
+
+.content li {
+  margin-bottom: 8px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+/* State indicator */
+.stateIndicator {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  padding: 8px 16px;
+  background: var(--rpl-color-surface-elevated, #fff);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stateRow {
+  display: flex;
+  gap: 8px;
+}
+
+.stateLabel {
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.stateValue {
+  color: var(--rpl-color-text-primary, #333);
+  font-weight: 500;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+}
+
+select.stateValue {
+  background: var(--rpl-color-surface, #fff);
+  border: 1px solid var(--rpl-color-border, #e0e0e0);
+  border-radius: 4px;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+
+.stateValue.stuck {
+  color: var(--rpl-color-primary, #0066cc);
+}
+
+/* Nested scroll demo */
+.nestedContainer {
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.nestedDescription {
+  margin-bottom: 24px;
+}
+
+.nestedDescription h3 {
+  margin: 0 0 8px 0;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.nestedDescription p {
+  margin: 0;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.nestedScrollBox {
+  height: 400px;
+  border: 2px solid var(--rpl-color-border, #e0e0e0);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.nestedScrollArea {
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.nestedHeader {
+  height: 120px;
+  display: flex;
+  align-items: flex-end;
+  padding: 16px;
+  box-sizing: border-box;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.nestedHeader h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.nestedContent {
+  background: var(--rpl-color-surface-elevated, #fff);
+  padding: 16px;
+  min-height: 600px;
+}
+
+.nestedContent p {
+  margin: 0 0 12px 0;
+  color: var(--rpl-color-text-secondary, #666);
+  line-height: 1.6;
+}
+
+/* Cover gradient variations */
+.coverGradient1 {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.coverGradient2 {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.coverGradient3 {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}