@stackflow/plugin-basic-ui 1.4.2 → 1.5.1

package/dist/hooks/index.d.ts

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

package/dist/hooks/useMounted.d.ts

@@ -0,0 +1 @@
+export declare function useMounted(): boolean;

package/dist/index.d.ts

@@ -2,5 +2,8 @@ export { IconBack, IconClose } from "./assets";
 export { basicUIPlugin } from "./basicUIPlugin";
 export { globalVars as cssVars } from "./basicUIPlugin.css";
 export { default as AppScreen, AppScreenContext, AppScreenProps, useAppScreen, } from "./components/AppScreen";
+export { vars as appScreenVars } from "./components/AppScreen.css";
 export { default as BottomSheet, BottomSheetProps, } from "./components/BottomSheet";
+export { vars as bottomSheetVars } from "./components/BottomSheet.css";
 export { default as Modal, ModalProps } from "./components/Modal";
+export { vars as modalVars } from "./components/Modal.css";

package/dist/index.js

@@ -42,8 +42,11 @@ __export(src_exports, {
   IconBack: () => IconBack_default,
   IconClose: () => IconClose_default,
   Modal: () => Modal_default,
+  appScreenVars: () => vars,
   basicUIPlugin: () => basicUIPlugin,
+  bottomSheetVars: () => vars2,
   cssVars: () => globalVars,
+  modalVars: () => vars3,
   useAppScreen: () => useAppScreen
 });
 module.exports = __toCommonJS(src_exports);
@@ -213,9 +216,9 @@ var basicUIPlugin = (options) => () => ({
 });
 
 // src/components/AppScreen.tsx
-var import_react8 = require("@stackflow/react");
+var import_react9 = require("@stackflow/react");
 var import_dynamic3 = require("@vanilla-extract/dynamic");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/useLazy.tsx
 var import_react2 = require("react");
@@ -258,14 +261,24 @@ function useMaxWidth({
   };
 }
 
+// src/hooks/useMounted.ts
+var import_react4 = require("react");
+function useMounted() {
+  const [mounted, mount] = (0, import_react4.useReducer)(() => true, false);
+  (0, import_react4.useEffect)(() => {
+    mount();
+  }, []);
+  return mounted;
+}
+
 // src/hooks/useNullableActivity.ts
