@stackflow/plugin-basic-ui 0.14.1 → 0.14.3

package/src/components/AppBar.tsx

@@ -3,7 +3,8 @@ import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
 import { IconBack, IconClose } from "../assets";
-import { useMaxWidth, useTheme } from "../hooks";
+import { useGlobalOptions } from "../basicUIPlugin";
+import { useMaxWidth } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap, noop } from "../utils";
@@ -30,7 +31,7 @@ type AppBarProps = Partial<
   closeButton?:
     | {
         renderIcon?: () => React.ReactNode;
-        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
       }
     | {
         render?: () => React.ReactNode;
@@ -59,14 +60,14 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     const actions = useActions();
     const activity = useActivity();
 
-    const theme = useTheme();
+    const globalOptions = useGlobalOptions();
 
     const centerRef = useRef<any>(null);
 
     const { maxWidth } = useMaxWidth({
       outerRef: ref,
       innerRef: centerRef,
-      enable: theme === "cupertino",
+      enable: globalOptions.theme === "cupertino",
     });
 
     const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -79,14 +80,14 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
       }
     };
 
-    const isCloseButtonVisible =
+    const isRoot =
       activity.zIndex === 0 ||
       (activity.zIndex === 1 &&
         activity.transitionState === "enter-active" &&
         activity.pushedBy.name === "Replaced");
 
     const renderBackButton = () => {
-      if (isCloseButtonVisible) {
+      if (isRoot) {
         return null;
       }
 
@@ -117,11 +118,21 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
       );
     };
 
