@seed-design/stackflow 1.0.5 → 1.0.9

package/lib/primitive/GlobalInteraction/useSwipeBack.cjs

@@ -24,6 +24,11 @@ function useSwipeBack(props) {
           if (e.target === e.currentTarget) {
             events.reset();
           }
+        },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
         }
       },
       edgeProps: {

package/lib/primitive/GlobalInteraction/useSwipeBack.js

@@ -20,6 +20,11 @@ function useSwipeBack(props) {
           if (e.target === e.currentTarget) {
             events.reset();
           }
+        },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
         }
       },
       edgeProps: {

package/lib/primitive/private/useTopActivity.cjs

@@ -18,7 +18,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = React.useState(null);
   const activityType = topEl?.dataset["activityType"];
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
     setTopEl(el);

package/lib/primitive/private/useTopActivity.js

@@ -1,6 +1,6 @@
 'use client';
 import { useStack } from '@stackflow/react';
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 
 function useTopActivity() {
   const stack = useStack();
@@ -14,7 +14,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = useState(null);
   const activityType = topEl?.dataset["activityType"];
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
     setTopEl(el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.5",
+    "@seed-design/css": "1.0.7",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@stackflow/react-ui-core": "^1.3.2",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.0.5",
+    "@seed-design/css": ">=1.0.7",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "@stackflow/react-ui-core": ">=1.3.2",

package/src/primitive/GlobalInteraction/useSwipeBack.ts

@@ -25,6 +25,11 @@ export function useSwipeBack(props: UseSwipeBackProps) {
             events.reset();
           }
         },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
+        },
       } as React.HTMLAttributes<HTMLDivElement>,
       edgeProps: {
         tabIndex: -1,

package/src/primitive/private/useTopActivity.ts

@@ -1,5 +1,5 @@
 import { useStack } from "@stackflow/react";
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 export function useTopActivity() {
   const stack = useStack();
@@ -17,7 +17,7 @@ export function useTopActivity() {
   const [topEl, setTopEl] = useState<HTMLElement | null>(null);
   const activityType = topEl?.dataset["activityType"];
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!topId) return;
 
     const el = document.querySelector<HTMLElement>(`[data-activity-id="${topId}"]`);