@seed-design/stackflow 1.1.11 → 1.1.16

package/lib/components/AppBar/AppBar.cjs

@@ -14,6 +14,8 @@ const React = require('react');
 const AppBar = require('../../primitive/AppBar/AppBar.cjs');
 const useAppBarContext = require('../../primitive/AppBar/useAppBarContext.cjs');
 const createStyleContext = require('../../utils/createStyleContext.cjs');
+const useTopActivity = require('../../primitive/private/useTopActivity.cjs');
+const react = require('@stackflow/react');
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext.createStyleContext(appBar.appBar);
 const {
@@ -25,24 +27,22 @@ const AppBarPropsProvider = PropsProvider;
 const AppBarRoot = React.forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appBar.appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar.appBar(variantProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
-    MainPropsProvider,
+  const topActivityTransitionStyle = useTopActivity.useTopActivity().transitionStyle;
+  const resolvedVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...react.useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle
+    }
+  };
+  const classNames = appBar.appBar(resolvedVariantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(MainPropsProvider, { value: resolvedVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AppBar.AppBarRoot,
     {
-      value: {
-        theme: variantProps.theme,
-        transitionStyle: variantProps.transitionStyle,
-        tone: variantProps.tone
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        AppBar.AppBarRoot,
-        {
-          ref,
-          ...domUtils.mergeProps({ className: classNames.root }, otherProps)
-        }
-      )
+      ref,
+      ...domUtils.mergeProps({ className: classNames.root }, otherProps)
     }
-  ) });
+  ) }) });
 });
 AppBarRoot.displayName = "AppBarRoot";
 const AppBarLeft = withContext(

package/lib/components/AppBar/AppBar.js

@@ -10,6 +10,8 @@ import { forwardRef } from 'react';
 import { AppBarLeft as AppBarLeft$1, AppBarMain as AppBarMain$1, AppBarRight as AppBarRight$1, AppBarRoot as AppBarRoot$1 } from '../../primitive/AppBar/AppBar.js';
 import { useAppBarContext } from '../../primitive/AppBar/useAppBarContext.js';
 import { createStyleContext } from '../../utils/createStyleContext.js';
+import { useTopActivity } from '../../primitive/private/useTopActivity.js';
+import { useActivity } from '@stackflow/react';
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = createStyleContext(appBar);
 const {
@@ -21,24 +23,22 @@ const AppBarPropsProvider = PropsProvider;
 const AppBarRoot = forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar(variantProps);
-  return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
-    MainPropsProvider,
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+  const resolvedVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle
+    }
+  };
+  const classNames = appBar(resolvedVariantProps);
+  return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(MainPropsProvider, { value: resolvedVariantProps, children: /* @__PURE__ */ jsx(
+    AppBarRoot$1,
     {
-      value: {
-        theme: variantProps.theme,
-        transitionStyle: variantProps.transitionStyle,
-        tone: variantProps.tone
-      },
-      children: /* @__PURE__ */ jsx(
-        AppBarRoot$1,
-        {
-          ref,
-          ...mergeProps({ className: classNames.root }, otherProps)
-        }
-      )
+      ref,
+      ...mergeProps({ className: classNames.root }, otherProps)
     }
-  ) });
+  ) }) });
 });
 AppBarRoot.displayName = "AppBarRoot";
 const AppBarLeft = withContext(

package/lib/components/AppScreen/AppScreen.cjs

@@ -10,6 +10,8 @@ const React = require('react');
 const AppScreen = require('../../primitive/AppScreen/AppScreen.cjs');
 const createStyleContext = require('../../utils/createStyleContext.cjs');
 const AppBar = require('../AppBar/AppBar.cjs');
+const useTopActivity = require('../../primitive/private/useTopActivity.cjs');
+const react = require('@stackflow/react');
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext.createStyleContext(appScreen.appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -17,21 +19,23 @@ const AppScreenRoot = React.forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appScreen.appScreen.splitVariantProps({ ...contextProps, ...props });
   const transitionStyle = variantProps.transitionStyle ?? (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+  const topActivityTransitionStyle = useTopActivity.useTopActivity().transitionStyle;
   const classNames = appScreen.appScreen({
     ...variantProps,
-    transitionStyle
+    transitionStyle: react.useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
     AppBar.AppBarPropsProvider,
     {
       value: React.useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-        [variantProps.theme, transitionStyle, variantProps.tone]
+        () => ({ ...variantProps, transitionStyle }),
+        [variantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         AppScreen.AppScreenRoot,
         {
           ref,
+          "data-transition-style": transitionStyle,
           ...domUtils.mergeProps({ className: classNames.root }, otherProps)
         }
       )

package/lib/components/AppScreen/AppScreen.js

@@ -6,6 +6,8 @@ import { forwardRef, useMemo } from 'react';
 import { AppScreenDim as AppScreenDim$1, AppScreenEdge as AppScreenEdge$1, AppScreenLayer as AppScreenLayer$1, AppScreenRoot as AppScreenRoot$1 } from '../../primitive/AppScreen/AppScreen.js';
 import { createStyleContext } from '../../utils/createStyleContext.js';
 import { AppBarPropsProvider } from '../AppBar/AppBar.js';
+import { useTopActivity } from '../../primitive/private/useTopActivity.js';
+import { useActivity } from '@stackflow/react';
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 const AppScreenPropsProvider = PropsProvider;
@@ -13,21 +15,23 @@ const AppScreenRoot = forwardRef((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
   const transitionStyle = variantProps.transitionStyle ?? (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
   const classNames = appScreen({
     ...variantProps,
-    transitionStyle
+    transitionStyle: useActivity().isTop ? transitionStyle : topActivityTransitionStyle
   });
   return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
     AppBarPropsProvider,
     {
       value: useMemo(
-        () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-        [variantProps.theme, transitionStyle, variantProps.tone]
+        () => ({ ...variantProps, transitionStyle }),
+        [variantProps, transitionStyle]
       ),
       children: /* @__PURE__ */ jsx(
         AppScreenRoot$1,
         {
           ref,
+          "data-transition-style": transitionStyle,
           ...mergeProps({ className: classNames.root }, otherProps)
         }
       )

package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs

@@ -109,9 +109,15 @@ function useGlobalInteraction() {
     () => ({
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType
+      "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType]
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle
+    ]
   );
   return React.useMemo(
     () => ({

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -105,9 +105,15 @@ function useGlobalInteraction() {
     () => ({
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType
+      "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType]
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle
+    ]
   );
   return useMemo(
     () => ({

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

package/lib/primitive/private/useTopActivity.d.ts

@@ -1,4 +1,5 @@
 export declare function useTopActivity(): {
     transitionState: "enter-active" | "enter-done" | "exit-active" | "exit-done";
     activityType: string | undefined;
+    transitionStyle: string | undefined;
 };

package/lib/primitive/private/useTopActivity.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.1.11",
+  "version": "1.1.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -36,7 +36,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.1.10",
+    "@seed-design/css": "1.1.16",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.1.10",
+    "@seed-design/css": ">=1.1.16",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "react": ">=18.0.0",

package/src/components/AppBar/AppBar.tsx

@@ -8,6 +8,8 @@ import { forwardRef } from "react";
 import { AppBar as AppBarPrimitive } from "../../primitive";
 import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext";
 import { createStyleContext } from "../../utils/createStyleContext";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
 
 const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } =
   createStyleContext(appBar);
@@ -24,17 +26,24 @@ export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootPro
 export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
   const contextProps = useProps();
   const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-  const classNames = appBar(variantProps);
+
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
+  const resolvedVariantProps: AppBarVariantProps = {
+    // this includes the default transitionStyle decided by theme, from contextProps or props
+    ...variantProps,
+    ...(useActivity().isTop === false && {
+      transitionStyle: topActivityTransitionStyle as NonNullable<
+        AppBarVariantProps["transitionStyle"]
+      >,
+    }),
+  };
+
+  const classNames = appBar(resolvedVariantProps);
 
   return (
     <ClassNamesProvider value={classNames}>
-      <MainPropsProvider
-        value={{
-          theme: variantProps.theme,
-          transitionStyle: variantProps.transitionStyle,
-          tone: variantProps.tone,
-        }}
-      >
+      <MainPropsProvider value={resolvedVariantProps}>
         <AppBarPrimitive.Root
           ref={ref}
           {...mergeProps({ className: classNames.root }, otherProps)}

package/src/components/AppScreen/AppScreen.tsx

@@ -4,6 +4,8 @@ import { forwardRef, useMemo } from "react";
 import { AppScreen as AppScreenPrimitive } from "../../primitive";
 import { createStyleContext } from "../../utils/createStyleContext";
 import { AppBarPropsProvider } from "../AppBar/AppBar";
+import { useTopActivity } from "../../primitive/private/useTopActivity";
+import { useActivity } from "@stackflow/react";
 
 const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen);
 
@@ -21,25 +23,30 @@ export const AppScreenRoot = forwardRef<HTMLDivElement, AppScreenRootProps>((pro
   const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props });
 
   // TODO: we have to implement conditional default in recipe; this is temporal workaround.
-  const transitionStyle =
+  const transitionStyle: NonNullable<AppScreenVariantProps["transitionStyle"]> =
     variantProps.transitionStyle ??
     (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid");
 
+  const topActivityTransitionStyle = useTopActivity().transitionStyle;
+
   const classNames = appScreen({
     ...variantProps,
-    transitionStyle,
+    transitionStyle: useActivity().isTop
+      ? transitionStyle
+      : (topActivityTransitionStyle as NonNullable<AppScreenVariantProps["transitionStyle"]>),
   });
 
   return (
     <ClassNamesProvider value={classNames}>
       <AppBarPropsProvider
         value={useMemo(
-          () => ({ theme: variantProps.theme, transitionStyle, tone: variantProps.tone }),
-          [variantProps.theme, transitionStyle, variantProps.tone],
+          () => ({ ...variantProps, transitionStyle }),
+          [variantProps, transitionStyle],
         )}
       >
         <AppScreenPrimitive.Root
           ref={ref}
+          data-transition-style={transitionStyle}
           {...mergeProps({ className: classNames.root }, otherProps)}
         />
       </AppBarPropsProvider>

package/src/primitive/GlobalInteraction/useGlobalInteraction.ts

@@ -162,8 +162,14 @@ export function useGlobalInteraction() {
       "data-swipe-back-state": swipeBackState,
       "data-global-transition-state": topActivity.transitionState,
       "data-top-activity-type": topActivity.activityType,
+      "data-top-transition-style": topActivity.transitionStyle,
     }),
-    [swipeBackState, topActivity.transitionState, topActivity.activityType],
+    [
+      swipeBackState,
+      topActivity.transitionState,
+      topActivity.activityType,
+      topActivity.transitionStyle,
+    ],
   ) as React.HTMLAttributes<HTMLElement>;
 
   return useMemo(

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

@@ -16,6 +16,7 @@ export function useTopActivity() {
   // TODO: There should be a better way to handle this. We should not rely on the DOM element to get the activity type.
   const [topEl, setTopEl] = useState<HTMLElement | null>(null);
   const activityType = topEl?.dataset["activityType"];
+  const transitionStyle = topEl?.dataset["transitionStyle"];
 
   useLayoutEffect(() => {
     if (!topId) return;
@@ -27,5 +28,6 @@ export function useTopActivity() {
   return {
     transitionState,
     activityType,
+    transitionStyle,
   };
 }