@seed-design/stackflow 1.0.5 → 1.0.10

package/lib/primitive/AppBar/useAppBar.cjs

@@ -15,7 +15,11 @@ function useAppBar(_props) {
   const [right, rightRef] = React.useState(null);
   const leftOffset = useElementOffset.useElementOffset(left);
   const rightOffset = useElementOffset.useElementOffset(right);
-  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+  const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter(
+    (extent) => extent !== void 0
+  );
+  const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px` : "initial";
   return React.useMemo(
     () => ({
       refs: {
@@ -28,11 +32,12 @@ function useAppBar(_props) {
         "data-part": "appBar",
         ...stateProps,
         style: {
+          "--app-bar-area-extent": areaExtent,
           "--centered-title-padding-x": centeredTitlePaddingX
         }
       })
     }),
-    [stateProps, centeredTitlePaddingX]
+    [stateProps, areaExtent, centeredTitlePaddingX]
   );
 }
 

package/lib/primitive/AppBar/useAppBar.js

@@ -11,7 +11,11 @@ function useAppBar(_props) {
   const [right, rightRef] = useState(null);
   const leftOffset = useElementOffset(left);
   const rightOffset = useElementOffset(right);
-  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` : "initial";
+  const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter(
+    (extent) => extent !== void 0
+  );
+  const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+  const centeredTitlePaddingX = root ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px` : "initial";
   return useMemo(
     () => ({
       refs: {
@@ -24,11 +28,12 @@ function useAppBar(_props) {
         "data-part": "appBar",
         ...stateProps,
         style: {
+          "--app-bar-area-extent": areaExtent,
           "--centered-title-padding-x": centeredTitlePaddingX
         }
       })
     }),
-    [stateProps, centeredTitlePaddingX]
+    [stateProps, areaExtent, centeredTitlePaddingX]
   );
 }
 

package/lib/primitive/GlobalInteraction/useSwipeBack.cjs

@@ -24,6 +24,11 @@ function useSwipeBack(props) {
           if (e.target === e.currentTarget) {
             events.reset();
           }
+        },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
         }
       },
       edgeProps: {

package/lib/primitive/GlobalInteraction/useSwipeBack.js

@@ -20,6 +20,11 @@ function useSwipeBack(props) {
           if (e.target === e.currentTarget) {
             events.reset();
           }
+        },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
         }
       },
       edgeProps: {

package/lib/primitive/private/useElementOffset.cjs

@@ -25,28 +25,29 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const useLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function measure(element) {
+  const parent = element.offsetParent ?? document.body;
+  const { paddingLeft, paddingRight } = getComputedStyle(parent);
+  const fromParentLeft = element.offsetLeft + element.offsetWidth;
+  const fromParentRight = parent.clientWidth - element.offsetLeft;
+  return {
+    fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+    fromRight: fromParentRight - Number.parseFloat(paddingRight),
+    fromParentLeft,
+    fromParentRight
+  };
+}
 function useElementOffset(element) {
-  const [offset, setOffset] = React__namespace.useState(
-    void 0
-  );
+  const [offset, setOffset] = React__namespace.useState(void 0);
   useLayoutEffect(() => {
     if (!element) {
       setOffset(void 0);
       return;
     }
-    if (element) {
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
-        setOffset({ fromLeft, fromRight });
-      });
-      resizeObserver.observe(element);
-      return () => resizeObserver.unobserve(element);
-    }
+    setOffset(measure(element));
+    const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
   }, [element]);
   return offset;
 }

package/lib/primitive/private/useElementOffset.d.ts

@@ -1,4 +1,6 @@
 export declare function useElementOffset(element: HTMLElement | null): {
     fromLeft: number;
     fromRight: number;
+    fromParentLeft: number;
+    fromParentRight: number;
 } | undefined;

package/lib/primitive/private/useElementOffset.js

@@ -2,28 +2,29 @@
 import * as React from 'react';
 
 const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function measure(element) {
+  const parent = element.offsetParent ?? document.body;
+  const { paddingLeft, paddingRight } = getComputedStyle(parent);
+  const fromParentLeft = element.offsetLeft + element.offsetWidth;
+  const fromParentRight = parent.clientWidth - element.offsetLeft;
+  return {
+    fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+    fromRight: fromParentRight - Number.parseFloat(paddingRight),
+    fromParentLeft,
+    fromParentRight
+  };
+}
 function useElementOffset(element) {
-  const [offset, setOffset] = React.useState(
-    void 0
-  );
+  const [offset, setOffset] = React.useState(void 0);
   useLayoutEffect(() => {
     if (!element) {
       setOffset(void 0);
       return;
     }
-    if (element) {
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
-        setOffset({ fromLeft, fromRight });
-      });
-      resizeObserver.observe(element);
-      return () => resizeObserver.unobserve(element);
-    }
+    setOffset(measure(element));
+    const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
   }, [element]);
   return offset;
 }

package/lib/primitive/private/useTopActivity.cjs

@@ -18,7 +18,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = React.useState(null);
   const activityType = topEl?.dataset["activityType"];
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
     setTopEl(el);

package/lib/primitive/private/useTopActivity.js

@@ -1,6 +1,6 @@
 'use client';
 import { useStack } from '@stackflow/react';
-import { useState, useEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 
 function useTopActivity() {
   const stack = useStack();
@@ -14,7 +14,7 @@ function useTopActivity() {
   const transitionState = topActivity?.transitionState ?? "enter-done";
   const [topEl, setTopEl] = useState(null);
   const activityType = topEl?.dataset["activityType"];
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!topId) return;
     const el = document.querySelector(`[data-activity-id="${topId}"]`);
     setTopEl(el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "1.0.5",
+  "version": "1.0.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.5",
+    "@seed-design/css": "1.0.10",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@stackflow/react-ui-core": "^1.3.2",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "@seed-design/css": ">=1.0.5",
+    "@seed-design/css": ">=1.0.7",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "@stackflow/react-ui-core": ">=1.3.2",

package/src/primitive/AppBar/useAppBar.tsx

@@ -17,8 +17,14 @@ export function useAppBar(_props: UseAppBarProps) {
 
   const leftOffset = useElementOffset(left);
   const rightOffset = useElementOffset(right);
+  const extents = [leftOffset?.fromLeft, rightOffset?.fromRight].filter(
+    (extent) => extent !== undefined,
+  );
+  // `initial` leaves the variable unset, which the recipe reads as having no area to clear.
+  const areaExtent = extents.length > 0 ? `${Math.max(...extents)}px` : "initial";
+  // Read by `@seed-design/css` <= 1.0.7 in place of `--app-bar-area-extent`.
   const centeredTitlePaddingX = root
-    ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px`
+    ? `${Math.max(leftOffset?.fromParentLeft ?? 0, rightOffset?.fromParentRight ?? 0)}px`
     : "initial";
 
   return useMemo(
@@ -33,10 +39,11 @@ export function useAppBar(_props: UseAppBarProps) {
         "data-part": "appBar",
         ...stateProps,
         style: {
+          "--app-bar-area-extent": areaExtent,
           "--centered-title-padding-x": centeredTitlePaddingX,
         } as React.CSSProperties,
       }),
     }),
