@stackflow/plugin-basic-ui 1.10.1-canary.3 → 1.11.0

package/src/components/AppScreen.css.ts

@@ -126,15 +126,21 @@ export const paper = recipe({
           vars: {
             [vars.appBar.topMargin]: globalVars.appBar.height,
           },
+          /**
+           * When `max()` and `env()` (or `constant()`) supported
+           *
+           * - https://caniuse.com/css-env-function
+           * - https://caniuse.com/css-math-functions
+           */
           "@supports": {
-            "(padding: max(0px)) and (margin-top: constant(safe-area-inset-top))":
+            "(padding: max(0px)) and (padding: constant(safe-area-inset-top))":
               {
                 vars: {
                   [vars.appBar.topMargin]:
                     `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
                 },
               },
-            "(padding: max(0px)) and (margin-top: env(safe-area-inset-top))": {
+            "(padding: max(0px)) and (padding: env(safe-area-inset-top))": {
               vars: {
                 [vars.appBar.topMargin]:
                   `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,

package/src/components/AppScreen.tsx

@@ -1,8 +1,6 @@
 import { useActions } from "@stackflow/react";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { createContext, useContext, useMemo, useRef } from "react";
-
 import {
+  useActivityDataAttributes,
   useLazy,
   useMounted,
   useNullableActivity,
@@ -11,6 +9,8 @@ import {
   useStyleEffectSwipeBack,
   useZIndexBase,
 } from "@stackflow/react-ui-core";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { createContext, useContext, useMemo, useRef } from "react";
 import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
@@ -60,6 +60,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
 }) => {
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
+  const activityDataAttributes = useActivityDataAttributes();
   const mounted = useMounted();
 
   const { pop } = useActions();
@@ -146,6 +147,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
     dimRef,
     edgeRef,
     paperRef,
+    appBarRef,
     offset: OFFSET_PX_CUPERTINO,
     transitionDuration: globalVars.transitionDuration,
     preventSwipeBack:
@@ -173,8 +175,10 @@ const AppScreen: React.FC<AppScreenProps> = ({
 
       return null;
     },
-    onSwiped() {
-      pop();
+    onSwipeEnd({ swiped }) {
+      if (swiped) {
+        pop();
+      }
     },
   });
 
@@ -236,13 +240,15 @@ const AppScreen: React.FC<AppScreenProps> = ({
           }),
         )}
         data-stackflow-component-name="AppScreen"
-        data-stackflow-activity-id={mounted ? activity?.id : undefined}
-        data-stackflow-activity-is-active={
-          mounted ? activity?.isActive : undefined
-        }
+        {...activityDataAttributes}
       >
         {activityEnterStyle !== "slideInLeft" && (
-          <div className={css.dim} ref={dimRef} />
+          <div
+            ref={dimRef}
+            className={css.dim}
+            data-part="dim"
+            {...activityDataAttributes}
+          />
         )}
         {appBar && (
           <AppBar
@@ -255,19 +261,26 @@ const AppScreen: React.FC<AppScreenProps> = ({
         )}
         <div
           key={activity?.id}
+          ref={paperRef}
           className={css.paper({
             hasAppBar,
             modalPresentationStyle,
             activityEnterStyle,
           })}
-          ref={paperRef}
+          data-part="paper"
+          {...activityDataAttributes}
         >
           {children}
         </div>
         {!activity?.isRoot &&
           globalOptions.theme === "cupertino" &&
           !isSwipeBackPrevented && (
-            <div className={css.edge({ hasAppBar })} ref={edgeRef} />
+            <div
+              ref={edgeRef}
+              className={css.edge({ hasAppBar })}
+              data-part="edge"
+              {...activityDataAttributes}
+            />
           )}
       </div>
     </Context.Provider>

package/src/components/Modal.css.ts

@@ -62,6 +62,7 @@ export const paper = style([
   {
     backgroundColor: globalVars.backgroundColor,
     width: "100%",
+    maxWidth: globalVars.modal.maxWidth,
     margin: "0 2.5rem",
     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)",

package/src/components/Modal.tsx

@@ -24,6 +24,7 @@ const Modal: React.FC<ModalProps> = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
+  maxWidth,
   onOutsideClick,
   children,
 }) => {
@@ -78,9 +79,10 @@ const Modal: React.FC<ModalProps> = ({
       ref={containerRef}
       style={assignInlineVars(
         compactMap({
-          [globalVars.bottomSheet.borderRadius]: borderRadius,
           [globalVars.backgroundColor]: backgroundColor,
           [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [globalVars.modal.borderRadius]: borderRadius,
+          [globalVars.modal.maxWidth]: maxWidth,
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]: