@stackflow/plugin-basic-ui 0.19.3-alpha.1 → 0.20.1

package/src/components/AppBar.tsx

@@ -1,10 +1,10 @@
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
-import { useMaxWidth } from "../hooks";
+import { useMaxWidth, useNullableActivity } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap, noop } from "../utils";
@@ -17,6 +17,7 @@ type AppBarProps = Partial<
     | "borderColor"
     | "borderSize"
     | "height"
+    | "heightTransitionDuration"
     | "iconColor"
     | "textColor"
     | "backgroundColor"
@@ -66,7 +67,7 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     ref,
   ) => {
     const actions = useActions();
-    const activity = useActivity();
+    const activity = useNullableActivity();
 
     const globalOptions = useGlobalOptions();
     const globalCloseButton = globalOptions.appBar?.closeButton;
@@ -90,6 +91,9 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     };
 
     const renderBackButton = () => {
+      if (!activity) {
+        return null;
+      }
       if (activity.isRoot) {
         return null;
       }
@@ -136,10 +140,9 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     };
 
     const renderCloseButton = () => {
-      if (
-        (!closeButton && !globalOptions.appBar?.closeButton) ||
-        !activity.isRoot
-      ) {
+      const isRoot = !activity || activity.isRoot;
+
+      if ((!closeButton && !globalOptions.appBar?.closeButton) || !isRoot) {
         return null;
       }
       if (closeButton && "render" in closeButton && closeButton.render) {
@@ -206,37 +209,42 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
           }),
         )}
       >
-        <div className={css.left}>
-          {closeButtonLocation === "left" && renderCloseButton()}
-          {renderBackButton()}
-          {appendLeft?.()}
-        </div>
-        <div ref={centerRef} className={css.center}>
-          <div
-            className={css.centerMain({
-              hasLeft,
-            })}
-          >
-            {typeof title === "string" ? (
-              <div className={css.centerText}>{title}</div>
-            ) : (
-              title
-            )}
-            <button
-              className={css.centerMainEdge}
-              type="button"
-              aria-hidden="true"
-              onClick={onTopClick}
-            />
+        <div className={css.safeArea} />
+        <div className={css.container}>
+          <div className={css.left}>
+            {closeButtonLocation === "left" && renderCloseButton()}
+            {renderBackButton()}
+            {appendLeft?.()}
+          </div>
+          <div ref={centerRef} className={css.center}>
+            <div
+              className={css.centerMain({
+                hasLeft,
+              })}
+            >
+              {typeof title === "string" ? (
+                <div className={css.centerText}>{title}</div>
+              ) : (
+                title
+              )}
+              <button
+                className={css.centerMainEdge}
+                type="button"
+                aria-hidden="true"
+                onClick={onTopClick}
+              />
+            </div>
+          </div>
+          <div className={css.right}>
+            {appendRight?.()}
+            {closeButtonLocation === "right" && renderCloseButton()}
           </div>
-        </div>
-        <div className={css.right}>
-          {appendRight?.()}
-          {closeButtonLocation === "right" && renderCloseButton()}
         </div>
       </div>
     );
   },
 );
 
+AppBar.displayName = "AppBar";
+
 export default AppBar;

package/src/components/AppScreen.css.ts

@@ -1,5 +1,4 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
 import { recipe } from "@vanilla-extract/recipes";
 
 import { f } from "../styles";
@@ -42,7 +41,7 @@ export const enterActive = style({});
 export const enterDone = style({});
 export const exitActive = style({});
 export const exitDone = style({
-  transform: "translateX(100%)",
+  transform: "translate3d(100%, 0, 0)",
 });
 
 export const appScreen = recipe({
@@ -64,6 +63,7 @@ export const dim = style([
   {
     opacity: 0,
     zIndex: vars.zIndexes.dim,
+    willChange: "opacity",
     selectors: {
       [`${android} &, ${rootAndroid} &`]: {
         height: "10rem",
@@ -97,27 +97,28 @@ export const paper = recipe({
         display: "none",
       },
       zIndex: vars.zIndexes.paper,
+      willChange: "transform",
       selectors: {
         [`${cupertino} &, ${rootCupertino} &`]: {
-          transform: "translateX(100%)",
+          transform: "translate3d(100%, 0, 0)",
         },
         [`${cupertino} ${enterActive} &, ${rootCupertino} ${enterActive} &`]: {
-          transform: "translateX(0)",
+          transform: "translate3d(0, 0, 0)",
         },
         [`${cupertino} ${enterDone} &, ${rootCupertino} ${enterDone} &`]: {
-          transform: "translateX(0)",
+          transform: "translate3d(0, 0, 0)",
         },
         [`${android} &, ${rootAndroid} &`]: {
           opacity: 0,
-          transform: "translateY(10rem)",
+          transform: "translate3d(0, 10rem, 0)",
         },
         [`${android} ${enterActive} &, ${rootAndroid} ${enterActive} &`]: {
           opacity: 1,
-          transform: "translateY(0)",
+          transform: "translate3d(0, 0, 0)",
         },
         [`${android} ${enterDone} &, ${rootAndroid} ${enterDone} &`]: {
           opacity: 1,
-          transform: "translateY(0)",
+          transform: "translate3d(0, 0, 0)",
         },
       },
     },
@@ -127,7 +128,7 @@ export const paper = recipe({
       true: [
         f.borderBox,
         {
-          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, height ${globalVars.appBar.showTransitionDuration}`,
+          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, padding-top ${globalVars.appBar.heightTransitionDuration}`,
           paddingTop: [
             `calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
             `calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
@@ -153,7 +154,7 @@ export const edge = recipe({
     hasAppBar: {
       true: {
         top: globalVars.appBar.height,
-        height: calc("100%").subtract(globalVars.appBar.height).toString(),
+        height: `calc(100% - ${globalVars.appBar.height})`,
       },
     },
   },

package/src/components/AppScreen.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable no-param-reassign */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import React, { createContext, useContext, useMemo, useRef } from "react";
 
 import { useGlobalOptions } from "../basicUIPlugin";
 import {
   useLazy,
+  useNullableActivity,
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
@@ -18,12 +19,19 @@ import { compactMap } from "../utils";
 import AppBar from "./AppBar";
 import * as css from "./AppScreen.css";
 
-type AppScreenProps = Partial<
+export type AppScreenContext = {
+  scroll: (args: { top: number }) => void;
+};
+const Context = createContext<AppScreenContext>(null as any);
+
+export function useAppScreen() {
+  return useContext(Context);
+}
+
+export type AppScreenProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > & {
   appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
-  showAppBar?: boolean;
-  showAppBarTransitionDuration?: string;
   preventSwipeBack?: boolean;
   children: React.ReactNode;
 };
@@ -31,13 +39,11 @@ const AppScreen: React.FC<AppScreenProps> = ({
   backgroundColor,
   dimBackgroundColor,
   appBar,
-  showAppBar = !!appBar,
-  showAppBarTransitionDuration,
   preventSwipeBack,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const appScreenRef = useRef<HTMLDivElement>(null);
@@ -67,16 +73,16 @@ const AppScreen: React.FC<AppScreenProps> = ({
     },
   });
 
-  const hasAppBar = !!appBar && showAppBar;
+  const hasAppBar = !!appBar;
 
-  const zIndexBase = activity.zIndex * 5;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5;
   const zIndexDim = zIndexBase;
   const zIndexPaper =
     zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
   const zIndexEdge = zIndexBase + 4;
   const zIndexAppBar = zIndexBase + 7;
 
-  const { transitionState } = activity;
+  const transitionState = activity?.transitionState ?? "enter-done";
   const lazyTransitionState = useLazy(transitionState);
 
   const onAppBarTopClick: React.MouseEventHandler = (e) => {
@@ -91,53 +97,69 @@ const AppScreen: React.FC<AppScreenProps> = ({
   };
 
   return (
-    <div
-      ref={appScreenRef}
-      className={css.appScreen({
-        transitionState:
-          transitionState === "enter-done" || transitionState === "exit-done"
-            ? transitionState
-            : lazyTransitionState,
-      })}
-      style={assignInlineVars(
-        compactMap({
-          [globalVars.backgroundColor]: backgroundColor,
-          [globalVars.dimBackgroundColor]: dimBackgroundColor,
-          [globalVars.appBar.height]: showAppBar ? appBar?.height : "0",
-          [globalVars.appBar.showTransitionDuration]:
-            showAppBarTransitionDuration,
-          [css.vars.zIndexes.dim]: `${zIndexDim}`,
-          [css.vars.zIndexes.paper]: `${zIndexPaper}`,
-          [css.vars.zIndexes.edge]: `${zIndexEdge}`,
-          [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,
-          [css.vars.transitionDuration]:
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "exit-active"
-              ? `var(--stackflow-transition-duration)`
-              : "0ms",
+    <Context.Provider
+      value={useMemo(
+        () => ({
+          scroll({ top }) {
+            paperRef?.current?.scroll({
+              top,
+              behavior: "smooth",
+            });
+          },
         }),
+        [paperRef],
       )}
     >
-      <div className={css.dim} ref={dimRef} />
       <div
-        key={activity.id}
-        className={css.paper({
-          hasAppBar,
+        ref={appScreenRef}
+        className={css.appScreen({
+          transitionState:
+            transitionState === "enter-done" || transitionState === "exit-done"
+              ? transitionState
+              : lazyTransitionState,
         })}
-        ref={paperRef}
+        style={assignInlineVars(
+          compactMap({
+            [globalVars.backgroundColor]: backgroundColor,
+            [globalVars.dimBackgroundColor]: dimBackgroundColor,
+            [globalVars.appBar.height]: appBar?.height,
+            [globalVars.appBar.heightTransitionDuration]:
+              appBar?.heightTransitionDuration,
+            [css.vars.zIndexes.dim]: `${zIndexDim}`,
+            [css.vars.zIndexes.paper]: `${zIndexPaper}`,
+            [css.vars.zIndexes.edge]: `${zIndexEdge}`,
+            [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,
+            [css.vars.transitionDuration]:
+              transitionState === "enter-active" ||
+              transitionState === "exit-active"
+                ? `var(--stackflow-transition-duration)`
+                : "0ms",
+          }),
+        )}
       >
-        {children}
-      </div>
-      {!activity.isRoot &&
-        globalOptions.theme === "cupertino" &&
-        !preventSwipeBack && (
-          <div className={css.edge({ hasAppBar })} ref={edgeRef} />
+        <div className={css.dim} ref={dimRef} />
+        <div
+          key={activity?.id}
+          className={css.paper({
+            hasAppBar,
+          })}
+          ref={paperRef}
+        >
+          {children}
+        </div>
+        {!activity?.isRoot &&
+          globalOptions.theme === "cupertino" &&
+          !preventSwipeBack && (
+            <div className={css.edge({ hasAppBar })} ref={edgeRef} />
+          )}
+        {appBar && (
+          <AppBar {...appBar} ref={appBarRef} onTopClick={onAppBarTopClick} />
         )}
-      {appBar && (
-        <AppBar {...appBar} ref={appBarRef} onTopClick={onAppBarTopClick} />
-      )}
-    </div>
+      </div>
+    </Context.Provider>
   );
 };
 
+AppScreen.displayName = "AppScreen";
+
 export default AppScreen;

package/src/components/BottomSheet.css.ts

@@ -20,7 +20,7 @@ export const enterActive = style({});
 export const enterDone = style({});
 export const exitActive = style({});
 export const exitDone = style({
-  transform: "translateX(100%)",
+  transform: "translate3d(100%, 0, 0)",
 });
 
 export const container = recipe({
@@ -62,15 +62,16 @@ export const paper = style([
     backgroundColor: globalVars.backgroundColor,
     width: "100%",
     borderRadius: `${globalVars.bottomSheet.borderRadius} ${globalVars.bottomSheet.borderRadius} 0 0`,
-    transform: "translateY(100%)",
+    willChange: "transform, opacity",
+    transform: "translate3d(0, 100%, 0)",
     opacity: 0,
     selectors: {
       [`${enterActive} &, ${enterDone} &`]: {
-        transform: "translateY(0)",
+        transform: "translate3d(0, 0, 0)",
         opacity: 1,
       },
       [`${exitActive} &, ${exitDone} &`]: {
-        transform: "translateY(100%)",
+        transform: "translate3d(0, 100%, 0)",
         opacity: 0,
       },
     },

package/src/components/BottomSheet.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
-import { useLazy, useStyleEffect } from "../hooks";
+import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 
-type BottomSheetProps = Partial<
+export type BottomSheetProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["bottomSheet"]> & {
@@ -24,7 +24,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   onOutsideClick,
   children,
 }) => {
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -63,13 +63,14 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = activity.zIndex * 5 + 3;
-  const zIndexPaper = activity.zIndex * 5 + 4;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
+  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const transitionState = activity?.transitionState ?? "enter-done";
 
   return (
     <div
       className={css.container({
-        transitionState: useLazy(activity.transitionState),
+        transitionState: useLazy(transitionState),
       })}
       ref={containerRef}
       style={assignInlineVars(
@@ -80,8 +81,8 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]:
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "exit-active"
+            transitionState === "enter-active" ||
+            transitionState === "exit-active"
               ? `var(--stackflow-transition-duration)`
               : "0ms",
         }),
@@ -96,4 +97,6 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   );
 };
 
+BottomSheet.displayName = "BottomSheet";
+
 export default BottomSheet;

package/src/components/Modal.css.ts

@@ -20,7 +20,7 @@ export const enterActive = style({});
 export const enterDone = style({});
 export const exitActive = style({});
 export const exitDone = style({
-  transform: "translateX(100%)",
+  transform: "translate3d(100%, 0, 0)",
 });
 
 export const container = recipe({
@@ -66,6 +66,7 @@ export const paper = style([
     boxShadow:
       "0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1)",
     borderRadius: globalVars.modal.borderRadius,
+    willChange: "transform, opacity",
     transform: "scale(1.1)",
     opacity: 0,
     selectors: {

package/src/components/Modal.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
-import { useLazy, useStyleEffect } from "../hooks";
+import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 
-type ModalProps = Partial<
+export type ModalProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["modal"]> & {
@@ -24,7 +24,7 @@ const Modal: React.FC<ModalProps> = ({
   onOutsideClick,
   children,
 }) => {
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -63,13 +63,14 @@ const Modal: React.FC<ModalProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = activity.zIndex * 5 + 3;
-  const zIndexPaper = activity.zIndex * 5 + 4;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
+  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const transitionState = activity?.transitionState ?? "enter-done";
 
   return (
     <div
       className={css.container({
-        transitionState: useLazy(activity.transitionState),
+        transitionState: useLazy(transitionState),
       })}
       ref={containerRef}
       style={assignInlineVars(
@@ -80,8 +81,8 @@ const Modal: React.FC<ModalProps> = ({
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]:
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "exit-active"
+            transitionState === "enter-active" ||
+            transitionState === "exit-active"
               ? `var(--stackflow-transition-duration)`
               : "0ms",
         }),
@@ -96,4 +97,6 @@ const Modal: React.FC<ModalProps> = ({
   );
 };
 
+Modal.displayName = "Modal";
+
 export default Modal;

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useLazy";
 export * from "./useMaxWidth";
+export * from "./useNullableActivity";
 export * from "./useStyleEffect";
 export * from "./useStyleEffectHide";
 export * from "./useStyleEffectOffset";

package/src/hooks/useNullableActivity.ts

@@ -0,0 +1,6 @@
+import type { Activity } from "@stackflow/core";
+import { useActivity } from "@stackflow/react";
+
+export function useNullableActivity() {
+  return useActivity() as Activity | null;
+}

package/src/hooks/useStyleEffect.ts

@@ -1,8 +1,9 @@
 import type { ActivityTransitionState } from "@stackflow/core";
-import { useActivity } from "@stackflow/react";
 import type React from "react";
 import { useEffect } from "react";
 
+import { useNullableActivity } from "./useNullableActivity";
+
 const connections: {
   [styleName: string]: Map<
     number,
@@ -25,9 +26,12 @@ export function useStyleEffect({
     refs: Array<React.RefObject<HTMLElement>>;
   }) => (() => void) | void;
 }) {
-  const activity = useActivity();
+  const activity = useNullableActivity();
 
   useEffect(() => {
+    if (!activity) {
+      return () => {};
+    }
     if (!connections[styleName]) {
       connections[styleName] = new Map();
     }
@@ -40,9 +44,12 @@ export function useStyleEffect({
     return () => {
       connections[styleName].delete(activity.zIndex);
     };
-  }, [activity.id, refs, effect]);
+  }, [activity?.id, refs, effect]);
 
   useEffect(() => {
+    if (!activity) {
+      return () => {};
+    }
     if (!effect) {
       return () => {};
     }
@@ -72,5 +79,5 @@ export function useStyleEffect({
     return () => {
       cleanup?.();
     };
-  }, [activity.transitionState]);
+  }, [activity?.transitionState]);
 }

package/src/hooks/useStyleEffectOffset.ts

@@ -22,8 +22,8 @@ export function useStyleEffectOffset({
       ? ({ activityTransitionState, refs }) => {
           const transform =
             theme === "cupertino"
-              ? `translateX(-${OFFSET_PX_CUPERTINO / 16}rem)`
-              : `translateY(-${OFFSET_PX_ANDROID / 16}rem)`;
+              ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`
+              : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
 
           const cleanup = () => {
             requestNextFrame(() => {

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -72,7 +72,7 @@ export function useStyleEffectSwipeBack({
                 $dim.style.transition = "0s";
 
                 $paper.style.overflowY = "hidden";
-                $paper.style.transform = `translateX(${dx}px)`;
+                $paper.style.transform = `translate3d(${dx}px, 0, 0)`;
                 $paper.style.transition = "0s";
 
                 refs.forEach((ref) => {
@@ -80,9 +80,9 @@ export function useStyleEffectSwipeBack({
                     return;
                   }
 
-                  ref.current.style.transform = `translateX(${
+                  ref.current.style.transform = `translate3d(${
                     -1 * (1 - p) * OFFSET_PX_CUPERTINO
-                  }px)`;
+                  }px, 0, 0)`;
                   ref.current.style.transition = "0s";
 
                   if (ref.current.parentElement?.style.display === "none") {
@@ -112,9 +112,9 @@ export function useStyleEffectSwipeBack({
                   }
 
                   ref.current.style.transition = `var(--stackflow-transition-duration)`;
-                  ref.current.style.transform = `translateX(${
+                  ref.current.style.transform = `translate3d(${
                     swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
-                  })`;
+                  }, 0, 0)`;
                 });
 
                 const _cachedRefs = [...cachedRefs];