@seed-design/stackflow 2.0.4 → 2.0.5

package/lib/primitive/AppBar/AppBar.cjs

@@ -15,7 +15,7 @@ var AppBarRoot = (0, react.forwardRef)((props, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useAppBarContext.AppBarProvider, {
 		value: api,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
-			ref: (0, _radix_ui_react_compose_refs.composeRefs)(api.refs.root, ref),
+			ref,
 			...(0, _seed_design_dom_utils.mergeProps)(api.rootProps, otherProps)
 		})
 	});

package/lib/primitive/AppBar/AppBar.js

@@ -14,7 +14,7 @@ var AppBarRoot = forwardRef((props, ref) => {
 	return /* @__PURE__ */ jsx(AppBarProvider, {
 		value: api,
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			ref: composeRefs(api.refs.root, ref),
+			ref,
 			...mergeProps(api.rootProps, otherProps)
 		})
 	});

package/lib/primitive/AppBar/useAppBar.cjs

@@ -8,15 +8,14 @@ let react = require("react");
 //#region src/primitive/AppBar/useAppBar.tsx
 function useAppBar(_props) {
 	const { stateProps } = require_useAppScreenContext.useAppScreenContext();
-	const [root, rootRef] = (0, react.useState)(null);
 	const [left, leftRef] = (0, react.useState)(null);
 	const [right, rightRef] = (0, react.useState)(null);
 	const leftOffset = require_useElementOffset.useElementOffset(left);
 	const rightOffset = require_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";
 	return (0, react.useMemo)(() => ({
 		refs: {
-			root: rootRef,
 			left: leftRef,
 			right: rightRef
 		},
@@ -24,9 +23,9 @@ function useAppBar(_props) {
 		rootProps: (0, _seed_design_dom_utils.elementProps)({
 			"data-part": require_anatomy.appBarAnatomy.root,
 			...stateProps,
-			style: { "--centered-title-padding-x": centeredTitlePaddingX }
+			style: { "--app-bar-area-extent": areaExtent }
 		})
-	}), [stateProps, centeredTitlePaddingX]);
+	}), [stateProps, areaExtent]);
 }
 //#endregion
 exports.useAppBar = useAppBar;

package/lib/primitive/AppBar/useAppBar.d.ts

@@ -4,7 +4,6 @@ export interface UseAppBarProps {
 export type UseAppBarReturn = ReturnType<typeof useAppBar>;
 export declare function useAppBar(_props: UseAppBarProps): {
     refs: {
-        root: Dispatch<SetStateAction<HTMLElement | null>>;
         left: Dispatch<SetStateAction<HTMLElement | null>>;
         right: Dispatch<SetStateAction<HTMLElement | null>>;
     };

package/lib/primitive/AppBar/useAppBar.js

@@ -7,15 +7,14 @@ import { useMemo, useState } from "react";
 //#region src/primitive/AppBar/useAppBar.tsx
 function useAppBar(_props) {
 	const { stateProps } = useAppScreenContext();
-	const [root, rootRef] = useState(null);
 	const [left, leftRef] = useState(null);
 	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";
 	return useMemo(() => ({
 		refs: {
-			root: rootRef,
 			left: leftRef,
 			right: rightRef
 		},
@@ -23,9 +22,9 @@ function useAppBar(_props) {
 		rootProps: elementProps({
 			"data-part": appBarAnatomy.root,
 			...stateProps,
-			style: { "--centered-title-padding-x": centeredTitlePaddingX }
+			style: { "--app-bar-area-extent": areaExtent }
 		})
-	}), [stateProps, centeredTitlePaddingX]);
+	}), [stateProps, areaExtent]);
 }
 //#endregion
 export { useAppBar };

package/lib/primitive/private/useElementOffset.cjs

