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

package/dist/index.mjs

@@ -360,9 +360,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;
         }
@@ -398,7 +397,6 @@ function useStyleEffectOffset({
               return () => {
                 cleanup();
               };
-            case "enter-active":
             default:
               return noop;
           }
@@ -601,6 +599,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
 import { useActions } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
@@ -680,6 +685,7 @@ var AppBar = forwardRef(
           "button",
           {
             type: "button",
+            "aria-label": "Go Back",
             className: backButton,
             onClick: onBackClick,
             children: /* @__PURE__ */ jsx4(IconBack_default, {})
@@ -803,7 +809,6 @@ var AppBar = forwardRef(
                     {
                       className: centerMainEdge,
                       type: "button",
-                      "aria-hidden": "true",
                       onClick: onTopClick
                     }
                   )
@@ -838,7 +843,7 @@ var AppScreen = ({
   ANDROID_ONLY_activityEnterStyle,
   children
 }) => {
-  var _a, _b;
+  var _a;
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
   const mounted = useMounted();
@@ -852,7 +857,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;
@@ -865,7 +870,6 @@ var AppScreen = ({
       zIndexAppBar = zIndexBase + 7;
       break;
     }
-    case "android":
     default: {
       zIndexDim = zIndexBase;
       zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
@@ -874,7 +878,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],
@@ -898,10 +902,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"
       });
@@ -997,25 +1001,26 @@ var BottomSheet = ({
   borderRadius = "1rem",
   backgroundColor,
   dimBackgroundColor,
+  paperRef,
   onOutsideClick,
   children
 }) => {
-  var _a, _b, _c;
+  var _a;
   const activity = useNullableActivity();
   const { pop } = useActions3();
   const containerRef = useRef3(null);
-  const paperRef = useRef3(null);
+  const dimRef = useRef3(null);
   useStyleEffect({
     styleName: "hide",
     refs: [containerRef]
   });
   useStyleEffect({
     styleName: "offset",
-    refs: [paperRef]
+    refs: [dimRef]
   });
   useStyleEffect({
     styleName: "swipe-back",
-    refs: [paperRef]
+    refs: [dimRef]
   });
   const popLock = useRef3(false);
   const onDimClick = (e) => {
@@ -1032,9 +1037,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__ */ jsx6(
     "div",
     {
@@ -1055,7 +1060,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__ */ jsx6("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx6("div", { className: paper2, onClick: onPaperClick, children }) })
+      children: /* @__PURE__ */ jsx6("div", { className: dim2, ref: dimRef, onClick: onDimClick, children: /* @__PURE__ */ jsx6("div", { className: paper2, ref: paperRef, onClick: onPaperClick, children }) })
     }
   );
 };
@@ -1083,7 +1088,7 @@ var Modal = ({
   onOutsideClick,
   children
 }) => {
-  var _a, _b, _c;
+  var _a;
   const activity = useNullableActivity();
   const { pop } = useActions4();
   const containerRef = useRef4(null);
@@ -1115,9 +1120,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__ */ jsx7(
     "div",
     {
@@ -1156,6 +1161,7 @@ export {
   globalVars as cssVars,
   vars3 as modalVars,
   useAppScreen,
-  useStyleEffect
+  useStyleEffect,
+  useZIndexBase
 };
 //# sourceMappingURL=index.mjs.map