@stackflow/plugin-basic-ui 0.20.0 → 0.20.2-alpha.3

package/src/components/AppScreen.tsx

@@ -2,7 +2,7 @@
 
 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 {
@@ -19,11 +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">;
-
   preventSwipeBack?: boolean;
   children: React.ReactNode;
 };
@@ -89,52 +97,66 @@ 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]: 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",
+    <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>
   );
 };
 

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

@@ -10,7 +10,7 @@ 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"]> & {

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

@@ -10,7 +10,7 @@ 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"]> & {

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];

package/src/index.ts

@@ -1,5 +1,13 @@
 export { basicUIPlugin } from "./basicUIPlugin";
-export { default as AppScreen } from "./components/AppScreen";
-export { default as BottomSheet } from "./components/BottomSheet";
-export { default as Modal } from "./components/Modal";
+export {
+  default as AppScreen,
+  AppScreenContext,
+  AppScreenProps,
+  useAppScreen,
+} from "./components/AppScreen";
+export {
+  default as BottomSheet,
+  BottomSheetProps,
+} from "./components/BottomSheet";
+export { default as Modal, ModalProps } from "./components/Modal";
 export { globalVars as cssVars } from "./theme.css";