@@ -4,6 +4,14 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 //#region src/primitive/private/useElementOffset.ts
 var useLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function measure(element) {
+	const parent = element.offsetParent ?? document.body;
+	const { paddingLeft, paddingRight } = getComputedStyle(parent);
+	return {
+		fromLeft: element.offsetLeft + element.offsetWidth - Number.parseFloat(paddingLeft),
+		fromRight: parent.clientWidth - Number.parseFloat(paddingRight) - element.offsetLeft
+	};
+}
 function useElementOffset(element) {
 	const [offset, setOffset] = react.useState(void 0);
 	useLayoutEffect(() => {
@@ -11,20 +19,10 @@ function useElementOffset(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(() => {
-				setOffset({
-					fromLeft: element.offsetLeft + element.offsetWidth,
-					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-				});
-			});
-			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.js

@@ -2,6 +2,14 @@
 import * as React from "react";
 //#region src/primitive/private/useElementOffset.ts
 var useLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function measure(element) {
+	const parent = element.offsetParent ?? document.body;
+	const { paddingLeft, paddingRight } = getComputedStyle(parent);
+	return {
+		fromLeft: element.offsetLeft + element.offsetWidth - Number.parseFloat(paddingLeft),
+		fromRight: parent.clientWidth - Number.parseFloat(paddingRight) - element.offsetLeft
+	};
+}
 function useElementOffset(element) {
 	const [offset, setOffset] = React.useState(void 0);
 	useLayoutEffect$1(() => {
@@ -9,20 +17,10 @@ function useElementOffset(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(() => {
-				setOffset({
-					fromLeft: element.offsetLeft + element.offsetWidth,
-					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-				});
-			});
-			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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/stackflow",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -40,7 +40,7 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@seed-design/css": "2.8.0",
+    "@seed-design/css": "2.9.0",
     "@stackflow/core": "^1.2.0",
     "@stackflow/react": "^1.5.1",
     "@types/react": "^19.2.2",
@@ -53,7 +53,7 @@
     "vite-plugin-dts": "^5.0.0"
   },
   "peerDependencies": {
-    "@seed-design/css": "^2.0.0",
+    "@seed-design/css": "^2.9.0",
     "@stackflow/core": ">=1.1.0",
     "@stackflow/react": ">=1.4.1",
     "react": ">=18.0.0",

package/src/primitive/AppBar/AppBar.tsx

@@ -17,10 +17,7 @@ export const AppBarRoot = forwardRef<HTMLDivElement, AppBarRootProps>((props, re
 
   return (
     <AppBarProvider value={api}>
-      <Primitive.div
-        ref={composeRefs(api.refs.root, ref)}
-        {...mergeProps(api.rootProps, otherProps)}
-      />
+      <Primitive.div ref={ref} {...mergeProps(api.rootProps, otherProps)} />
     </AppBarProvider>
   );
 });

package/src/primitive/AppBar/useAppBar.tsx

@@ -12,20 +12,20 @@ export type UseAppBarReturn = ReturnType<typeof useAppBar>;
 export function useAppBar(_props: UseAppBarProps) {
   const { stateProps } = useAppScreenContext();
 
-  const [root, rootRef] = useState<HTMLElement | null>(null);
   const [left, leftRef] = useState<HTMLElement | null>(null);
   const [right, rightRef] = useState<HTMLElement | null>(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 !== 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";
 
   return useMemo(
     () => ({
       refs: {
-        root: rootRef,
         left: leftRef,
         right: rightRef,
       },
@@ -34,10 +34,10 @@ export function useAppBar(_props: UseAppBarProps) {
         "data-part": appBarAnatomy.root,
         ...stateProps,
         style: {
-          "--centered-title-padding-x": centeredTitlePaddingX,
+          "--app-bar-area-extent": areaExtent,
         } as React.CSSProperties,
       }),
     }),
-    [stateProps, centeredTitlePaddingX],
+    [stateProps, areaExtent],
   );
 }

package/src/primitive/private/useElementOffset.ts

@@ -2,10 +2,21 @@ import * as React from "react";
 
 const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 
+// 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.
+function measure(element: HTMLElement) {
+  const parent = element.offsetParent ?? document.body;
+  const { paddingLeft, paddingRight } = getComputedStyle(parent);
+
+  return {
+    fromLeft: element.offsetLeft + element.offsetWidth - Number.parseFloat(paddingLeft),
+    fromRight: parent.clientWidth - Number.parseFloat(paddingRight) - element.offsetLeft,
+  };
+}
+
 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 +24,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;