-    [stateProps, centeredTitlePaddingX],
+    [stateProps, areaExtent, centeredTitlePaddingX],
   );
 }

package/src/primitive/GlobalInteraction/useSwipeBack.ts

@@ -25,6 +25,11 @@ export function useSwipeBack(props: UseSwipeBackProps) {
             events.reset();
           }
         },
+        onTransitionEnd: (e) => {
+          if (e.target === e.currentTarget) {
+            events.reset();
+          }
+        },
       } as React.HTMLAttributes<HTMLDivElement>,
       edgeProps: {
         tabIndex: -1,

package/src/primitive/private/useElementOffset.ts

@@ -2,10 +2,27 @@ import * as React from "react";
 
 const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 
+// `fromLeft`/`fromRight` are measured from the offset parent's content edges: the parent's padding
+// carries the safe-area insets, which can move to the other side (a 180° rotation) without resizing
+// anything, so a value that included the padding would go stale with no resize to trigger a
+// re-measure. The padding-edge pair is what `@seed-design/css` <= 1.0.7 reads, where the parent's
+// padding holds no inset.
+function measure(element: HTMLElement) {
+  const parent = element.offsetParent ?? document.body;
+  const { paddingLeft, paddingRight } = getComputedStyle(parent);
+  const fromParentLeft = element.offsetLeft + element.offsetWidth;
+  const fromParentRight = parent.clientWidth - element.offsetLeft;
+
+  return {
+    fromLeft: fromParentLeft - Number.parseFloat(paddingLeft),
+    fromRight: fromParentRight - Number.parseFloat(paddingRight),
+    fromParentLeft,
+    fromParentRight,
+  };
+}
+
 export function useElementOffset(element: HTMLElement | null) {
-  const [offset, setOffset] = React.useState<{ fromLeft: number; fromRight: number } | undefined>(
-    undefined,
-  );
+  const [offset, setOffset] = React.useState<ReturnType<typeof measure> | undefined>(undefined);
 
   useLayoutEffect(() => {
     if (!element) {
@@ -13,24 +30,13 @@ export function useElementOffset(element: HTMLElement | null) {
       return;
     }
 
-    if (element) {
-      // provide as early as possible
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft,
-      });
-
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
+    // provide as early as possible
+    setOffset(measure(element));
 
-        setOffset({ fromLeft, fromRight });
-      });
+    const resizeObserver = new ResizeObserver(() => setOffset(measure(element)));
+    resizeObserver.observe(element);
 
-      resizeObserver.observe(element);
-
-      return () => resizeObserver.unobserve(element);
-    }
+    return () => resizeObserver.disconnect();
   }, [element]);
 
   return offset;

package/src/primitive/private/useTopActivity.ts

@@ -1,5 +1,5 @@
 import { useStack } from "@stackflow/react";
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 export function useTopActivity() {
   const stack = useStack();
@@ -17,7 +17,7 @@ export function useTopActivity() {
   const [topEl, setTopEl] = useState<HTMLElement | null>(null);
   const activityType = topEl?.dataset["activityType"];
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!topId) return;
 
     const el = document.querySelector<HTMLElement>(`[data-activity-id="${topId}"]`);