@stackflow/plugin-basic-ui 1.7.0 → 1.8.1

package/src/basicUIPlugin.tsx

@@ -69,8 +69,8 @@ export const basicUIPlugin: (
             compactMap({
               [css.globalVars.backgroundColor]: _options.backgroundColor,
               [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
-              [css.globalVars
-                .transitionDuration]: `${stack.transitionDuration}ms`,
+              [css.globalVars.transitionDuration]:
+                `${stack.transitionDuration}ms`,
               [css.globalVars.computedTransitionDuration]:
                 stack.globalTransitionState === "loading"
                   ? `${stack.transitionDuration}ms`

package/src/components/AppBar.css.ts

@@ -38,7 +38,6 @@ export const appBar = recipe({
     {
       backgroundColor: globalVars.appBar.backgroundColor,
       zIndex: vars.zIndexes.appBar,
-      willChange: "transform, opacity",
       transition: transitions(appBarCommonTransition),
       selectors: {
         [`${cupertino} &`]: {

package/src/components/AppBar.tsx

@@ -120,6 +120,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
         return (
           <button
             type="button"
+            aria-label="Go Back"
             className={css.backButton}
             onClick={onBackClick}
           >
@@ -147,8 +148,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             backButton && "ariaLabel" in backButton
               ? backButton.ariaLabel
               : globalBackButton && "ariaLabel" in globalBackButton
-              ? globalBackButton.ariaLabel
-              : undefined
+                ? globalBackButton.ariaLabel
+                : undefined
           }
           onClick={onBackClick}
         >
@@ -230,8 +231,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             closeButton && "ariaLabel" in closeButton
               ? closeButton.ariaLabel
               : globalCloseButton && "ariaLabel" in globalCloseButton
-              ? globalCloseButton.ariaLabel
-              : undefined
+                ? globalCloseButton.ariaLabel
+                : undefined
           }
           onClick={onCloseClick}
         >
@@ -316,7 +317,6 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
               <button
                 className={css.centerMainEdge}
                 type="button"
-                aria-hidden="true"
                 onClick={onTopClick}
               />
             </div>

package/src/components/AppScreen.css.ts

@@ -57,7 +57,6 @@ export const dim = style([
   {
     opacity: 0,
     zIndex: vars.zIndexes.dim,
-    willChange: "opacity",
     selectors: {
       [`${android} &`]: {
         height: "10rem",
@@ -91,7 +90,6 @@ export const paper = recipe({
         display: "none",
       },
       zIndex: vars.zIndexes.paper,
-      willChange: "transform",
       selectors: {
         [`${cupertino} &`]: {
           transform: "translate3d(100%, 0, 0)",
@@ -121,14 +119,15 @@ export const paper = recipe({
       true: [
         f.borderBox,
         {
-          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, padding-top ${globalVars.appBar.heightTransitionDuration}`,
-          paddingTop: globalVars.appBar.height,
+          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, margin-top ${globalVars.appBar.heightTransitionDuration}`,
+          marginTop: globalVars.appBar.height,
+          height: `calc(100% - ${globalVars.appBar.height})`,
           "@supports": {
-            "(padding-top: constant(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
+            "(margin-top: constant(safe-area-inset-top))": {
+              marginTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
             },
-            "(padding-top: env(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
+            "(margin-top: env(safe-area-inset-top))": {
+              marginTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
             },
           },
         },

package/src/components/AppScreen.tsx

@@ -12,6 +12,7 @@ import {
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
+  useZIndexBase,
 } from "../hooks";
 import type { PropOf } from "../utils";
 import { compactMap } from "../utils";
@@ -74,7 +75,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
 
   const hasAppBar = !!appBar;
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5;
+  const zIndexBase = useZIndexBase();
 
   let zIndexDim: number;
   let zIndexPaper: number;
@@ -92,7 +93,6 @@ const AppScreen: React.FC<AppScreenProps> = ({
       zIndexAppBar = zIndexBase + 7;
       break;
     }
-    case "android":
     default: {
       zIndexDim = zIndexBase;
       zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);

package/src/components/BottomSheet.css.ts

@@ -62,7 +62,6 @@ export const paper = style([
     backgroundColor: globalVars.backgroundColor,
     width: "100%",
     borderRadius: `${globalVars.bottomSheet.borderRadius} ${globalVars.bottomSheet.borderRadius} 0 0`,
-    willChange: "transform, opacity",
     transform: "translate3d(0, 100%, 0)",
     opacity: 0,
     selectors: {

package/src/components/BottomSheet.tsx

@@ -1,12 +1,15 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-
 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 } from "../hooks";
+import {
+  useLazy,
+  useNullableActivity,
+  useStyleEffect,
+  useZIndexBase,
+} from "../hooks";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 
@@ -65,8 +68,8 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
-  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
   const transitionState = activity?.transitionState ?? "enter-done";
 
   return (

package/src/components/Modal.css.ts

@@ -66,7 +66,6 @@ export const paper = style([
     boxShadow:
       "0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1)",
     borderRadius: globalVars.modal.borderRadius,
-    willChange: "transform, opacity",
     transform: "scale(1.1)",
     opacity: 0,
     selectors: {

package/src/components/Modal.tsx

@@ -1,12 +1,15 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-
 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 } from "../hooks";
+import {
+  useLazy,
+  useNullableActivity,
+  useStyleEffect,
+  useZIndexBase,
+} from "../hooks";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 
@@ -63,8 +66,8 @@ const Modal: React.FC<ModalProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
-  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
   const transitionState = activity?.transitionState ?? "enter-done";
 
   return (

package/src/hooks/index.ts

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

package/src/hooks/useStyleEffect.ts

@@ -25,7 +25,7 @@ export function useStyleEffect<T extends HTMLElement>({
   effect?: (params: {
     activityTransitionState: ActivityTransitionState;
     refs: Array<React.RefObject<T>>;
-  }) => (() => void) | void;
+  }) => (() => void) | undefined;
   effectDeps?: any[];
 }) {
   const activity = useNullableActivity();

package/src/hooks/useStyleEffectHide.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 

package/src/hooks/useStyleEffectOffset.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { globalVars } from "../basicUIPlugin.css";
 import { listenOnce, noop, requestNextFrame } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
@@ -32,11 +30,10 @@ export function useStyleEffectOffset({
               opacity = "1";
               break;
             }
-            case "android":
             default: {
               transform =
                 activityEnterStyle === "slideInLeft"
-                  ? `translate3d(-50%, 0, 0)`
+                  ? "translate3d(-50%, 0, 0)"
                   : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
               opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
               break;
@@ -81,7 +78,6 @@ export function useStyleEffectOffset({
                   return () => {
                     cleanup();
                   };
-                case "enter-active":
                 default:
                   return noop;
               }

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { globalVars } from "../basicUIPlugin.css";
 import * as appScreenCss from "../components/AppScreen.css";
 import { listenOnce, noop } from "../utils";
@@ -175,7 +173,7 @@ export function useStyleEffectSwipeBack({
             const { activeElement } = document as any;
 
             activeElement?.blur?.();
-            // eslint-disable-next-line no-multi-assign
+
             x0 = x = e.touches[0].clientX;
             t0 = Date.now();
 

package/src/hooks/useZIndexBase.ts

@@ -0,0 +1,6 @@
+import { useNullableActivity } from "./useNullableActivity";
+
+export function useZIndexBase() {
+  const activity = useNullableActivity();
+  return (activity?.zIndex ?? 0) * 5;
+}

package/src/index.ts

@@ -15,3 +15,4 @@ 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/last.ts

@@ -1 +1 @@
-export const last = <T extends unknown>(arr: T[]) => arr[arr.length - 1];
+export const last = <T>(arr: T[]) => arr[arr.length - 1];