@stackflow/plugin-basic-ui 1.8.3 → 1.9.0

package/src/components/AppScreen.tsx

@@ -2,9 +2,6 @@ import { useActions } from "@stackflow/react";
 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";
 import {
   useLazy,
   useMounted,
@@ -13,12 +10,18 @@ import {
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
   useZIndexBase,
-} from "../hooks";
+} from "@stackflow/react-ui-core";
+import { useGlobalOptions } from "../basicUIPlugin";
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import type { PropOf } from "../utils";
 import { compactMap } from "../utils";
 import AppBar from "./AppBar";
 import * as css from "./AppScreen.css";
 
+export const OFFSET_PX_ANDROID = 32;
+export const OFFSET_PX_CUPERTINO = 80;
+
 export type AppScreenContext = {
   scroll: (args: { top: number }) => void;
 };
@@ -70,7 +73,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
       ? ANDROID_ONLY_activityEnterStyle
       : undefined;
 
-  const swipeBackPrevented =
+  const isSwipeBackPrevented =
     preventSwipeBack || modalPresentationStyle === "fullScreen";
 
   const hasAppBar = !!appBar;
@@ -108,7 +111,6 @@ const AppScreen: React.FC<AppScreenProps> = ({
 
   useStyleEffectHide({
     refs: [appScreenRef],
-    hasEffect: true,
   });
   useStyleEffectOffset({
     refs:
@@ -116,20 +118,58 @@ const AppScreen: React.FC<AppScreenProps> = ({
       activityEnterStyle === "slideInLeft"
         ? [paperRef]
         : [paperRef, appBarRef],
-    theme: globalOptions.theme,
-    activityEnterStyle,
+    offsetStyles:
+      globalOptions.theme === "cupertino"
+        ? {
+            transform: `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`,
+            opacity: "1",
+          }
+        : activityEnterStyle === "slideInLeft"
+          ? {
+              transform: "translate3d(-50%, 0, 0)",
+              opacity: "0",
+            }
+          : {
+              transform: `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`,
+              opacity: "1",
+            },
+    transitionDuration: globalVars.computedTransitionDuration,
     hasEffect: modalPresentationStyle !== "fullScreen",
   });
   useStyleEffectSwipeBack({
     dimRef,
     edgeRef,
     paperRef,
-    theme: globalOptions.theme,
-    prevented: swipeBackPrevented,
+    offset: OFFSET_PX_CUPERTINO,
+    transitionDuration: globalVars.transitionDuration,
+    preventSwipeBack:
+      isSwipeBackPrevented || globalOptions.theme !== "cupertino",
+    getActivityTransitionState() {
+      const $paper = paperRef.current;
+      const $appScreen = $paper?.parentElement;
+
+      if (!$appScreen) {
+        return null;
+      }
+
+      if ($appScreen.classList.contains(css.enterActive)) {
+        return "enter-active";
+      }
+      if ($appScreen.classList.contains(css.enterDone)) {
+        return "enter-done";
+      }
+      if ($appScreen.classList.contains(css.exitActive)) {
+        return "exit-active";
+      }
+      if ($appScreen.classList.contains(css.exitDone)) {
+        return "exit-done";
+      }
+
+      return null;
+    },
     onSwiped() {
       pop();
     },
-    hasEffect: true,
   });
 
   const onAppBarTopClick: React.MouseEventHandler = (e) => {
@@ -214,7 +254,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
         </div>
         {!activity?.isRoot &&
           globalOptions.theme === "cupertino" &&
-          !swipeBackPrevented && (
+          !isSwipeBackPrevented && (
             <div className={css.edge({ hasAppBar })} ref={edgeRef} />
           )}
       </div>
@@ -222,6 +262,4 @@ const AppScreen: React.FC<AppScreenProps> = ({
   );
 };
 
-AppScreen.displayName = "AppScreen";
-
 export default AppScreen;

package/src/components/BottomSheet.tsx

@@ -2,14 +2,14 @@ import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef } from "react";
 
-import type { GlobalVars } from "../basicUIPlugin.css";
-import { globalVars } from "../basicUIPlugin.css";
 import {
   useLazy,
   useNullableActivity,
   useStyleEffect,
   useZIndexBase,
-} from "../hooks";
+} from "@stackflow/react-ui-core";
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 

package/src/components/Modal.tsx

@@ -2,14 +2,14 @@ import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef } from "react";
 
-import type { GlobalVars } from "../basicUIPlugin.css";
-import { globalVars } from "../basicUIPlugin.css";
 import {
   useLazy,
   useNullableActivity,
   useStyleEffect,
   useZIndexBase,
-} from "../hooks";
+} from "@stackflow/react-ui-core";
+import type { GlobalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 

package/src/index.ts

@@ -15,4 +15,3 @@ export {
 export { vars as bottomSheetVars } from "./components/BottomSheet.css";
 export { default as Modal, ModalProps } from "./components/Modal";
 export { vars as modalVars } from "./components/Modal.css";
-export { useStyleEffect, useZIndexBase } from "./hooks";

package/src/utils/index.ts

@@ -2,10 +2,5 @@ export * from "./compact";
 export * from "./compactMap";
 export * from "./isBrowser";
 export * from "./isServer";
-export * from "./last";
-export * from "./listenOnce";
-export * from "./listenResize";
-export * from "./noop";
 export * from "./PropOf";
 export * from "./RecursivePartial";
-export * from "./requestNextFrame";

package/dist/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC"}

package/dist/hooks/useLazy.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLazy.d.ts","sourceRoot":"","sources":["../../src/hooks/useLazy.tsx"],"names":[],"mappings":"AAIA,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,iBAUlC"}

package/dist/hooks/useMaxWidth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMaxWidth.d.ts","sourceRoot":"","sources":["../../src/hooks/useMaxWidth.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;CACjB;;EA6BA"}

package/dist/hooks/useMounted.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMounted.d.ts","sourceRoot":"","sources":["../../src/hooks/useMounted.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,YAQzB"}

package/dist/hooks/useNullableActivity.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNullableActivity.d.ts","sourceRoot":"","sources":["../../src/hooks/useNullableActivity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,wBAAgB,mBAAmB,IACT,QAAQ,GAAG,IAAI,CACxC"}

package/dist/hooks/useStyleEffect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyleEffect.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAgB/D,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,SAAS,EACT,IAAI,EACJ,MAAM,EACN,UAAU,GACX,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE;QAChB,uBAAuB,EAAE,uBAAuB,CAAC;QACjD,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACjC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;CACpB,QAuDA"}

package/dist/hooks/useStyleEffectHide.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyleEffectHide.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleEffectHide.ts"],"names":[],"mappings":"AAGA,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,QAyCA"}

package/dist/hooks/useStyleEffectOffset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyleEffectOffset.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleEffectOffset.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,kBAAkB,EAClB,SAAiB,GAClB,EAAE;IACD,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,QAkFA"}

package/dist/hooks/useStyleEffectSwipeBack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useStyleEffectSwipeBack.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleEffectSwipeBack.ts"],"names":[],"mappings":"AAMA,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,QAoOA"}

package/dist/hooks/useZIndexBase.d.ts

@@ -1,2 +0,0 @@
-export declare function useZIndexBase(): number;
-//# sourceMappingURL=useZIndexBase.d.ts.map

package/dist/hooks/useZIndexBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useZIndexBase.d.ts","sourceRoot":"","sources":["../../src/hooks/useZIndexBase.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,WAG5B"}

package/dist/utils/last.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"last.d.ts","sourceRoot":"","sources":["../../src/utils/last.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,GAAI,CAAC,OAAO,CAAC,EAAE,MAAwB,CAAC"}

package/dist/utils/listenOnce.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listenOnce.d.ts","sourceRoot":"","sources":["../../src/utils/listenOnce.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAC9C,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,mBAAmB,EAC/B,EAAE,EAAE,MAAM,IAAI,QAQf"}

package/dist/utils/listenResize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listenResize.d.ts","sourceRoot":"","sources":["../../src/utils/listenResize.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,OAAQ,MAAM,IAAI,eAO1C,CAAC"}

package/dist/utils/noop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"noop.d.ts","sourceRoot":"","sources":["../../src/utils/noop.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,YAAW,CAAC"}

package/dist/utils/requestNextFrame.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"requestNextFrame.d.ts","sourceRoot":"","sources":["../../src/utils/requestNextFrame.tsx"],"names":[],"mappings":"AACA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,IAAI,QAM9C"}

package/src/hooks/index.ts

@@ -1,9 +0,0 @@
-export * from "./useLazy";
-export * from "./useMaxWidth";
-export * from "./useMounted";
-export * from "./useNullableActivity";
-export * from "./useStyleEffect";
-export * from "./useStyleEffectHide";
-export * from "./useStyleEffectOffset";
-export * from "./useStyleEffectSwipeBack";
-export * from "./useZIndexBase";

package/src/hooks/useLazy.tsx

@@ -1,15 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { requestNextFrame } from "../utils";
-
-export function useLazy<T>(value: T) {
-  const [state, setState] = useState<T | undefined>(undefined);
-
-  useEffect(() => {
-    requestNextFrame(() => {
-      setState(value);
-    });
-  }, [value]);
-
-  return state;
-}

package/src/hooks/useMaxWidth.ts

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { listenResize, noop } from "../utils";
-
-export function useMaxWidth({
-  outerRef,
-  innerRef,
-  enable,
-}: {
-  outerRef: React.ForwardedRef<any>;
-  innerRef: React.MutableRefObject<any>;
-  enable: boolean;
-}) {
-  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);
-
-  useEffect(() => {
-    const $outer = outerRef && "current" in outerRef && outerRef.current;
-    const $inner = innerRef.current;
-
-    if (!enable || !$outer || !$inner) {
-      return noop;
-    }
-
-    const dispose = listenResize(() => {
-      const screenWidth = $outer.clientWidth;
-
-      const leftWidth = $inner.offsetLeft;
-      const centerWidth = $inner.clientWidth;
-      const rightWidth = screenWidth - leftWidth - centerWidth;
-
-      const sideMargin = Math.max(leftWidth, rightWidth);
-
-      setMaxWidth(screenWidth - 2 * sideMargin);
-    });
-
-    return dispose;
-  });
-
-  return {
-    maxWidth,
-  };
-}

package/src/hooks/useMounted.ts

@@ -1,11 +0,0 @@
-import { useEffect, useReducer, useState } from "react";
-
-export function useMounted() {
-  const [mounted, mount] = useReducer(() => true, false);
-
-  useEffect(() => {
-    mount();
-  }, []);
-
-  return mounted;
-}

package/src/hooks/useNullableActivity.ts

@@ -1,6 +0,0 @@
-import type { Activity } from "@stackflow/core";
-import { useActivity } from "@stackflow/react";
-
-export function useNullableActivity() {
-  return useActivity() as Activity | null;
-}

package/src/hooks/useStyleEffect.ts

@@ -1,85 +0,0 @@
-import type { ActivityTransitionState } from "@stackflow/core";
-import { useEffect } from "react";
-
-import { noop } from "../utils";
-import { useNullableActivity } from "./useNullableActivity";
-
-const connections: {
-  [styleName: string]: Map<
-    number,
-    {
-      refs: Array<React.RefObject<any>>;
-      hasEffect: boolean;
-    }
-  >;
-} = {};
-
-export function useStyleEffect<T extends HTMLElement>({
-  styleName,
-  refs,
-  effect,
-  effectDeps,
-}: {
-  styleName: string;
-  refs: Array<React.RefObject<T>>;
-  effect?: (params: {
-    activityTransitionState: ActivityTransitionState;
-    refs: Array<React.RefObject<T>>;
-  }) => (() => void) | undefined;
-  effectDeps?: any[];
-}) {
-  const activity = useNullableActivity();
-
-  useEffect(() => {
-    if (!activity) {
-      return noop;
-    }
-    if (!connections[styleName]) {
-      connections[styleName] = new Map();
-    }
-
-    connections[styleName].set(activity.zIndex, {
-      refs,
-      hasEffect: !!effect,
-    });
-
-    return () => {
-      connections[styleName].delete(activity.zIndex);
-    };
-  }, [activity?.id, refs, effect]);
-
-  useEffect(() => {
-    if (!activity) {
-      return noop;
-    }
-    if (!effect) {
-      return noop;
-    }
-
-    const refs = (() => {
-      let arr: Array<React.RefObject<T>> = [];
-
-      for (let i = 1; i <= activity.zIndex; i += 1) {
-        const connection = connections[styleName].get(activity.zIndex - i);
-
-        if (connection?.refs) {
-          arr = [...arr, ...connection.refs];
-        }
-        if (connection?.hasEffect) {
-          break;
-        }
-      }
-
-      return arr;
-    })();
-
-    const cleanup = effect({
-      activityTransitionState: activity.transitionState,
-      refs,
-    });
-
-    return () => {
-      cleanup?.();
-    };
-  }, [activity?.transitionState, ...(effectDeps ?? [])]);
-}

package/src/hooks/useStyleEffectHide.ts

@@ -1,51 +0,0 @@
-import { noop } from "../utils";
-import { useStyleEffect } from "./useStyleEffect";
-
-export function useStyleEffectHide({
-  refs,
-  hasEffect,
-}: {
-  refs: Array<React.RefObject<any>>;
-  hasEffect?: boolean;
-}) {
-  useStyleEffect({
-    styleName: "hide",
-    refs,
-    effect: hasEffect
-      ? ({ activityTransitionState, refs }) => {
-          const cleanup = () => {
-            refs.forEach((ref) => {
-              if (!ref.current) {
-                return;
-              }
-              const $ref = ref.current;
-
-              $ref.style.display = "";
-            });
-          };
-
-          switch (activityTransitionState) {
-            case "enter-done": {
-              refs.forEach((ref) => {
-                if (!ref.current) {
-                  return;
-                }
-                const $ref = ref.current;
-
-                $ref.style.display = "none";
-              });
-
-              return () => {
-                cleanup();
-              };
-            }
-            default: {
-              cleanup();
-
-              return noop;
-            }
-          }
-        }
-      : undefined,
-  });
-}

package/src/hooks/useStyleEffectOffset.ts

@@ -1,100 +0,0 @@
-import { globalVars } from "../basicUIPlugin.css";
-import { listenOnce, noop, requestNextFrame } from "../utils";
-import { useStyleEffect } from "./useStyleEffect";
-
-export const OFFSET_PX_ANDROID = 32;
-export const OFFSET_PX_CUPERTINO = 80;
-
-export function useStyleEffectOffset({
-  refs,
-  theme,
-  activityEnterStyle,
-  hasEffect = false,
-}: {
-  refs: Array<React.RefObject<any>>;
-  theme: "android" | "cupertino";
-  activityEnterStyle?: "slideInLeft";
-  hasEffect?: boolean;
-}) {
-  useStyleEffect({
-    styleName: "offset",
-    refs,
-    effect: hasEffect
-      ? ({ activityTransitionState, refs }) => {
-          let transform: string;
-          let opacity: string;
-
-          switch (theme) {
-            case "cupertino": {
-              transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
-              opacity = "1";
-              break;
-            }
-            default: {
-              transform =
-                activityEnterStyle === "slideInLeft"
-                  ? "translate3d(-50%, 0, 0)"
-                  : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
-              opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
-              break;
-            }
-          }
-
-          const cleanup = () => {
-            requestNextFrame(() => {
-              refs.forEach((ref) => {
-                if (!ref.current) {
-                  return;
-                }
-
-                const $el = ref.current;
-
-                $el.style.transform = "";
-                $el.style.opacity = "";
-
-                listenOnce($el, "transitionend", () => {
-                  $el.style.transition = "";
-                });
-              });
-            });
-          };
-
-          switch (activityTransitionState) {
-            case "enter-active":
-            case "enter-done": {
-              refs.forEach((ref) => {
-                if (!ref.current) {
-                  return;
-                }
-
-                ref.current.style.transition =
-                  globalVars.computedTransitionDuration;
-                ref.current.style.transform = transform;
-                ref.current.style.opacity = opacity;
-              });
-
-              switch (activityTransitionState) {
-                case "enter-done":
-                  return () => {
-                    cleanup();
-                  };
-                default:
-                  return noop;
-              }
-            }
-            case "exit-active":
-            case "exit-done": {
-              requestNextFrame(() => {
-                cleanup();
-              });
-
-              return noop;
-            }
-            default: {
-              return noop;
-            }
-          }
-        }
-      : undefined,
-  });
-}