@seed-design/stackflow 0.0.1-rc.1 → 0.0.1-rc.4

package/lib/primitive/AppBar/useAppBar.js

@@ -0,0 +1,34 @@
+import { elementProps } from '@seed-design/dom-utils';
+import { useState, useMemo } from 'react';
+import { useAppScreenContext } from '../AppScreen/useAppScreenContext.js';
+import { useElementOffset } from '../private/useElementOffset.js';
+
+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";
+  return useMemo(
+    () => ({
+      refs: {
+        root: rootRef,
+        left: leftRef,
+        right: rightRef
+      },
+      stateProps,
+      rootProps: elementProps({
+        "data-part": "appBar",
+        ...stateProps,
+        style: {
+          "--centered-title-padding-x": centeredTitlePaddingX
+        }
+      })
+    }),
+    [stateProps, centeredTitlePaddingX]
+  );
+}
+
+export { useAppBar };

package/lib/primitive/AppBar/useAppBarContext.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const AppBarContext = React.createContext(null);
+const AppBarProvider = AppBarContext.Provider;
+function useAppBarContext({
+  strict = true
+} = {}) {
+  const context = React.useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+  return context;
+}
+
+exports.AppBarProvider = AppBarProvider;
+exports.useAppBarContext = useAppBarContext;

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

@@ -1,7 +1,8 @@
-import type { UseAppBarReturn } from "./useAppBar";
+import { UseAppBarReturn } from './useAppBar';
+import { Provider } from 'react';
 export interface UseAppBarContext extends UseAppBarReturn {
 }
-export declare const AppBarProvider: import("react").Provider<UseAppBarContext | null>;
+export declare const AppBarProvider: Provider<UseAppBarContext | null>;
 export declare function useAppBarContext<T extends boolean | undefined = true>({ strict, }?: {
     strict?: T;
 }): T extends false ? UseAppBarContext | null : UseAppBarContext;

package/lib/primitive/AppBar/useAppBarContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+const AppBarContext = createContext(null);
+const AppBarProvider = AppBarContext.Provider;
+function useAppBarContext({
+  strict = true
+} = {}) {
+  const context = useContext(AppBarContext);
+  if (!context && strict) {
+    throw new Error("useAppBarContext must be used within a AppBar");
+  }
+  return context;
+}
+
+export { AppBarProvider, useAppBarContext };

package/lib/primitive/AppScreen/AppScreen.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domUtils = require('@seed-design/dom-utils');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const useAppScreen = require('./useAppScreen.cjs');
+const useAppScreenContext = require('./useAppScreenContext.cjs');
+
+const AppScreenRoot = React.forwardRef((props, ref) => {
+  const {
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+    ...otherProps
+  } = props;
+  const api = useAppScreen.useAppScreen({
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(useAppScreenContext.AppScreenProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactPrimitive.Primitive.div,
+    {
+      ref,
+      "data-stackflow-component-name": "AppScreen",
+      ...domUtils.mergeProps(api.activityProps, otherProps)
+    }
+  ) });
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+const AppScreenDim = React.forwardRef((props, ref) => {
+  const { dimProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(dimProps, props) });
+});
+AppScreenDim.displayName = "AppScreenDim";
+const AppScreenEdge = React.forwardRef((props, ref) => {
+  const { edgeProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(edgeProps, props) });
+});
+AppScreenEdge.displayName = "AppScreenEdge";
+const AppScreenLayer = React.forwardRef((props, ref) => {
+  const { layerProps } = useAppScreenContext.useAppScreenContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, ...domUtils.mergeProps(layerProps, props) });
+});
+AppScreenLayer.displayName = "AppScreenLayer";
+
+exports.AppScreenDim = AppScreenDim;
+exports.AppScreenEdge = AppScreenEdge;
+exports.AppScreenLayer = AppScreenLayer;
+exports.AppScreenRoot = AppScreenRoot;

package/lib/primitive/AppScreen/AppScreen.d.ts

@@ -1,14 +1,15 @@
-import { type PrimitiveProps } from "@seed-design/react-primitive";
-import { type UseAppScreenProps } from "./useAppScreen";
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { UseAppScreenProps } from './useAppScreen';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface AppScreenRootProps extends PrimitiveProps, UseAppScreenProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppScreenRoot: import("react").ForwardRefExoticComponent<AppScreenRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppScreenRoot: ForwardRefExoticComponent<AppScreenRootProps & RefAttributes<HTMLDivElement>>;
 export interface AppScreenDimProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppScreenDim: import("react").ForwardRefExoticComponent<AppScreenDimProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppScreenDim: ForwardRefExoticComponent<AppScreenDimProps & RefAttributes<HTMLDivElement>>;
 export interface AppScreenEdgeProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppScreenEdge: import("react").ForwardRefExoticComponent<AppScreenEdgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppScreenEdge: ForwardRefExoticComponent<AppScreenEdgeProps & RefAttributes<HTMLDivElement>>;
 export interface AppScreenLayerProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
 }
-export declare const AppScreenLayer: import("react").ForwardRefExoticComponent<AppScreenLayerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppScreenLayer: ForwardRefExoticComponent<AppScreenLayerProps & RefAttributes<HTMLDivElement>>;

