@stackflow/plugin-basic-ui - npm Package Compare versions

Comparing version 1.3.4-alpha.0 to 1.3.4-alpha.4

dist/components/AppBar.css.d.ts

@@ -7,4 +7,4 @@ export declare const appBar: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
     };
-    modalPresentationStyle: {
-        fullScreen: {
+    presentModalFullScreen: {
+        true: {
             selectors: {
@@ -21,17 +21,2 @@ [x: string]: {
     };
-    activityEnterStyle: {
-        slideInLeft: {
-            selectors: {
-                [x: string]: {
-                    opacity: number;
-                    transform: "translate3d(0, 0, 0)";
-                    transition?: undefined;
-                } | {
-                    transform: "translate3d(100%, 0, 0)";
-                    transition: string;
-                    opacity?: undefined;
-                };
-            };
-        };
-    };
 }>;
@@ -38,0 +23,0 @@ export declare const safeArea: string;

dist/components/AppBar.d.ts

@@ -19,4 +19,4 @@ /// <reference types="react" />
     title?: React.ReactNode;
-    appendLeft?: (() => React.ReactNode) | undefined;
-    appendRight?: (() => React.ReactNode) | undefined;
+    renderLeft?: (() => React.ReactNode) | undefined;
+    renderRight?: (() => React.ReactNode) | undefined;
     backButton?: {
@@ -39,5 +39,4 @@ renderIcon?: (() => React.ReactNode) | undefined;
     modalPresentationStyle?: "fullScreen" | undefined;
-    activityEnterStyle?: "slideInLeft" | undefined;
     onTopClick?: ((e: React.MouseEvent) => void) | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default AppBar;

dist/components/AppScreen.css.d.ts

@@ -45,4 +45,4 @@ export declare const vars: import("@vanilla-extract/private").MapLeafNodes<{
     };
-    modalPresentationStyle: {
-        fullScreen: {
+    presentModalFullScreen: {
+        true: {
             selectors: {
@@ -55,11 +55,2 @@ [x: string]: {
     };
-    activityEnterStyle: {
-        slideInLeft: {
-            selectors: {
-                [x: string]: {
-                    transform: "translate3d(50%, 0, 0)";
-                };
-            };
-        };
-    };
 }>;
@@ -66,0 +57,0 @@ export declare const edge: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{

dist/components/AppScreen.d.ts

@@ -14,4 +14,3 @@ /// <reference types="react" />
     preventSwipeBack?: boolean;
-    CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
-    ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
+    modalPresentationStyle?: "fullScreen";
     children: React.ReactNode;
@@ -18,0 +17,0 @@ };

dist/hooks/useStyleEffectOffset.d.ts

 /// <reference types="react" />
 export declare const OFFSET_PX_ANDROID = 32;
 export declare const OFFSET_PX_CUPERTINO = 80;
-export declare function useStyleEffectOffset({ refs, theme, activityEnterStyle, hasEffect, }: {
+export declare function useStyleEffectOffset({ refs, theme, hasEffect, }: {
     refs: Array<React.RefObject<any>>;
     theme: "android" | "cupertino";
-    activityEnterStyle?: "slideInLeft";
     hasEffect?: boolean;
 }): void;

dist/index.js

@@ -368,3 +368,2 @@ "use strict";
   theme,
-  activityEnterStyle,
   hasEffect
@@ -376,17 +375,3 @@ }) {
     effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
-      let transform;
-      let opacity;
-      switch (theme) {
-        case "cupertino": {
-          transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
-          opacity = "1";
-          break;
-        }
-        case "android":
-        default: {
-          transform = activityEnterStyle === "slideInLeft" ? `translate3d(-50%, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
-          opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
-          break;
-        }
-      }
+      const transform = theme === "cupertino" ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
       const cleanup = () => {
@@ -400,3 +385,2 @@ requestNextFrame(() => {
             $el.style.transform = "";
-            $el.style.opacity = "";
             listenOnce($el, "transitionend", () => {
@@ -417,3 +401,2 @@ $el.style.transition = "";
             ref.current.style.transform = transform;
-            ref.current.style.opacity = opacity;
           });
@@ -449,6 +432,6 @@ switch (activityTransitionState) {
 var dim = "_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348";
-var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434n dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434o" } }, defaultVariants: {}, compoundVariants: [] });
+var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
 var exitActive = "_1dlf434b";
 var exitDone = "_1dlf434c";
-var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434l" }, activityEnterStyle: { slideInLeft: "_1dlf434m" } }, defaultVariants: {}, compoundVariants: [] });
+var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, presentModalFullScreen: { true: "_1dlf434l" } }, defaultVariants: {}, compoundVariants: [] });
 var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { center: { mainWidth: "var(--_1dlf4345)" } } };
@@ -636,13 +619,13 @@
 var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
-var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
-var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
+var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, presentModalFullScreen: { true: "_1yk3a454" } }, defaultVariants: {}, compoundVariants: [] });
+var backButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
 var center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
-var centerMain = (0, import_createRuntimeFn3.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";
-var container = "_1yk3a457 dhthxqa dhthxq7 _1yk3a451";
-var left = "_1yk3a458 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
-var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
-var safeArea = "_1yk3a456";
+var centerMain = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45b", variantClassNames: { hasLeft: { true: "_1yk3a45c" } }, defaultVariants: {}, compoundVariants: [] });
+var centerMainEdge = "_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf";
+var centerText = "_1yk3a45e dhthxqc dhthxqd dhthxq0";
+var closeButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
+var container = "_1yk3a456 dhthxqa dhthxq7 _1yk3a451";
+var left = "_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
+var right = "_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
+var safeArea = "_1yk3a455";
 
@@ -654,4 +637,4 @@ // src/components/AppBar.tsx
     title,
-    appendLeft,
-    appendRight,
+    renderLeft,
+    renderRight,
     backButton: backButton2,
@@ -662,3 +645,2 @@ closeButton: closeButton2,
     modalPresentationStyle,
-    activityEnterStyle,
     iconColor,
@@ -690,2 +672,3 @@ iconColorTransitionDuration,
     });
+    const presentModalFullScreen = modalPresentationStyle === "fullScreen";
     const onBackClick = (e) => {
@@ -738,3 +721,3 @@ if (backButton2 && "onClick" in backButton2 && backButton2.onClick) {
             }
-            if (modalPresentationStyle === "fullScreen") {
+            if (presentModalFullScreen) {
               return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconClose_default, {});
@@ -788,3 +771,3 @@ }
     };
-    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
+    const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -796,4 +779,3 @@ "div",
           border,
-          modalPresentationStyle,
-          activityEnterStyle
+          presentModalFullScreen
         }),
@@ -823,3 +805,3 @@ style: (0, import_dynamic2.assignInlineVars)(
               renderBackButton(),
-              appendLeft == null ? void 0 : appendLeft()
+              renderLeft == null ? void 0 : renderLeft()
             ] }),
@@ -847,3 +829,3 @@ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: right, children: [
-              appendRight == null ? void 0 : appendRight(),
+              renderRight == null ? void 0 : renderRight(),
               closeButtonLocation === "right" && renderCloseButton()
@@ -871,4 +853,3 @@ ] })
   preventSwipeBack,
-  CUPERTINO_ONLY_modalPresentationStyle,
-  ANDROID_ONLY_activityEnterStyle,
+  modalPresentationStyle,
   children
@@ -885,30 +866,4 @@ }) => {
   const appBarRef = (0, import_react9.useRef)(null);
-  const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
-  const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
-  const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
-  const hasAppBar = !!appBar2;
-  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
-  let zIndexDim;
-  let zIndexPaper;
-  let zIndexEdge;
-  let zIndexAppBar;
-  switch (globalOptions.theme) {
-    case "cupertino": {
-      zIndexDim = zIndexBase + (modalPresentationStyle === "fullScreen" ? 2 : 0);
-      zIndexPaper = zIndexBase + (hasAppBar && modalPresentationStyle !== "fullScreen" ? 1 : 3);
-      zIndexEdge = zIndexBase + 4;
-      zIndexAppBar = zIndexBase + 7;
-      break;
-    }
-    case "android":
-    default: {
-      zIndexDim = zIndexBase;
-      zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
-      zIndexEdge = zIndexBase + 4;
-      zIndexAppBar = zIndexBase + (activityEnterStyle === "slideInLeft" ? 7 : 4);
-      break;
-    }
-  }
-  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
-  const lazyTransitionState = useLazy(transitionState);
+  const presentModalFullScreen = modalPresentationStyle === "fullScreen";
+  const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
   useStyleEffectHide({
@@ -919,18 +874,25 @@ refs: [appScreenRef],
   useStyleEffectOffset({
-    refs: globalOptions.theme === "cupertino" || activityEnterStyle === "slideInLeft" ? [paperRef] : [paperRef, appBarRef],
     theme: globalOptions.theme,
-    activityEnterStyle,
-    hasEffect: modalPresentationStyle !== "fullScreen"
+    refs: globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    hasEffect: !presentModalFullScreen
   });
   useStyleEffectSwipeBack({
+    theme: globalOptions.theme,
     dimRef,
     edgeRef,
     paperRef,
-    theme: globalOptions.theme,
+    hasEffect: true,
     prevented: swipeBackPrevented,
     onSwiped() {
       pop();
-    },
-    hasEffect: true
+    }
   });
+  const hasAppBar = !!appBar2;
+  const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
+  const zIndexDim = zIndexBase;
+  const zIndexPaper = zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
+  const zIndexEdge = zIndexBase + 4;
+  const zIndexAppBar = globalOptions.theme === "cupertino" ? zIndexBase + 7 : zIndexBase + 4;
+  const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
+  const lazyTransitionState = useLazy(transitionState);
   const onAppBarTopClick = (e) => {
@@ -982,3 +944,3 @@ var _a2, _b2;
           children: [
-            activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
             appBar2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -989,3 +951,2 @@ AppBar_default,
                 modalPresentationStyle,
-                activityEnterStyle,
                 onTopClick: onAppBarTopClick
@@ -999,4 +960,3 @@ })
                   hasAppBar,
-                  modalPresentationStyle,
-                  activityEnterStyle
+                  presentModalFullScreen
                 }),
@@ -1003,0 +963,0 @@ ref: paperRef,

package.json

 {
   "name": "@stackflow/plugin-basic-ui",
-  "version": "1.3.4-alpha.0+4149358a",
+  "version": "1.3.4-alpha.4+9350a2ba",
   "license": "MIT",
@@ -37,6 +37,6 @@ "exports": {
   "devDependencies": {
-    "@stackflow/core": "^1.0.8-alpha.0+4149358a",
+    "@stackflow/core": "^1.0.7",
     "@stackflow/esbuild-config": "^1.0.0",
-    "@stackflow/eslint-config": "^1.0.1-alpha.57+4149358a",
-    "@stackflow/react": "^1.1.5-alpha.0+4149358a",
+    "@stackflow/eslint-config": "^1.0.0",
+    "@stackflow/react": "^1.1.4",
     "@types/react": "^18.0.10",
@@ -74,3 +74,3 @@ "@typescript-eslint/eslint-plugin": "^5.32.0",
   },
-  "gitHead": "4149358a851284292ecc2214d0e502713af0daaf"
+  "gitHead": "9350a2ba696c4b69e6df770924153cb304563dbc"
 }

src/components/AppBar.css.ts

@@ -79,4 +79,4 @@ import { style } from "@vanilla-extract/css";
     },
-    modalPresentationStyle: {
-      fullScreen: {
+    presentModalFullScreen: {
+      true: {
         selectors: {
@@ -108,19 +108,2 @@ [`${cupertino} &`]: {
     },
-    activityEnterStyle: {
-      slideInLeft: {
-        selectors: {
-          [`${android} &`]: {
-            opacity: 1,
-            transform: "translate3d(0, 0, 0)",
-          },
-          [`${android} ${exitActive} &`]: {
-            transform: "translate3d(100%, 0, 0)",
-            transition: transitions({
-              ...appBarCommonTransition,
-              transform: "0s",
-            }),
-          },
-        },
-      },
-    },
   },
@@ -127,0 +110,0 @@ });

src/components/AppScreen.css.ts

@@ -137,4 +137,4 @@ import { createThemeContract, style } from "@vanilla-extract/css";
     },
-    modalPresentationStyle: {
-      fullScreen: {
+    presentModalFullScreen: {
+      true: {
         selectors: {
@@ -147,11 +147,2 @@ [`${cupertino} &`]: {
     },
-    activityEnterStyle: {
-      slideInLeft: {
-        selectors: {
-          [`${android} &`]: {
-            transform: "translate3d(50%, 0, 0)",
-          },
-        },
-      },
-    },
   },
@@ -158,0 +149,0 @@ });

src/hooks/useStyleEffectOffset.ts

@@ -13,3 +13,2 @@ /* eslint-disable no-param-reassign */
   theme,
-  activityEnterStyle,
   hasEffect,
@@ -19,3 +18,2 @@ }: {
   theme: "android" | "cupertino";
-  activityEnterStyle?: "slideInLeft";
   hasEffect?: boolean;
@@ -28,22 +26,7 @@ }) {
       ? ({ activityTransitionState, refs }) => {
-          let transform: string;
-          let opacity: string;
+          const transform =
+            theme === "cupertino"
+              ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`
+              : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
 
-          switch (theme) {
-            case "cupertino": {
-              transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
-              opacity = "1";
-              break;
-            }
-            case "android":
-            default: {
-              transform =
-                activityEnterStyle === "slideInLeft"
-                  ? `translate3d(-50%, 0, 0)`
-                  : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
-              opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
-              break;
-            }
-          }
-
           const cleanup = () => {
@@ -59,3 +42,2 @@ requestNextFrame(() => {
                 $el.style.transform = "";
-                $el.style.opacity = "";
 
@@ -80,3 +62,2 @@ listenOnce($el, "transitionend", () => {
                 ref.current.style.transform = transform;
-                ref.current.style.opacity = opacity;
               });
@@ -83,0 +64,0 @@

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

379893

-3.11%

Lines of code

5105

-3.9%

No dependency changes