@stackflow/plugin-basic-ui 0.21.3-alpha.0 → 0.21.4-alpha.4

package/src/hooks/useStyleEffect.ts

@@ -2,6 +2,7 @@ import type { ActivityTransitionState } from "@stackflow/core";
 import type React from "react";
 import { useEffect } from "react";
 
+import { noop } from "../utils";
 import { useNullableActivity } from "./useNullableActivity";
 
 const connections: {
@@ -14,17 +15,17 @@ const connections: {
   >;
 } = {};
 
-export function useStyleEffect({
+export function useStyleEffect<T extends HTMLElement>({
   styleName,
   refs,
   effect,
   effectDeps,
 }: {
   styleName: string;
-  refs: Array<React.RefObject<any>>;
+  refs: Array<React.RefObject<T>>;
   effect?: (params: {
     activityTransitionState: ActivityTransitionState;
-    refs: Array<React.RefObject<HTMLElement>>;
+    refs: Array<React.RefObject<T>>;
   }) => (() => void) | void;
   effectDeps?: any[];
 }) {
@@ -32,7 +33,7 @@ export function useStyleEffect({
 
   useEffect(() => {
     if (!activity) {
-      return () => {};
+      return noop;
     }
     if (!connections[styleName]) {
       connections[styleName] = new Map();
@@ -50,14 +51,14 @@ export function useStyleEffect({
 
   useEffect(() => {
     if (!activity) {
-      return () => {};
+      return noop;
     }
     if (!effect) {
-      return () => {};
+      return noop;
     }
 
     const refs = (() => {
-      let arr: Array<React.RefObject<any>> = [];
+      let arr: Array<React.RefObject<T>> = [];
 
       for (let i = 1; i <= activity.zIndex; i += 1) {
         const connection = connections[styleName].get(activity.zIndex - i);

package/src/hooks/useStyleEffectHide.ts

@@ -2,6 +2,7 @@
 
 import type React from "react";
 
+import { noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 
 export function useStyleEffectHide({
@@ -45,7 +46,7 @@ export function useStyleEffectHide({
             default: {
               cleanup();
 
-              return () => {};
+              return noop;
             }
           }
         }

package/src/hooks/useStyleEffectOffset.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-import { listenOnce, requestNextFrame } from "../utils";
+import { listenOnce, noop, requestNextFrame } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 
 export const OFFSET_PX_ANDROID = 32;
@@ -62,7 +62,7 @@ export function useStyleEffectOffset({
                   };
                 case "enter-active":
                 default:
-                  return () => {};
+                  return noop;
               }
             }
             case "exit-active":
@@ -71,10 +71,10 @@ export function useStyleEffectOffset({
                 cleanup();
               });
 
-              return () => {};
+              return noop;
             }
             default: {
-              return () => {};
+              return noop;
             }
           }
         }

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-import { listenOnce } from "../utils";
+import { listenOnce, noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 import { OFFSET_PX_CUPERTINO } from "./useStyleEffectOffset";
 
@@ -27,11 +27,11 @@ export function useStyleEffectSwipeBack({
     effect: hasEffect
       ? ({ refs }) => {
           if (theme !== "cupertino") {
-            return () => {};
+            return noop;
           }
 
           if (!dimRef.current || !edgeRef.current || !paperRef.current) {
-            return () => {};
+            return noop;
           }
 
           const $dim = dimRef.current;

package/src/theme.css.ts

@@ -18,6 +18,7 @@ export const globalVars = createGlobalThemeContract(
       iconColor: "app-bar-icon-color",
       textColor: "app-bar-text-color",
       backgroundColor: "app-bar-background-color",
+      overflow: "app-bar-overflow",
     },
     bottomSheet: {
       borderRadius: "bottom-sheet-border-radius",
@@ -44,6 +45,7 @@ const defaultVars = {
     iconColor: "#212124",
     textColor: "#212124",
     backgroundColor: "#fff",
+    overflow: "hidden",
   },
   bottomSheet: {
     borderRadius: "1rem",

package/src/utils/index.ts

@@ -1,5 +1,7 @@
 export * from "./compact";
 export * from "./compactMap";
+export * from "./isBrowser";
+export * from "./isServer";
 export * from "./last";
 export * from "./listenOnce";
 export * from "./listenResize";

package/src/utils/isBrowser.ts

@@ -0,0 +1,9 @@
+import { isServer } from "./isServer";
+
+/**
+ * @description
+ * 현재 JS 런타임이 브라우저 환경인지 확인해요.
+ */
+export function isBrowser() {
+  return !isServer();
+}

package/src/utils/isServer.ts

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * 현재 JS 런타임이 서버 환경인지 확인해요.
+ */
+export function isServer() {
+  return typeof window === "undefined";
+}