react-panel-layout 0.6.0 → 0.6.1

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

@@ -0,0 +1,316 @@
+/**
+ * @file Styles for DrawerSwipe demo
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 24px;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  color: #e9ecef;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 480px;
+}
+
+.lead {
+  color: #adb5bd;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.instructions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.instruction {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: #ced4da;
+}
+
+.instructionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: rgba(102, 126, 234, 0.2);
+  border-radius: 8px;
+  color: #667eea;
+  font-weight: 600;
+}
+
+.drawerContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 8px;
+  overflow: hidden;
+}
+
+.searchBox {
+  flex-shrink: 0;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: #e9ecef;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.searchInput:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.searchInput::placeholder {
+  color: #868e96;
+}
+
+.scrollableSection {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #868e96;
+  margin: 0 0 8px 4px;
+  position: sticky;
+  top: 0;
+  background: inherit;
+  padding: 4px 0;
+}
+
+.drawerList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.drawerItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.drawerItem:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.drawerItem small {
+  color: #868e96;
+  font-size: 11px;
+}
+
+.formSection {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(76, 175, 80, 0.08);
+  border-radius: 8px;
+  border: 1px dashed rgba(76, 175, 80, 0.4);
+  position: relative;
+}
+
+.formSection::before {
+  content: "SAFE";
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: rgba(76, 175, 80, 0.7);
+}
+
+.textInput {
+  width: 100%;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e9ecef;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.textInput:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.textInput::placeholder {
+  color: #868e96;
+}
+
+.textArea {
+  width: 100%;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: #e9ecef;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  resize: vertical;
+  min-height: 60px;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.textArea:focus {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #667eea;
+}
+
+.textArea::placeholder {
+  color: #868e96;
+}
+
+.swipeHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  margin-top: auto;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 8px;
+  color: #667eea;
+  font-size: 13px;
+}
+
+.swipeArrow {
+  animation: swipeHint 1.5s ease-in-out infinite;
+}
+
+@keyframes swipeHint {
+  0%, 100% {
+    transform: translateX(0);
+    opacity: 0.6;
+  }
+  50% {
+    transform: translateX(-8px);
+    opacity: 1;
+  }
+}
+
+.edgeIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(180deg, rgba(102, 126, 234, 0.8) 0%, rgba(102, 126, 234, 0.3) 100%);
+  pointer-events: none;
+  z-index: 100;
+}
+
+.edgeIndicatorLeft {
+  left: 0;
+}
+
+.edgeIndicatorRight {
+  right: 0;
+}
+
+.configPanel {
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.configTitle {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #868e96;
+  margin: 0 0 12px 0;
+}
+
+.configOptions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.configOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #ced4da;
+}
+
+.configOption input[type="checkbox"] {
+  accent-color: #667eea;
+}
+
+.anchorSelect {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.anchorButton {
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  color: #ced4da;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.anchorButton:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.anchorButton[data-active="true"] {
+  background: rgba(102, 126, 234, 0.3);
+  border-color: #667eea;
+  color: #fff;
+}

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

@@ -0,0 +1,178 @@
+/**
+ * @file Swipe gestures drawer demo
+ *
+ * Demonstrates edge swipe to open and drag to close functionality.
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import { SwipeSafeZone } from "../../../../components/gesture/SwipeSafeZone";
+import type { LayerDefinition, PanelLayoutConfig, DrawerBehavior } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerSwipe.module.css";
+
+type AnchorPosition = "left" | "right";
+
+export const DrawerSwipe: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+  const [anchor, setAnchor] = React.useState<AnchorPosition>("left");
+  const [edgeSwipeOpen, setEdgeSwipeOpen] = React.useState(true);
+  const [swipeClose, setSwipeClose] = React.useState(true);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["content"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const drawerConfig = React.useMemo<DrawerBehavior>(
+    () => ({
+      open,
+      onStateChange: setOpen,
+      dismissible: true,
+      header: { title: "Navigation" },
+      anchor,
+      swipeGestures: {
+        edgeSwipeOpen,
+        swipeClose,
+        edgeWidth: 24,
+        dismissThreshold: 0.3,
+      },
+    }),
+    [open, anchor, edgeSwipeOpen, swipeClose],
+  );
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "content",
+      gridArea: "content",
+      component: (
+        <div className={styles.container}>
+          {/* Edge indicator */}
+          <div
+            className={`${styles.edgeIndicator} ${anchor === "left" ? styles.edgeIndicatorLeft : styles.edgeIndicatorRight}`}
+          />
+
+          <div className={styles.hero}>
+            <DemoButton variant="primary" size="lg" onClick={() => setOpen(true)}>
+              Open drawer
+            </DemoButton>
+            <p className={styles.lead}>
+              This demo shows swipe gesture support for drawers. Swipe from the {anchor} edge to open, or drag the
+              drawer toward the edge to close.
+            </p>
+          </div>
+
+          <div className={styles.instructions}>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>1</span>
+              <span>Swipe from the {anchor} edge to open the drawer</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>2</span>
+              <span>Drag the drawer content {anchor === "left" ? "left" : "right"} to close</span>
+            </div>
+            <div className={styles.instruction}>
+              <span className={styles.instructionIcon}>3</span>
+              <span>Release before 30% threshold to snap back</span>
+            </div>
+          </div>
+
+          <div className={styles.configPanel}>
+            <h4 className={styles.configTitle}>Configuration</h4>
+            <div className={styles.configOptions}>
+              <label className={styles.configOption}>
+                <input type="checkbox" checked={edgeSwipeOpen} onChange={(e) => setEdgeSwipeOpen(e.target.checked)} />
+                Edge swipe to open
+              </label>
+              <label className={styles.configOption}>
+                <input type="checkbox" checked={swipeClose} onChange={(e) => setSwipeClose(e.target.checked)} />
+                Swipe to close
+              </label>
+            </div>
+            <div className={styles.anchorSelect}>
+              <button
+                type="button"
+                className={styles.anchorButton}
+                data-active={anchor === "left"}
+                onClick={() => setAnchor("left")}
+              >
+                Left
+              </button>
+              <button
+                type="button"
+                className={styles.anchorButton}
+                data-active={anchor === "right"}
+                onClick={() => setAnchor("right")}
+              >
+                Right
+              </button>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "drawer-swipe",
+      component: (
+        <div className={styles.drawerContent}>
+          {/* Search input */}
+          <div className={styles.searchBox}>
+            <input
+              type="text"
+              placeholder="Search..."
+              className={styles.searchInput}
+            />
+          </div>
+
+          {/* Scrollable list */}
+          <div className={styles.scrollableSection}>
+            <h4 className={styles.sectionTitle}>Navigation</h4>
+            <ul className={styles.drawerList}>
+              {Array.from({ length: 20 }, (_, i) => (
+                <li key={i} className={styles.drawerItem}>
+                  <span>Item {i + 1}</span>
+                  <small>Description for item {i + 1}</small>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Form section - wrapped in SwipeSafeZone */}
+          <SwipeSafeZone className={styles.formSection}>
+            <h4 className={styles.sectionTitle}>Quick Note (Safe Zone)</h4>
+            <input
+              type="text"
+              placeholder="Title"
+              className={styles.textInput}
+            />
+            <textarea
+              placeholder="Write your note here..."
+              className={styles.textArea}
+              rows={3}
+            />
+            <DemoButton variant="secondary" size="sm" onClick={() => {}}>
+              Save Note
+            </DemoButton>
+          </SwipeSafeZone>
+
+          {/* Swipe hint */}
+          <div className={styles.swipeHint}>
+            <span className={styles.swipeArrow}>{anchor === "left" ? "\u2190" : "\u2192"}</span>
+            Swipe to close
+          </div>
+        </div>
+      ),
+      drawer: drawerConfig,
+      position: anchor === "left" ? { left: 0 } : { right: 0 },
+      width: 300,
+      height: "100%",
+      zIndex: 1200,
+    },
+  ];
+
+  return <GridLayout config={config} layers={layers} />;
+};

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

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

package/src/demo/pages/Pivot/components/SwipeTabsPivot.tsx

@@ -22,6 +22,15 @@ type ContentItemsProps = {
   containerWidth: number;
 };
 
+type TabBarProps = {
+  contentContainerWidth: number;
+  items: PivotItem[];
+  pivot: UsePivotResult;
+  tabInputState: SwipeInputState;
+  tabWidth: number;
+  indicatorStyle: IndicatorStyle;
+};
+
 /** Renders content items */
 const ContentItems: React.FC<ContentItemsProps> = ({ items, pivot, inputState, containerWidth }) => {
   if (containerWidth <= 0) {
@@ -55,6 +64,43 @@ const ContentItems: React.FC<ContentItemsProps> = ({ items, pivot, inputState, c
   );
 };
 
+const TabBar: React.FC<TabBarProps> = ({
+  contentContainerWidth,
+  items,
+  pivot,
+  tabInputState,
+  tabWidth,
+  indicatorStyle,
+}) => {
+  if (contentContainerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <SwipePivotTabBar
+      items={items}
+      activeId={pivot.activeId}
+      activeIndex={pivot.activeIndex}
+      itemCount={pivot.itemCount}
+      inputState={tabInputState}
+      tabWidth={tabWidth}
+      viewportWidth={contentContainerWidth}
+      navigationMode={pivot.navigationMode}
+      fixedTabs={indicatorStyle === "sliding"}
+      renderTab={(item, isActive) => (
+        <button
+          className={indicatorStyle === "sliding" ? styles.tabIos : styles.tab}
+          data-active={isActive}
+          onClick={() => pivot.setActiveId(item.id)}
+        >
+          {item.label}
+        </button>
+      )}
+      renderIndicator={indicatorStyle === "sliding" ? SlidingIndicator : undefined}
+    />
+  );
+};
+
 const pageColors = ["#ffe0e0", "#e0ffe0", "#e0e0ff", "#fff0e0", "#f0e0ff"];
 
 const items: PivotItem[] = [
@@ -225,29 +271,14 @@ export const SwipeTabsPivot: React.FC = () => {
           className={styles.tabsContainer}
           data-style={indicatorStyle === "sliding" ? "ios" : undefined}
         >
-          {contentContainerWidth > 0 && (
-            <SwipePivotTabBar
-              items={items}
-              activeId={pivot.activeId}
-              activeIndex={pivot.activeIndex}
-              itemCount={pivot.itemCount}
-              inputState={tabInputState}
-              tabWidth={tabWidth}
-              viewportWidth={contentContainerWidth}
-              navigationMode={pivot.navigationMode}
-              fixedTabs={indicatorStyle === "sliding"}
-              renderTab={(item, isActive) => (
-                <button
-                  className={indicatorStyle === "sliding" ? styles.tabIos : styles.tab}
-                  data-active={isActive}
-                  onClick={() => pivot.setActiveId(item.id)}
-                >
-                  {item.label}
-                </button>
-              )}
-              renderIndicator={indicatorStyle === "sliding" ? SlidingIndicator : undefined}
-            />
-          )}
+          <TabBar
+            contentContainerWidth={contentContainerWidth}
+            items={items}
+            pivot={pivot}
+            tabInputState={tabInputState}
+            tabWidth={tabWidth}
+            indicatorStyle={indicatorStyle}
+          />
         </div>
 
         {/* Content area - uses original inputState */}

package/src/demo/pages/Pivot/swipe-debug/index.tsx

@@ -261,7 +261,7 @@ const SwipeDebugPage: React.FC = () => {
             [{log.time}] {log.message}
           </div>
         ))}
-        {logs.length === 0 && <div>No logs yet. Start swiping...</div>}
+        {logs.length === 0 ? <div>No logs yet. Start swiping...</div> : null}
       </div>
 
       {/* Manual navigation */}