@stackflow/plugin-basic-ui 1.9.2-canary.0 → 1.10.0

package/dist/index.js

@@ -106,27 +106,18 @@ var IconClose_default = IconClose;
 
 // src/basicUIPlugin.tsx
 var import_dynamic = require("@vanilla-extract/dynamic");
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/basicUIPlugin.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", iconColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", textColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", backgroundColorTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)", minSafeAreaInsetTop: "var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
+var stackWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
 
-// src/components/RootStyles.ts
-var import_react = require("react");
-function RootStyles({ theme, styles }) {
-  (0, import_react.useLayoutEffect)(() => {
-    const root = document.querySelector(":root");
-    if (!root) {
-      return;
-    }
-    for (const [key, value] of Object.entries(styles)) {
-      if (value) {
-        root.style.setProperty(key, value);
-      }
-    }
-    root.dataset.stackflowPluginBasicUiTheme = theme;
-  }, [styles, theme]);
-  return null;
+// src/utils/compact.ts
+function compact(arr) {
+  return arr.filter(
+    (item) => item !== void 0 && item !== null
+  );
 }
 
 // src/utils/compactMap.ts
@@ -141,68 +132,76 @@ function compactMap(obj) {
 
 // src/basicUIPlugin.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var GlobalOptionsContext = (0, import_react2.createContext)({
+var GlobalOptionsContext = (0, import_react.createContext)({
   theme: "android"
 });
 var GlobalOptionsProvider = GlobalOptionsContext.Provider;
 function useGlobalOptions() {
-  return (0, import_react2.useContext)(GlobalOptionsContext);
+  return (0, import_react.useContext)(GlobalOptionsContext);
 }
 var basicUIPlugin = (options) => () => ({
   key: "basic-ui",
   wrapStack({ stack, initialContext }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const _options = typeof options === "function" ? options({ initialContext }) : options;
-    const styles = (0, import_dynamic.assignInlineVars)(
-      compactMap({
-        [globalVars.backgroundColor]: _options.backgroundColor,
-        [globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
-        [globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
-        [globalVars.computedTransitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
-        [globalVars.appBar.borderColor]: (_a = _options.appBar) == null ? void 0 : _a.borderColor,
-        [globalVars.appBar.borderSize]: (_b = _options.appBar) == null ? void 0 : _b.borderSize,
-        [globalVars.appBar.height]: (_c = _options.appBar) == null ? void 0 : _c.height,
-        [globalVars.appBar.iconColor]: (_d = _options.appBar) == null ? void 0 : _d.iconColor,
-        [globalVars.appBar.textColor]: (_e = _options.appBar) == null ? void 0 : _e.textColor,
-        [globalVars.appBar.minSafeAreaInsetTop]: (_f = _options.appBar) == null ? void 0 : _f.minSafeAreaInsetTop,
-        [globalVars.bottomSheet.borderRadius]: (_g = _options.bottomSheet) == null ? void 0 : _g.borderRadius,
-        [globalVars.modal.borderRadius]: (_h = _options.modal) == null ? void 0 : _h.borderRadius
-      })
-    );
-    styles["pointer-events"] = stack.globalTransitionState === "loading" ? "none" : "auto";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       GlobalOptionsProvider,
       {
         value: __spreadProps(__spreadValues({}, options), {
-          theme: (_i = initialContext == null ? void 0 : initialContext.theme) != null ? _i : _options.theme
+          theme: (_a = initialContext == null ? void 0 : initialContext.theme) != null ? _a : _options.theme
         }),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RootStyles, { theme: _options.theme, styles }),
-          stack.render()
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: compact([
+              stackWrapper({
+                theme: (_b = initialContext == null ? void 0 : initialContext.theme) != null ? _b : _options.theme,
+                loading: stack.globalTransitionState === "loading"
+              }),
+              _options.rootClassName
+            ]).join(" "),
+            style: (0, import_dynamic.assignInlineVars)(
+              compactMap({
+                [globalVars.backgroundColor]: _options.backgroundColor,
+                [globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
+                [globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
+                [globalVars.computedTransitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
+                [globalVars.appBar.borderColor]: (_c = _options.appBar) == null ? void 0 : _c.borderColor,
+                [globalVars.appBar.borderSize]: (_d = _options.appBar) == null ? void 0 : _d.borderSize,
+                [globalVars.appBar.height]: (_e = _options.appBar) == null ? void 0 : _e.height,
+                [globalVars.appBar.iconColor]: (_f = _options.appBar) == null ? void 0 : _f.iconColor,
+                [globalVars.appBar.textColor]: (_g = _options.appBar) == null ? void 0 : _g.textColor,
+                [globalVars.appBar.minSafeAreaInsetTop]: (_h = _options.appBar) == null ? void 0 : _h.minSafeAreaInsetTop,
+                [globalVars.bottomSheet.borderRadius]: (_i = _options.bottomSheet) == null ? void 0 : _i.borderRadius,
+                [globalVars.modal.borderRadius]: (_j = _options.modal) == null ? void 0 : _j.borderRadius
+              })
+            ),
+            children: stack.render()
+          }
+        )
       }
     );
   }
 });
 
 // src/components/AppScreen.tsx
-var import_react5 = require("@stackflow/react");
+var import_react4 = require("@stackflow/react");
 var import_dynamic3 = require("@vanilla-extract/dynamic");
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_react_ui_core2 = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.tsx
-var import_react3 = require("@stackflow/react");
+var import_react2 = require("@stackflow/react");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_ui_core = require("@stackflow/react-ui-core");
 
 // src/components/AppBar.css.ts
-var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var appBar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
+var appBar = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4348 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
 var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
 var center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
-var centerMain = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMain = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
 var centerMainEdge = "_1yk3a45e dhthxqi dhthxq4 dhthxq2 dhthxqf";
 var centerText = "_1yk3a45f dhthxqc dhthxqd dhthxq0";
 var closeButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
@@ -212,20 +211,20 @@ var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
 var safeArea = "_1yk3a456";
 
 // src/components/AppScreen.css.ts
-var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
-var appScreen = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf434a", "enter-done": "_1dlf434b", "exit-active": "_1dlf434c", "exit-done": "_1dlf434d" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
+var appScreen = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf434a", "enter-done": "_1dlf434b", "exit-active": "_1dlf434c", "exit-done": "_1dlf434d" } }, defaultVariants: {}, compoundVariants: [] });
 var dim = "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4349";
-var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434o dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434p" } }, defaultVariants: {}, compoundVariants: [] });
+var edge = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1dlf434o dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434p" } }, defaultVariants: {}, compoundVariants: [] });
 var enterActive = "_1dlf434a";
 var enterDone = "_1dlf434b";
 var exitActive = "_1dlf434c";
 var exitDone = "_1dlf434d";
-var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434k dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4348 _1dlf4349", variantClassNames: { hasAppBar: { true: "_1dlf434l dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434m" }, activityEnterStyle: { slideInLeft: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1dlf434k dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4348 _1dlf4349", variantClassNames: { hasAppBar: { true: "_1dlf434l dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434m" }, activityEnterStyle: { slideInLeft: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
 var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { topMargin: "var(--_1dlf4345)", center: { mainWidth: "var(--_1dlf4346)" } } };
 
 // src/components/AppBar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var AppBar = (0, import_react4.forwardRef)(
+var AppBar = (0, import_react3.forwardRef)(
   ({
     title,
     renderLeft,
@@ -251,12 +250,12 @@ var AppBar = (0, import_react4.forwardRef)(
     onTopClick
   }, ref) => {
     var _a, _b;
-    const actions = (0, import_react3.useActions)();
+    const actions = (0, import_react2.useActions)();
     const activity = (0, import_react_ui_core.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_react4.useRef)(null);
+    const centerRef = (0, import_react3.useRef)(null);
     const { maxWidth } = (0, import_react_ui_core.useAppBarTitleMaxWidth)({
       outerRef: ref,
       innerRef: centerRef,
@@ -430,9 +429,9 @@ var AppBar_default = AppBar;
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var OFFSET_PX_ANDROID = 32;
 var OFFSET_PX_CUPERTINO = 80;
-var Context = (0, import_react6.createContext)(null);
+var Context = (0, import_react5.createContext)(null);
 function useAppScreen() {
-  return (0, import_react6.useContext)(Context);
+  return (0, import_react5.useContext)(Context);
 }
 var AppScreen = ({
   backgroundColor,
@@ -447,12 +446,12 @@ var AppScreen = ({
   const globalOptions = useGlobalOptions();
   const activity = (0, import_react_ui_core2.useNullableActivity)();
   const mounted = (0, import_react_ui_core2.useMounted)();
-  const { pop } = (0, import_react5.useActions)();
-  const appScreenRef = (0, import_react6.useRef)(null);
-  const dimRef = (0, import_react6.useRef)(null);
-  const paperRef = (0, import_react6.useRef)(null);
-  const edgeRef = (0, import_react6.useRef)(null);
-  const appBarRef = (0, import_react6.useRef)(null);
+  const { pop } = (0, import_react4.useActions)();
+  const appScreenRef = (0, import_react5.useRef)(null);
+  const dimRef = (0, import_react5.useRef)(null);
+  const paperRef = (0, import_react5.useRef)(null);
+  const edgeRef = (0, import_react5.useRef)(null);
+  const appBarRef = (0, import_react5.useRef)(null);
   const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
   const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
   const isSwipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
@@ -542,7 +541,7 @@ var AppScreen = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Context.Provider,
     {
-      value: (0, import_react6.useMemo)(
+      value: (0, import_react5.useMemo)(
         () => ({
           scroll({ top }) {
             var _a2;
@@ -550,9 +549,15 @@ var AppScreen = ({
               top,
               behavior: "smooth"
             });
+          },
+          zIndices: {
+            dim: zIndexDim,
+            paper: zIndexPaper,
+            edge: zIndexEdge,
+            appBar: zIndexAppBar
           }
         }),
-        [paperRef]
+        [paperRef, zIndexDim, zIndexPaper, zIndexEdge, zIndexAppBar]
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
@@ -611,14 +616,14 @@ var AppScreen = ({
 var AppScreen_default = AppScreen;
 
 // src/components/BottomSheet.tsx
-var import_react7 = require("@stackflow/react");
+var import_react6 = require("@stackflow/react");
 var import_dynamic4 = require("@vanilla-extract/dynamic");
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_react_ui_core3 = require("@stackflow/react-ui-core");
 
 // src/components/BottomSheet.css.ts
-var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
-var container2 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1ht38h04", "enter-done": "_1ht38h05", "exit-active": "_1ht38h06", "exit-done": "_1ht38h07" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
+var container2 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1ht38h04", "enter-done": "_1ht38h05", "exit-active": "_1ht38h06", "exit-done": "_1ht38h07" } }, defaultVariants: {}, compoundVariants: [] });
 var dim2 = "_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxqa dhthxq7 _1ht38h03";
 var paper2 = "_1ht38h0e dhthxqc _1ht38h03";
 var vars2 = { transitionDuration: "var(--_1ht38h00)", zIndexes: { dim: "var(--_1ht38h01)", paper: "var(--_1ht38h02)" } };
@@ -635,9 +640,9 @@ var BottomSheet = ({
 }) => {
   var _a;
   const activity = (0, import_react_ui_core3.useNullableActivity)();
-  const { pop } = (0, import_react7.useActions)();
-  const containerRef = (0, import_react8.useRef)(null);
-  const dimRef = (0, import_react8.useRef)(null);
+  const { pop } = (0, import_react6.useActions)();
+  const containerRef = (0, import_react7.useRef)(null);
+  const dimRef = (0, import_react7.useRef)(null);
   (0, import_react_ui_core3.useStyleEffect)({
     styleName: "hide",
     refs: [containerRef]
@@ -650,7 +655,7 @@ var BottomSheet = ({
     styleName: "swipe-back",
     refs: [dimRef]
   });
-  const popLock = (0, import_react8.useRef)(false);
+  const popLock = (0, import_react7.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {
@@ -696,14 +701,14 @@ BottomSheet.displayName = "BottomSheet";
 var BottomSheet_default = BottomSheet;
 
 // src/components/Modal.tsx
-var import_react9 = require("@stackflow/react");
+var import_react8 = require("@stackflow/react");
 var import_dynamic5 = require("@vanilla-extract/dynamic");
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_ui_core4 = require("@stackflow/react-ui-core");
 
 // src/components/Modal.css.ts
-var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
-var container3 = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_5ozg8c4", "enter-done": "_5ozg8c5", "exit-active": "_5ozg8c6", "exit-done": "_5ozg8c7" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
+var container3 = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_5ozg8c4", "enter-done": "_5ozg8c5", "exit-active": "_5ozg8c6", "exit-done": "_5ozg8c7" } }, defaultVariants: {}, compoundVariants: [] });
 var dim3 = "_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxq9 dhthxq7 dhthxqb _5ozg8c3";
 var paper3 = "_5ozg8ce dhthxqc _5ozg8c3";
 var vars3 = { transitionDuration: "var(--_5ozg8c0)", zIndexes: { dim: "var(--_5ozg8c1)", paper: "var(--_5ozg8c2)" } };
@@ -719,9 +724,9 @@ var Modal = ({
 }) => {
   var _a;
   const activity = (0, import_react_ui_core4.useNullableActivity)();
-  const { pop } = (0, import_react9.useActions)();
-  const containerRef = (0, import_react10.useRef)(null);
-  const paperRef = (0, import_react10.useRef)(null);
+  const { pop } = (0, import_react8.useActions)();
+  const containerRef = (0, import_react9.useRef)(null);
+  const paperRef = (0, import_react9.useRef)(null);
   (0, import_react_ui_core4.useStyleEffect)({
     styleName: "hide",
     refs: [containerRef]
@@ -734,7 +739,7 @@ var Modal = ({
     styleName: "swipe-back",
     refs: [paperRef]
   });
-  const popLock = (0, import_react10.useRef)(false);
+  const popLock = (0, import_react9.useRef)(false);
   const onDimClick = (e) => {
     onOutsideClick == null ? void 0 : onOutsideClick(e);
     if (e.defaultPrevented) {