@stackflow/plugin-basic-ui 0.14.1 → 0.14.2

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 { theme } = useGlobalOptions();
   const activity = useActivity();
   const { pop } = useActions();
 
@@ -72,6 +77,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}`,

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);
-}