+    const onCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (closeButton && "onClick" in closeButton && closeButton.onClick) {
+        closeButton.onClick(e);
+      }
+
+      if (!e.defaultPrevented) {
+        globalOptions.appBar?.closeButton?.onClick?.(e);
+      }
+    };
+
     const renderCloseButton = () => {
-      if (!closeButton || !isCloseButtonVisible) {
+      if ((!closeButton && !globalOptions.appBar?.closeButton) || !isRoot) {
         return null;
       }
-      if ("render" in closeButton && closeButton.render) {
+      if (closeButton && "render" in closeButton && closeButton.render) {
         return closeButton.render();
       }
 
@@ -129,9 +140,11 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
         <button
           type="button"
           className={css.closeButton}
-          onClick={"onClick" in closeButton ? closeButton.onClick : noop}
+          onClick={onCloseClick}
         >
-          {"renderIcon" in closeButton && closeButton.renderIcon ? (
+          {closeButton &&
+          "renderIcon" in closeButton &&
+          closeButton.renderIcon ? (
             closeButton.renderIcon()
           ) : (
             <IconClose />

package/src/components/AppScreen.tsx

@@ -4,12 +4,12 @@ import { useActions, useActivity } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
+import { useGlobalOptions } from "../basicUIPlugin";
 import {
   useLazy,
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
-  useTheme,
 } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
@@ -24,8 +24,13 @@ type AppScreenProps = Partial<
   appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
   children: React.ReactNode;
 };
-const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
-  const theme = useTheme();
+const AppScreen: React.FC<AppScreenProps> = ({
+  backgroundColor,
+  dimBackgroundColor,
+  appBar,
+  children,
+}) => {
+  const globalOptions = useGlobalOptions();
   const activity = useActivity();
   const { pop } = useActions();
 
@@ -40,12 +45,13 @@ const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
     hasEffect: true,
   });
   useStyleEffectOffset({
-    theme,
-    refs: theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    theme: globalOptions.theme,
+    refs:
+      globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
     hasEffect: true,
   });
   useStyleEffectSwipeBack({
-    theme,
+    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
@@ -60,7 +66,8 @@ const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
 
   const zIndexBase = activity.zIndex * 5;
   const zIndexDim = zIndexBase;
-  const zIndexPaper = zIndexBase + (theme === "cupertino" && hasAppBar ? 1 : 3);
+  const zIndexPaper =
+    zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
   const zIndexEdge = zIndexBase + 4;
   const zIndexAppBar = zIndexBase + 7;
 
@@ -72,6 +79,8 @@ const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
       })}
       style={assignInlineVars(
         compactMap({
+          [globalVars.backgroundColor]: backgroundColor,
+          [globalVars.dimBackgroundColor]: dimBackgroundColor,
           [globalVars.appBar.height]: appBar?.height,
           [css.vars.zIndexes.dim]: `${zIndexDim}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
@@ -95,7 +104,7 @@ const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
       >
         {children}
       </div>
-      {!isRoot && theme === "cupertino" && (
+      {!isRoot && globalOptions.theme === "cupertino" && (
         <div className={css.edge({ hasAppBar })} ref={edgeRef} />
       )}
       {appBar && <AppBar {...appBar} ref={appBarRef} />}

package/src/components/BottomSheet.tsx

@@ -14,12 +14,14 @@ type BottomSheetProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["bottomSheet"]> & {
+    onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
 const BottomSheet: React.FC<BottomSheetProps> = ({
   borderRadius = "1rem",
   backgroundColor,
   dimBackgroundColor,
+  onOutsideClick,
   children,
 }) => {
   const activity = useActivity();
@@ -43,13 +45,19 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 
   const popLock = useRef(false);
 
-  const onDimClick = () => {
+  const onDimClick: React.MouseEventHandler = (e) => {
+    onOutsideClick?.(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
     if (popLock.current) {
       return;
     }
+    popLock.current = true;
 
     pop();
-    popLock.current = true;
   };
   const onPaperClick: React.MouseEventHandler = (e) => {
     e.stopPropagation();

package/src/components/Modal.tsx

@@ -14,12 +14,14 @@ type ModalProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > &
   Partial<GlobalVars["modal"]> & {
+    onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
   };
 const Modal: React.FC<ModalProps> = ({
   backgroundColor,
   dimBackgroundColor,
   borderRadius = "1rem",
+  onOutsideClick,
   children,
 }) => {
   const activity = useActivity();
@@ -43,13 +45,19 @@ const Modal: React.FC<ModalProps> = ({
 
   const popLock = useRef(false);
 
-  const onDimClick = () => {
+  const onDimClick: React.MouseEventHandler = (e) => {
+    onOutsideClick?.(e);
+
+    if (e.defaultPrevented) {
+      return;
+    }
+
     if (popLock.current) {
       return;
     }
+    popLock.current = true;
 
     pop();
-    popLock.current = true;
   };
   const onPaperClick: React.MouseEventHandler = (e) => {
     e.stopPropagation();

package/src/hooks/index.ts

@@ -4,4 +4,3 @@ export * from "./useStyleEffect";
 export * from "./useStyleEffectHide";
 export * from "./useStyleEffectOffset";
 export * from "./useStyleEffectSwipeBack";
-export * from "./useTheme";

package/src/utils/RecursivePartial.ts

@@ -0,0 +1,5 @@
+export type RecursivePartial<K> = {
+  [attr in keyof K]?: K[attr] extends object
+    ? RecursivePartial<K[attr]>
+    : K[attr];
+};

package/src/utils/index.ts

@@ -4,4 +4,5 @@ export * from "./listenOnce";
 export * from "./listenResize";
 export * from "./noop";
 export * from "./PropOf";
+export * from "./RecursivePartial";
 export * from "./requestNextFrame";

package/dist/hooks/useTheme.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const ThemeProvider: import("react").Provider<"android" | "cupertino">;
-export declare function useTheme(): "android" | "cupertino";

package/src/hooks/useTheme.ts

@@ -1,9 +0,0 @@
-import { createContext, useContext } from "react";
-
-const ThemeContext = createContext<"android" | "cupertino">("android");
-
-export const ThemeProvider = ThemeContext.Provider;
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}