package/lib/primitive/AppScreen/AppScreen.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef } from 'react';
+import { useAppScreen } from './useAppScreen.js';
+import { useAppScreenContext, AppScreenProvider } from './useAppScreenContext.js';
+
+const AppScreenRoot = forwardRef((props, ref) => {
+  const {
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart,
+    ...otherProps
+  } = props;
+  const api = useAppScreen({
+    swipeBackDisplacementRatioThreshold,
+    swipeBackVelocityThreshold,
+    onSwipeBackEnd,
+    onSwipeBackMove,
+    onSwipeBackStart
+  });
+  return /* @__PURE__ */ jsx(AppScreenProvider, { value: api, children: /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      ref,
+      "data-stackflow-component-name": "AppScreen",
+      ...mergeProps(api.activityProps, otherProps)
+    }
+  ) });
+});
+AppScreenRoot.displayName = "AppScreenRoot";
+const AppScreenDim = forwardRef((props, ref) => {
+  const { dimProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(dimProps, props) });
+});
+AppScreenDim.displayName = "AppScreenDim";
+const AppScreenEdge = forwardRef((props, ref) => {
+  const { edgeProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(edgeProps, props) });
+});
+AppScreenEdge.displayName = "AppScreenEdge";
+const AppScreenLayer = forwardRef((props, ref) => {
+  const { layerProps } = useAppScreenContext();
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(layerProps, props) });
+});
+AppScreenLayer.displayName = "AppScreenLayer";
+
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot };

package/lib/primitive/AppScreen/AppScreen.namespace.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppScreen = require('./AppScreen.cjs');
+
+
+
+exports.Dim = AppScreen.AppScreenDim;
+exports.Edge = AppScreen.AppScreenEdge;
+exports.Layer = AppScreen.AppScreenLayer;
+exports.Root = AppScreen.AppScreenRoot;

package/lib/primitive/AppScreen/AppScreen.namespace.d.ts

@@ -1 +1 @@
-export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root, type AppScreenDimProps as DimProps, type AppScreenEdgeProps as EdgeProps, type AppScreenLayerProps as LayerProps, type AppScreenRootProps as RootProps, } from "./AppScreen";
+export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root, type AppScreenDimProps as DimProps, type AppScreenEdgeProps as EdgeProps, type AppScreenLayerProps as LayerProps, type AppScreenRootProps as RootProps, } from './AppScreen';

package/lib/primitive/AppScreen/AppScreen.namespace.js

@@ -0,0 +1 @@
+export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root } from './AppScreen.js';

package/lib/primitive/AppScreen/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const AppScreen = require('./AppScreen.cjs');
+const AppScreen_namespace = require('./AppScreen.namespace.cjs');
+const useAppScreenContext = require('./useAppScreenContext.cjs');
+
+
+
+exports.AppScreenDim = AppScreen.AppScreenDim;
+exports.AppScreenEdge = AppScreen.AppScreenEdge;
+exports.AppScreenLayer = AppScreen.AppScreenLayer;
+exports.AppScreenRoot = AppScreen.AppScreenRoot;
+exports.AppScreen = AppScreen_namespace;
+exports.useAppScreenContext = useAppScreenContext.useAppScreenContext;

package/lib/primitive/AppScreen/index.d.ts

@@ -1,3 +1,3 @@
-export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot, type AppScreenDimProps, type AppScreenEdgeProps, type AppScreenLayerProps, type AppScreenRootProps, } from "./AppScreen";
-export * as AppScreen from "./AppScreen.namespace";
-export { useAppScreenContext, type UseAppScreenContext } from "./useAppScreenContext";
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot, type AppScreenDimProps, type AppScreenEdgeProps, type AppScreenLayerProps, type AppScreenRootProps, } from './AppScreen';
+export * as AppScreen from './AppScreen.namespace';
+export { useAppScreenContext, type UseAppScreenContext } from './useAppScreenContext';

package/lib/primitive/AppScreen/index.js

@@ -0,0 +1,4 @@
+export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from './AppScreen.js';
+import * as AppScreen_namespace from './AppScreen.namespace.js';
+export { AppScreen_namespace as AppScreen };
+export { useAppScreenContext } from './useAppScreenContext.js';

package/lib/primitive/AppScreen/useAppScreen.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domUtils = require('@seed-design/dom-utils');
+const reactUiCore = require('@stackflow/react-ui-core');
+const React = require('react');
+const useSwipeBack = require('../GlobalInteraction/useSwipeBack.cjs');
+
+function useAppScreen(props) {
+  const activity = reactUiCore.useNullableActivity();
+  const transitionState = activity?.transitionState ?? "enter-done";
+  const { activityProps, layerProps, edgeProps } = useSwipeBack.useSwipeBack(props);
+  const zIndexBase = reactUiCore.useZIndexBase();
+  const zIndexStyle = React.useMemo(
+    () => ({
+      "--z-index-base": zIndexBase.toString()
+    }),
+    [zIndexBase]
+  );
+  const stateProps = React.useMemo(
+    () => ({
+      "data-activity-is-top": domUtils.dataAttr(activity?.isTop),
+      "data-activity-is-active": domUtils.dataAttr(activity?.isActive),
+      "data-transition-state": transitionState
+    }),
+    [transitionState, activity?.isActive, activity?.isTop]
+  );
+  return React.useMemo(
+    () => ({
+      activity,
+      stateProps,
+      activityProps: domUtils.elementProps({
+        "data-part": "activity",
+        "data-activity-type": "full-screen",
+        ...activityProps,
+        ...stateProps,
+        "data-activity-id": activity?.id,
+        style: zIndexStyle,
+        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
+        suppressHydrationWarning: true
+      }),
+      dimProps: domUtils.elementProps({
+        "data-part": "dim",
+        ...stateProps
+      }),
+      layerProps: domUtils.elementProps({
+        "data-part": "layer",
+        ...stateProps,
+        ...layerProps
+      }),
+      edgeProps: domUtils.elementProps({
+        "data-part": "edge",
+        "aria-hidden": true,
+        tabIndex: -1,
+        ...edgeProps,
+        ...stateProps
+      })
+    }),
+    [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
+  );
+}
+
+exports.useAppScreen = useAppScreen;