-var import_react4 = require("@stackflow/react");
+var import_react5 = require("@stackflow/react");
 function useNullableActivity() {
-  return (0, import_react4.useActivity)();
+  return (0, import_react5.useActivity)();
 }
 
 // src/hooks/useStyleEffect.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var connections = {};
 function useStyleEffect({
   styleName,
@@ -274,7 +287,7 @@ function useStyleEffect({
   effectDeps
 }) {
   const activity = useNullableActivity();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!activity) {
       return noop;
     }
@@ -289,7 +302,7 @@ function useStyleEffect({
       connections[styleName].delete(activity.zIndex);
     };
   }, [activity == null ? void 0 : activity.id, refs, effect]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!activity) {
       return noop;
     }
@@ -622,9 +635,9 @@ function useStyleEffectSwipeBack({
 }
 
 // src/components/AppBar.tsx
-var import_react6 = require("@stackflow/react");
+var import_react7 = require("@stackflow/react");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/AppBar.css.ts
 var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -642,7 +655,7 @@ var safeArea = "_1yk3a456";
 
 // src/components/AppBar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var AppBar = (0, import_react7.forwardRef)(
+var AppBar = (0, import_react8.forwardRef)(
   ({
     title,
     renderLeft,
@@ -668,12 +681,12 @@ var AppBar = (0, import_react7.forwardRef)(
     onTopClick
   }, ref) => {
     var _a, _b;
-    const actions = (0, import_react6.useActions)();
+    const actions = (0, import_react7.useActions)();
     const activity = useNullableActivity();
     const globalOptions = useGlobalOptions();
     const globalCloseButton = (_a = globalOptions.appBar) == null ? void 0 : _a.closeButton;
     const globalBackButton = (_b = globalOptions.appBar) == null ? void 0 : _b.backButton;
-    const centerRef = (0, import_react7.useRef)(null);
+    const centerRef = (0, import_react8.useRef)(null);
     const { maxWidth } = useMaxWidth({
       outerRef: ref,
       innerRef: centerRef,
@@ -845,9 +858,9 @@ var AppBar_default = AppBar;
 
 // src/components/AppScreen.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Context = (0, import_react9.createContext)(null);
+var Context = (0, import_react10.createContext)(null);
 function useAppScreen() {
-  return (0, import_react9.useContext)(Context);
+  return (0, import_react10.useContext)(Context);
 }
 var AppScreen = ({
   backgroundColor,
@@ -861,12 +874,13 @@ var AppScreen = ({
   var _a, _b;
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
-  const { pop } = (0, import_react8.useActions)();
-  const appScreenRef = (0, import_react9.useRef)(null);
-  const dimRef = (0, import_react9.useRef)(null);
-  const paperRef = (0, import_react9.useRef)(null);
-  const edgeRef = (0, import_react9.useRef)(null);
-  const appBarRef = (0, import_react9.useRef)(null);
+  const mounted = useMounted();
+  const { pop } = (0, import_react9.useActions)();
+  const appScreenRef = (0, import_react10.useRef)(null);
+  const dimRef = (0, import_react10.useRef)(null);
+  const paperRef = (0, import_react10.useRef)(null);
+  const edgeRef = (0, import_react10.useRef)(null);
+  const appBarRef = (0, import_react10.useRef)(null);
   const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
   const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
   const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
@@ -929,7 +943,7 @@ var AppScreen = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Context.Provider,
     {
-      value: (0, import_react9.useMemo)(
+      value: (0, import_react10.useMemo)(
         () => ({
           scroll({ top }) {
             var _a2;
@@ -962,8 +976,8 @@ var AppScreen = ({
             })
           ),
           "data-stackflow-component-name": "AppScreen",
-          "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
-          "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
+          "data-stackflow-activity-id": mounted ? activity == null ? void 0 : activity.id : void 0,
+          "data-stackflow-activity-is-active": mounted ? activity == null ? void 0 : activity.isActive : void 0,
           children: [
             activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
             appBar2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -999,9 +1013,9 @@ AppScreen.displayName = "AppScreen";
 var AppScreen_default = AppScreen;
 
 // src/components/BottomSheet.tsx
-var import_react10 = require("@stackflow/react");
+var import_react11 = require("@stackflow/react");
 var import_dynamic4 = require("@vanilla-extract/dynamic");
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/BottomSheet.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1021,9 +1035,9 @@ var BottomSheet = ({
 }) => {
   var _a, _b, _c;
   const activity = useNullableActivity();
-  const { pop } = (0, import_react10.useActions)();
-  const containerRef = (0, import_react11.useRef)(null);
-  const paperRef = (0, import_react11.useRef)(null);
+  const { pop } = (0, import_react11.useActions)();
+  const containerRef = (0, import_react12.useRef)(null);
+  const paperRef = (0, import_react12.useRef)(null);
   useStyleEffect({
     styleName: "hide",
     refs: [containerRef]
@@ -1036,7 +1050,7 @@ var BottomSheet = ({
     styleName: "swipe-back",
     refs: [paperRef]
   });
-  const popLock = (0, import_react11.useRef)(false);
+  const popLock = (0, import_react12.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {
@@ -1082,9 +1096,9 @@ BottomSheet.displayName = "BottomSheet";
 var BottomSheet_default = BottomSheet;
 
 // src/components/Modal.tsx
-var import_react12 = require("@stackflow/react");
+var import_react13 = require("@stackflow/react");
 var import_dynamic5 = require("@vanilla-extract/dynamic");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/Modal.css.ts
 var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -1104,9 +1118,9 @@ var Modal = ({
 }) => {
   var _a, _b, _c;
   const activity = useNullableActivity();
-  const { pop } = (0, import_react12.useActions)();
-  const containerRef = (0, import_react13.useRef)(null);
-  const paperRef = (0, import_react13.useRef)(null);
+  const { pop } = (0, import_react13.useActions)();
+  const containerRef = (0, import_react14.useRef)(null);
+  const paperRef = (0, import_react14.useRef)(null);
   useStyleEffect({
     styleName: "hide",
     refs: [containerRef]
@@ -1119,7 +1133,7 @@ var Modal = ({
     styleName: "swipe-back",
     refs: [paperRef]
   });
-  const popLock = (0, import_react13.useRef)(false);
+  const popLock = (0, import_react14.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {