@stackflow/plugin-basic-ui 1.7.0-canary.1 → 1.8.0

package/dist/index.js

@@ -48,7 +48,8 @@ __export(src_exports, {
   cssVars: () => globalVars,
   modalVars: () => vars3,
   useAppScreen: () => useAppScreen,
-  useStyleEffect: () => useStyleEffect
+  useStyleEffect: () => useStyleEffect,
+  useZIndexBase: () => useZIndexBase
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -394,9 +395,8 @@ function useStyleEffectOffset({
           opacity = "1";
           break;
         }
-        case "android":
         default: {
-          transform = activityEnterStyle === "slideInLeft" ? `translate3d(-50%, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
+          transform = activityEnterStyle === "slideInLeft" ? "translate3d(-50%, 0, 0)" : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
           opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
           break;
         }
@@ -432,7 +432,6 @@ function useStyleEffectOffset({
               return () => {
                 cleanup();
               };
-            case "enter-active":
             default:
               return noop;
           }
@@ -635,6 +634,13 @@ function useStyleEffectSwipeBack({
   });
 }
 
+// src/hooks/useZIndexBase.ts
+function useZIndexBase() {
+  var _a;
+  const activity = useNullableActivity();
+  return ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
+}
+
 // src/components/AppBar.tsx
 var import_react7 = require("@stackflow/react");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
@@ -714,6 +720,7 @@ var AppBar = (0, import_react8.forwardRef)(
           "button",
           {
             type: "button",
+            "aria-label": "Go Back",
             className: backButton,
             onClick: onBackClick,
             children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBack_default, {})
@@ -837,7 +844,6 @@ var AppBar = (0, import_react8.forwardRef)(
                     {
                       className: centerMainEdge,
                       type: "button",
-                      "aria-hidden": "true",
                       onClick: onTopClick
                     }
                   )
@@ -872,7 +878,7 @@ var AppScreen = ({
   ANDROID_ONLY_activityEnterStyle,
   children
 }) => {
-  var _a, _b;
+  var _a;
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
   const mounted = useMounted();
@@ -886,7 +892,7 @@ var AppScreen = ({
   const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
   const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
   const hasAppBar = !!appBar2;
-  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
+  const zIndexBase = useZIndexBase();
   let zIndexDim;
   let zIndexPaper;
   let zIndexEdge;
@@ -899,7 +905,6 @@ var AppScreen = ({
       zIndexAppBar = zIndexBase + 7;
       break;
     }
-    case "android":
     default: {
       zIndexDim = zIndexBase;
       zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
@@ -908,7 +913,7 @@ var AppScreen = ({
       break;
     }
   }
-  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
+  const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   const lazyTransitionState = useLazy(transitionState);
   useStyleEffectHide({
     refs: [appScreenRef],
@@ -932,10 +937,10 @@ var AppScreen = ({
     hasEffect: true
   });
   const onAppBarTopClick = (e) => {
-    var _a2, _b2;
+    var _a2, _b;
     (_a2 = appBar2 == null ? void 0 : appBar2.onTopClick) == null ? void 0 : _a2.call(appBar2, e);
     if (!e.defaultPrevented) {
-      (_b2 = paperRef.current) == null ? void 0 : _b2.scroll({
+      (_b = paperRef.current) == null ? void 0 : _b.scroll({
         top: 0,
         behavior: "smooth"
       });
@@ -1031,25 +1036,26 @@ var BottomSheet = ({
   borderRadius = "1rem",
   backgroundColor,
   dimBackgroundColor,
+  paperRef,
   onOutsideClick,
   children
 }) => {
-  var _a, _b, _c;
+  var _a;
   const activity = useNullableActivity();
   const { pop } = (0, import_react11.useActions)();
   const containerRef = (0, import_react12.useRef)(null);
-  const paperRef = (0, import_react12.useRef)(null);
+  const dimRef = (0, import_react12.useRef)(null);
   useStyleEffect({
     styleName: "hide",
     refs: [containerRef]
   });
   useStyleEffect({
     styleName: "offset",
-    refs: [paperRef]
+    refs: [dimRef]
   });
   useStyleEffect({
     styleName: "swipe-back",
-    refs: [paperRef]
+    refs: [dimRef]
   });
   const popLock = (0, import_react12.useRef)(false);
   const onDimClick = (e) => {
@@ -1066,9 +1072,9 @@ var BottomSheet = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
-  const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
-  const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
+  const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -1089,7 +1095,7 @@ var BottomSheet = ({
       "data-stackflow-component-name": "BottomSheet",
       "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
       "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: paper2, onClick: onPaperClick, children }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: dim2, ref: dimRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: paper2, ref: paperRef, onClick: onPaperClick, children }) })
     }
   );
 };
@@ -1117,7 +1123,7 @@ var Modal = ({
   onOutsideClick,
   children
 }) => {
-  var _a, _b, _c;
+  var _a;
   const activity = useNullableActivity();
   const { pop } = (0, import_react13.useActions)();
   const containerRef = (0, import_react14.useRef)(null);
@@ -1149,9 +1155,9 @@ var Modal = ({
   const onPaperClick = (e) => {
     e.stopPropagation();
   };
-  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
-  const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
-  const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
+  const transitionState = (_a = activity == null ? void 0 : activity.transitionState) != null ? _a : "enter-done";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {