@impulse-ui-native/flyout 2.3.4 → 2.4.0

package/README.md

@@ -13,7 +13,7 @@ This package uses React Native Gesture Handler, Reanimated, Safe Area Context, a
 ## Main exports
 
 - `Flyout` renders the sheet, overlay, drag handle, title, safe-area padding, and lifecycle animations.
-- `FlyoutProps` adds `open`, `placement`, `topOffset`, and `bottomOffset` to the common layer contract.
+- `FlyoutProps` adds `placement`, `topOffset`, and `bottomOffset` to the common overlay contract.
 
 ## Usage
 
@@ -33,4 +33,4 @@ import { Flyout } from "@impulse-ui-native/flyout";
 
 The overlay closes the sheet when pressed. A drag past half the measured sheet height, or a sufficiently fast swipe toward the edge, closes it as well.
 
-For app-wide imperative sheets, register flyouts through `@impulse-ui-native/layers` and mount `LayerCenter` once.
+For app-wide imperative sheets, register `Flyout` through an `OverlayStore` and mount `OverlayHost` inside the matching `OverlayProvider`.

package/dist/components/flyout.d.mts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { PropsWithChildren } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FlyoutProps } from '../types/flyout.types.mjs';
-import '@impulse-ui-native/types';
+import '@impulse-ui-native/overlay';
 
 declare const Flyout: react.MemoExoticComponent<(props: PropsWithChildren<FlyoutProps>) => react_jsx_runtime.JSX.Element | null>;
 

package/dist/components/flyout.js

@@ -1,46 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  Fragment,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import {
-  Pressable,
-  StyleSheet,
-  useWindowDimensions
-} from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming
-} from "react-native-reanimated";
+import { Fragment, memo, useMemo } from "react";
+import { Pressable, StyleSheet, useWindowDimensions } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import {
   SafeAreaView,
   useSafeAreaInsets
 } from "react-native-safe-area-context";
-import { scheduleOnRN } from "react-native-worklets";
 import { View } from "@impulse-ui-native/primitives";
 import { useTheme } from "@impulse-ui-native/theme";
-import { FlyoutHandleHeight } from "../constants";
+import { useFlyoutLifecycle } from "../hooks";
 import { FlyoutHandle } from "./flyout-handle";
 import { FlyoutTitle } from "./flyout-title";
-const EnterAnimationConfig = {
-  damping: 50,
-  stiffness: 300,
-  mass: 1,
-  overshootClamping: true
-};
-const ExitAnimationConfig = {
-  duration: 150,
-  easing: Easing.in(Easing.quad)
-};
 const Flyout = memo(function Flyout2(props) {
   const {
     id,
@@ -64,16 +35,27 @@ const Flyout = memo(function Flyout2(props) {
   const screenHeight = windowDimensions.height;
   const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;
   const zIndex = flyoutTokens.zIndexBase + layer;
-  const [mounted, setMounted] = useState(open);
-  const [measuredHeight, setMeasuredHeight] = useState(null);
-  const [hasMeasured, setHasMeasured] = useState(false);
-  const [isTouchable, setIsTouchable] = useState(false);
-  const didOpen = useRef(false);
-  const isClosing = useRef(false);
-  const translateY = useSharedValue(
-    placement === "top" ? -screenHeight : screenHeight
-  );
-  const opacity = useSharedValue(0);
+  const {
+    close,
+    dragGesture,
+    hasMeasured,
+    isTouchable,
+    mounted,
+    onLayout,
+    opacity,
+    translateY
+  } = useFlyoutLifecycle({
+    id,
+    open,
+    placement,
+    screenHeight,
+    safeAreaInset: insets[placement],
+    overlayVisibleOpacity: flyoutTokens.overlayVisibleOpacity,
+    onClose,
+    onCloseFinished,
+    onOpen,
+    onOpenFinished
+  });
   const animatedStyle = useAnimatedStyle(() => {
     const offset = placement === "bottom" ? -(placementOffset ?? 0) : placementOffset ?? 0;
     return {
@@ -92,131 +74,6 @@ const Flyout = memo(function Flyout2(props) {
   const styles = useMemo(() => {
     return themedStyles(theme, placement, maxHeight);
   }, [theme, placement, maxHeight]);
-  const onLayout = useCallback(
-    (event) => {
-      if (measuredHeight !== null) {
-        return;
-      }
-      const rawHeight = event.nativeEvent.layout.height;
-      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;
-      translateY.value = placement === "top" ? -clampedHeight : clampedHeight;
-      setMeasuredHeight(clampedHeight);
-      setHasMeasured(true);
-    },
-    [insets, measuredHeight, placement, translateY]
-  );
-  const animateOut = useCallback(() => {
-    if (measuredHeight === null || isClosing.current) {
-      return;
-    }
-    isClosing.current = true;
-    setIsTouchable(false);
-    onClose?.(id);
-    const target = placement === "top" ? -measuredHeight : measuredHeight;
-    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {
-      if (finished) {
-        if (onCloseFinished) {
-          scheduleOnRN(onCloseFinished, id);
-        }
-        scheduleOnRN(setMounted, false);
-        scheduleOnRN(setMeasuredHeight, null);
-        scheduleOnRN(setHasMeasured, false);
-      }
-    });
-    opacity.value = withTiming(0, ExitAnimationConfig);
-    didOpen.current = false;
-  }, [
-    id,
-    measuredHeight,
-    onClose,
-    onCloseFinished,
-    opacity,
-    placement,
-    translateY
-  ]);
-  const dragGesture = useMemo(
-    () => Gesture.Pan().enabled(hasMeasured).onUpdate((event) => {
-      if (placement === "bottom") {
-        translateY.value = Math.max(0, event.translationY);
-        return;
-      }
-      translateY.value = Math.min(0, event.translationY);
-    }).onEnd((event) => {
-      if (measuredHeight === null) {
-        return;
-      }
-      let shouldClose = false;
-      if (placement === "bottom") {
-        shouldClose = event.translationY > measuredHeight * 0.5 || event.velocityY > 1500;
-      }
-      if (placement === "top") {
-        shouldClose = event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;
-      }
-      if (shouldClose) {
-        scheduleOnRN(animateOut);
-        return;
-      }
-      translateY.value = withSpring(0, EnterAnimationConfig);
-      opacity.value = withSpring(
-        flyoutTokens.overlayVisibleOpacity,
-        EnterAnimationConfig
-      );
-    }),
-    [
-      animateOut,
-      flyoutTokens.overlayVisibleOpacity,
-      hasMeasured,
-      measuredHeight,
-      opacity,
-      placement,
-      translateY
-    ]
-  );
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setMounted(true);
-    setIsTouchable(false);
-    setMeasuredHeight(null);
-    setHasMeasured(false);
-    isClosing.current = false;
-    didOpen.current = false;
-    translateY.value = placement === "top" ? -screenHeight : screenHeight;
-    opacity.value = 0;
-  }, [open, opacity, placement, screenHeight, translateY]);
-  useEffect(() => {
-    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {
-      return;
-    }
-    setIsTouchable(true);
-    onOpen?.(id);
-    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {
-      if (finished && onOpenFinished) {
-        scheduleOnRN(onOpenFinished, id);
-      }
-    });
-    opacity.value = withSpring(
-      flyoutTokens.overlayVisibleOpacity,
-      EnterAnimationConfig
-    );
-    didOpen.current = true;
-  }, [
-    flyoutTokens.overlayVisibleOpacity,
-    hasMeasured,
-    id,
-    measuredHeight,
-    onOpen,
-    onOpenFinished,
-    opacity,
-    open,
-    translateY
-  ]);
-  useEffect(() => {
-    if (!open && didOpen.current) {
-      animateOut();
-    }
-  }, [animateOut, open]);
   if (!mounted) {
     return null;
   }
@@ -226,7 +83,7 @@ const Flyout = memo(function Flyout2(props) {
       {
         pointerEvents: isTouchable ? "auto" : "none",
         style: [StyleSheet.absoluteFill, overlayStyle],
-        children: /* @__PURE__ */ jsx(Pressable, { onPress: animateOut, style: StyleSheet.absoluteFill })
+        children: /* @__PURE__ */ jsx(Pressable, { onPress: close, style: StyleSheet.absoluteFill })
       }
     ),
     /* @__PURE__ */ jsx(GestureDetector, { gesture: dragGesture, children: /* @__PURE__ */ jsx(

package/dist/components/flyout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import {\n  Fragment,\n  memo,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  LayoutChangeEvent,\n  Pressable,\n  StyleSheet,\n  useWindowDimensions,\n} from \"react-native\";\nimport { Gesture, GestureDetector } from \"react-native-gesture-handler\";\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from \"react-native-reanimated\";\nimport {\n  Edge,\n  SafeAreaView,\n  useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\n\nimport { FlyoutHandleHeight } from \"../constants\";\nimport { FlyoutProps } from \"../types\";\nimport { FlyoutHandle } from \"./flyout-handle\";\nimport { FlyoutTitle } from \"./flyout-title\";\n\nconst EnterAnimationConfig = {\n  damping: 50,\n  stiffness: 300,\n  mass: 1,\n  overshootClamping: true,\n};\n\nconst ExitAnimationConfig = {\n  duration: 150,\n  easing: Easing.in(Easing.quad),\n};\n\nexport const Flyout = memo(function Flyout(\n  props: PropsWithChildren<FlyoutProps>,\n) {\n  const {\n    id,\n    children,\n    placement = \"bottom\",\n    layer = 0,\n    title,\n    open,\n    topOffset,\n    bottomOffset,\n    onCloseFinished,\n    onClose,\n    onOpen,\n    onOpenFinished,\n  } = props;\n\n  const theme = useTheme();\n  const insets = useSafeAreaInsets();\n\n  const windowDimensions = useWindowDimensions();\n\n  const flyoutTokens = theme.components.flyout;\n\n  const placementOffset = placement === \"top\" ? topOffset : bottomOffset;\n  const screenHeight = windowDimensions.height;\n  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;\n  const zIndex = flyoutTokens.zIndexBase + layer;\n\n  const [mounted, setMounted] = useState(open);\n  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\n  const [hasMeasured, setHasMeasured] = useState(false);\n  const [isTouchable, setIsTouchable] = useState(false);\n\n  const didOpen = useRef(false);\n  const isClosing = useRef(false);\n\n  const translateY = useSharedValue(\n    placement === \"top\" ? -screenHeight : screenHeight,\n  );\n  const opacity = useSharedValue(0);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const offset =\n      placement === \"bottom\" ? -(placementOffset ?? 0) : (placementOffset ?? 0);\n\n    return {\n      transform: [{ translateY: translateY.value + offset }],\n      zIndex,\n    };\n  });\n\n  const overlayStyle = useAnimatedStyle(() => ({\n    opacity: opacity.value,\n    zIndex,\n    backgroundColor: flyoutTokens.overlayColor,\n  }));\n\n  const edges = useMemo<Edge[]>(() => {\n    return [placement, \"left\", \"right\"];\n  }, [placement]);\n\n  const styles = useMemo(() => {\n    return themedStyles(theme, placement, maxHeight);\n  }, [theme, placement, maxHeight]);\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      if (measuredHeight !== null) {\n        return;\n      }\n\n      const rawHeight = event.nativeEvent.layout.height;\n      const clampedHeight = rawHeight + insets[placement] + FlyoutHandleHeight;\n\n      translateY.value = placement === \"top\" ? -clampedHeight : clampedHeight;\n\n      setMeasuredHeight(clampedHeight);\n      setHasMeasured(true);\n    },\n    [insets, measuredHeight, placement, translateY],\n  );\n\n  const animateOut = useCallback(() => {\n    if (measuredHeight === null || isClosing.current) {\n      return;\n    }\n\n    isClosing.current = true;\n    setIsTouchable(false);\n    onClose?.(id);\n\n    const target = placement === \"top\" ? -measuredHeight : measuredHeight;\n\n    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\n      if (finished) {\n        if (onCloseFinished) {\n          scheduleOnRN(onCloseFinished, id);\n        }\n\n        scheduleOnRN(setMounted, false);\n        scheduleOnRN(setMeasuredHeight, null);\n        scheduleOnRN(setHasMeasured, false);\n      }\n    });\n\n    opacity.value = withTiming(0, ExitAnimationConfig);\n    didOpen.current = false;\n  }, [\n    id,\n    measuredHeight,\n    onClose,\n    onCloseFinished,\n    opacity,\n    placement,\n    translateY,\n  ]);\n\n  const dragGesture = useMemo(\n    () =>\n      Gesture.Pan()\n        .enabled(hasMeasured)\n        .onUpdate((event) => {\n          if (placement === \"bottom\") {\n            translateY.value = Math.max(0, event.translationY);\n            return;\n          }\n\n          translateY.value = Math.min(0, event.translationY);\n        })\n        .onEnd((event) => {\n          if (measuredHeight === null) {\n            return;\n          }\n\n          let shouldClose = false;\n\n          if (placement === \"bottom\") {\n            shouldClose =\n              event.translationY > measuredHeight * 0.5 ||\n              event.velocityY > 1500;\n          }\n\n          if (placement === \"top\") {\n            shouldClose =\n              event.translationY < -measuredHeight * 0.5 ||\n              event.velocityY < -1500;\n          }\n\n          if (shouldClose) {\n            scheduleOnRN(animateOut);\n            return;\n          }\n\n          translateY.value = withSpring(0, EnterAnimationConfig);\n          opacity.value = withSpring(\n            flyoutTokens.overlayVisibleOpacity,\n            EnterAnimationConfig,\n          );\n        }),\n    [\n      animateOut,\n      flyoutTokens.overlayVisibleOpacity,\n      hasMeasured,\n      measuredHeight,\n      opacity,\n      placement,\n      translateY,\n    ],\n  );\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    setMounted(true);\n    setIsTouchable(false);\n    setMeasuredHeight(null);\n    setHasMeasured(false);\n\n    isClosing.current = false;\n    didOpen.current = false;\n\n    translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\n    opacity.value = 0;\n  }, [open, opacity, placement, screenHeight, translateY]);\n\n  useEffect(() => {\n    if (!open || measuredHeight === null || !hasMeasured || didOpen.current) {\n      return;\n    }\n\n    setIsTouchable(true);\n    onOpen?.(id);\n\n    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\n      if (finished && onOpenFinished) {\n        scheduleOnRN(onOpenFinished, id);\n      }\n    });\n\n    opacity.value = withSpring(\n      flyoutTokens.overlayVisibleOpacity,\n      EnterAnimationConfig,\n    );\n\n    didOpen.current = true;\n  }, [\n    flyoutTokens.overlayVisibleOpacity,\n    hasMeasured,\n    id,\n    measuredHeight,\n    onOpen,\n    onOpenFinished,\n    opacity,\n    open,\n    translateY,\n  ]);\n\n  useEffect(() => {\n    if (!open && didOpen.current) {\n      animateOut();\n    }\n  }, [animateOut, open]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <Fragment>\n      <Animated.View\n        pointerEvents={isTouchable ? \"auto\" : \"none\"}\n        style={[StyleSheet.absoluteFill, overlayStyle]}\n      >\n        <Pressable onPress={animateOut} style={StyleSheet.absoluteFill} />\n      </Animated.View>\n\n      <GestureDetector gesture={dragGesture}>\n        <Animated.View\n          onLayout={onLayout}\n          style={[\n            styles.container,\n            !hasMeasured && styles.hidden,\n            animatedStyle,\n          ]}\n        >\n          <SafeAreaView edges={edges}>\n            {placement === \"bottom\" ? (\n              <FlyoutHandle placement={placement} />\n            ) : null}\n\n            {title ? <FlyoutTitle title={title} /> : null}\n\n            <View style={styles.content}>{children}</View>\n\n            {placement === \"top\" ? (\n              <FlyoutHandle placement={placement} />\n            ) : null}\n          </SafeAreaView>\n        </Animated.View>\n      </GestureDetector>\n    </Fragment>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  placement: \"top\" | \"bottom\",\n  maxHeight: number,\n) {\n  const flyoutTokens = theme.components.flyout;\n\n  return StyleSheet.create({\n    container: {\n      position: \"absolute\",\n      [placement]: 0,\n      left: 0,\n      right: 0,\n      backgroundColor: flyoutTokens.backgroundColor,\n      borderTopLeftRadius:\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n      borderTopRightRadius:\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n      borderBottomLeftRadius:\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\n      borderBottomRightRadius:\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\n    },\n    content: {\n      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\n      maxHeight,\n    },\n    hidden: {\n      opacity: flyoutTokens.hiddenOpacity,\n    },\n  });\n}\n"],"mappings":"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","names":["Flyout"]}
+{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import { Fragment, memo, PropsWithChildren, useMemo } from \"react\";\nimport { Pressable, StyleSheet, useWindowDimensions } from \"react-native\";\nimport { GestureDetector } from \"react-native-gesture-handler\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\nimport {\n  Edge,\n  SafeAreaView,\n  useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { AppTheme, useTheme } from \"@impulse-ui-native/theme\";\n\nimport { useFlyoutLifecycle } from \"../hooks\";\nimport { FlyoutProps } from \"../types\";\nimport { FlyoutHandle } from \"./flyout-handle\";\nimport { FlyoutTitle } from \"./flyout-title\";\n\nexport const Flyout = memo(function Flyout(\n  props: PropsWithChildren<FlyoutProps>,\n) {\n  const {\n    id,\n    children,\n    placement = \"bottom\",\n    layer = 0,\n    title,\n    open,\n    topOffset,\n    bottomOffset,\n    onCloseFinished,\n    onClose,\n    onOpen,\n    onOpenFinished,\n  } = props;\n\n  const theme = useTheme();\n  const insets = useSafeAreaInsets();\n\n  const windowDimensions = useWindowDimensions();\n\n  const flyoutTokens = theme.components.flyout;\n\n  const placementOffset = placement === \"top\" ? topOffset : bottomOffset;\n  const screenHeight = windowDimensions.height;\n  const maxHeight = screenHeight * flyoutTokens.maxHeightRatio;\n  const zIndex = flyoutTokens.zIndexBase + layer;\n\n  const {\n    close,\n    dragGesture,\n    hasMeasured,\n    isTouchable,\n    mounted,\n    onLayout,\n    opacity,\n    translateY,\n  } = useFlyoutLifecycle({\n    id,\n    open,\n    placement,\n    screenHeight,\n    safeAreaInset: insets[placement],\n    overlayVisibleOpacity: flyoutTokens.overlayVisibleOpacity,\n    onClose,\n    onCloseFinished,\n    onOpen,\n    onOpenFinished,\n  });\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const offset =\n      placement === \"bottom\" ? -(placementOffset ?? 0) : (placementOffset ?? 0);\n\n    return {\n      transform: [{ translateY: translateY.value + offset }],\n      zIndex,\n    };\n  });\n\n  const overlayStyle = useAnimatedStyle(() => ({\n    opacity: opacity.value,\n    zIndex,\n    backgroundColor: flyoutTokens.overlayColor,\n  }));\n\n  const edges = useMemo<Edge[]>(() => {\n    return [placement, \"left\", \"right\"];\n  }, [placement]);\n\n  const styles = useMemo(() => {\n    return themedStyles(theme, placement, maxHeight);\n  }, [theme, placement, maxHeight]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <Fragment>\n      <Animated.View\n        pointerEvents={isTouchable ? \"auto\" : \"none\"}\n        style={[StyleSheet.absoluteFill, overlayStyle]}\n      >\n        <Pressable onPress={close} style={StyleSheet.absoluteFill} />\n      </Animated.View>\n\n      <GestureDetector gesture={dragGesture}>\n        <Animated.View\n          onLayout={onLayout}\n          style={[\n            styles.container,\n            !hasMeasured && styles.hidden,\n            animatedStyle,\n          ]}\n        >\n          <SafeAreaView edges={edges}>\n            {placement === \"bottom\" ? (\n              <FlyoutHandle placement={placement} />\n            ) : null}\n\n            {title ? <FlyoutTitle title={title} /> : null}\n\n            <View style={styles.content}>{children}</View>\n\n            {placement === \"top\" ? (\n              <FlyoutHandle placement={placement} />\n            ) : null}\n          </SafeAreaView>\n        </Animated.View>\n      </GestureDetector>\n    </Fragment>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  placement: \"top\" | \"bottom\",\n  maxHeight: number,\n) {\n  const flyoutTokens = theme.components.flyout;\n\n  return StyleSheet.create({\n    container: {\n      position: \"absolute\",\n      [placement]: 0,\n      left: 0,\n      right: 0,\n      backgroundColor: flyoutTokens.backgroundColor,\n      borderTopLeftRadius:\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n      borderTopRightRadius:\n        placement === \"bottom\" ? flyoutTokens.borderRadius : 0,\n      borderBottomLeftRadius:\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\n      borderBottomRightRadius:\n        placement === \"top\" ? flyoutTokens.borderRadius : 0,\n    },\n    content: {\n      paddingHorizontal: flyoutTokens.contentPaddingHorizontal,\n      maxHeight,\n    },\n    hidden: {\n      opacity: flyoutTokens.hiddenOpacity,\n    },\n  });\n}\n"],"mappings":"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","names":["Flyout"]}

package/dist/components/index.d.mts

@@ -2,4 +2,4 @@ export { Flyout } from './flyout.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import '../types/flyout.types.mjs';
-import '@impulse-ui-native/types';
+import '@impulse-ui-native/overlay';

package/dist/hooks/index.d.mts

@@ -0,0 +1,6 @@
+export { useFlyoutLifecycle } from './use-flyout-lifecycle.hook.mjs';
+import 'react-native-reanimated';
+import 'react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture';
+import 'react-native';
+import '../types/flyout.types.mjs';
+import '@impulse-ui-native/overlay';

package/dist/hooks/index.js

@@ -0,0 +1,5 @@
+import { useFlyoutLifecycle } from "./use-flyout-lifecycle.hook";
+export {
+  useFlyoutLifecycle
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useFlyoutLifecycle } from \"./use-flyout-lifecycle.hook\";\n"],"mappings":"AAAA,SAAS,0BAA0B;","names":[]}

package/dist/hooks/use-flyout-lifecycle.hook.d.mts

@@ -0,0 +1,30 @@
+import * as react_native_reanimated from 'react-native-reanimated';
+import * as react_native_gesture_handler_lib_typescript_handlers_gestures_panGesture from 'react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture';
+import { LayoutChangeEvent } from 'react-native';
+import { FlyoutProps } from '../types/flyout.types.mjs';
+import '@impulse-ui-native/overlay';
+
+interface UseFlyoutLifecycleProps {
+    id: FlyoutProps["id"];
+    open: FlyoutProps["open"];
+    placement: NonNullable<FlyoutProps["placement"]>;
+    screenHeight: number;
+    safeAreaInset: number;
+    overlayVisibleOpacity: number;
+    onClose: FlyoutProps["onClose"];
+    onCloseFinished: FlyoutProps["onCloseFinished"];
+    onOpen: FlyoutProps["onOpen"];
+    onOpenFinished: FlyoutProps["onOpenFinished"];
+}
+declare function useFlyoutLifecycle(props: UseFlyoutLifecycleProps): {
+    close: () => void;
+    dragGesture: react_native_gesture_handler_lib_typescript_handlers_gestures_panGesture.PanGesture;
+    hasMeasured: boolean;
+    isTouchable: boolean;
+    mounted: boolean | undefined;
+    onLayout: (event: LayoutChangeEvent) => void;
+    opacity: react_native_reanimated.SharedValue<number>;
+    translateY: react_native_reanimated.SharedValue<number>;
+};
+
+export { useFlyoutLifecycle };

package/dist/hooks/use-flyout-lifecycle.hook.js

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import {
+  Easing,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { FlyoutHandleHeight } from "../constants";
+const EnterAnimationConfig = {
+  damping: 50,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: true
+};
+const ExitAnimationConfig = {
+  duration: 150,
+  easing: Easing.in(Easing.quad)
+};
+function useFlyoutLifecycle(props) {
+  const {
+    id,
+    open,
+    placement,
+    screenHeight,
+    safeAreaInset,
+    overlayVisibleOpacity,
+    onClose,
+    onCloseFinished,
+    onOpen,
+    onOpenFinished
+  } = props;
+  const [mounted, setMounted] = useState(open);
+  const [measuredHeight, setMeasuredHeight] = useState(null);
+  const [isTouchable, setIsTouchable] = useState(false);
+  const didOpen = useRef(false);
+  const isClosing = useRef(false);
+  const transitionId = useRef(0);
+  const translateY = useSharedValue(
+    placement === "top" ? -screenHeight : screenHeight
+  );
+  const opacity = useSharedValue(0);
+  const hasMeasured = measuredHeight !== null;
+  const onLayout = useCallback(
+    (event) => {
+      if (measuredHeight !== null) {
+        return;
+      }
+      const height = event.nativeEvent.layout.height + safeAreaInset + FlyoutHandleHeight;
+      translateY.value = placement === "top" ? -height : height;
+      setMeasuredHeight(height);
+    },
+    [measuredHeight, placement, safeAreaInset, translateY]
+  );
+  const finishClosing = useCallback(
+    (finishedTransitionId) => {
+      if (!isClosing.current || transitionId.current !== finishedTransitionId) {
+        return;
+      }
+      isClosing.current = false;
+      setMounted(false);
+      setMeasuredHeight(null);
+      onCloseFinished?.(id);
+    },
+    [id, onCloseFinished]
+  );
+  const close = useCallback(() => {
+    if (measuredHeight === null || isClosing.current) {
+      return;
+    }
+    isClosing.current = true;
+    transitionId.current += 1;
+    setIsTouchable(false);
+    onClose?.(id);
+    const target = placement === "top" ? -measuredHeight : measuredHeight;
+    const closingTransitionId = transitionId.current;
+    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {
+      if (finished) {
+        scheduleOnRN(finishClosing, closingTransitionId);
+      }
+    });
+    opacity.value = withTiming(0, ExitAnimationConfig);
+    didOpen.current = false;
+  }, [
+    finishClosing,
+    id,
+    measuredHeight,
+    onClose,
+    opacity,
+    placement,
+    translateY
+  ]);
+  const dragGesture = useMemo(
+    () => Gesture.Pan().enabled(hasMeasured).onUpdate((event) => {
+      if (placement === "bottom") {
+        translateY.value = Math.max(0, event.translationY);
+        return;
+      }
+      translateY.value = Math.min(0, event.translationY);
+    }).onEnd((event) => {
+      if (measuredHeight === null) {
+        return;
+      }
+      const shouldClose = placement === "bottom" ? event.translationY > measuredHeight * 0.5 || event.velocityY > 1500 : event.translationY < -measuredHeight * 0.5 || event.velocityY < -1500;
+      if (shouldClose) {
+        scheduleOnRN(close);
+        return;
+      }
+      translateY.value = withSpring(0, EnterAnimationConfig);
+      opacity.value = withSpring(
+        overlayVisibleOpacity,
+        EnterAnimationConfig
+      );
+    }),
+    [
+      close,
+      hasMeasured,
+      measuredHeight,
+      opacity,
+      overlayVisibleOpacity,
+      placement,
+      translateY
+    ]
+  );
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    transitionId.current += 1;
+    setIsTouchable(false);
+    isClosing.current = false;
+    didOpen.current = false;
+    if (!mounted) {
+      setMounted(true);
+      setMeasuredHeight(null);
+      translateY.value = placement === "top" ? -screenHeight : screenHeight;
+      opacity.value = 0;
+    }
+  }, [mounted, open, opacity, placement, screenHeight, translateY]);
+  useEffect(() => {
+    if (!open || measuredHeight === null || didOpen.current) {
+      return;
+    }
+    setIsTouchable(true);
+    onOpen?.(id);
+    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {
+      if (finished && onOpenFinished) {
+        scheduleOnRN(onOpenFinished, id);
+      }
+    });
+    opacity.value = withSpring(overlayVisibleOpacity, EnterAnimationConfig);
+    didOpen.current = true;
+  }, [
+    id,
+    measuredHeight,
+    onOpen,
+    onOpenFinished,
+    opacity,
+    open,
+    overlayVisibleOpacity,
+    translateY
+  ]);
+  useEffect(() => {
+    if (open || !mounted || isClosing.current) {
+      return;
+    }
+    if (didOpen.current) {
+      close();
+      return;
+    }
+    setMounted(false);
+    setMeasuredHeight(null);
+  }, [close, mounted, open]);
+  return {
+    close,
+    dragGesture,
+    hasMeasured,
+    isTouchable,
+    mounted,
+    onLayout,
+    opacity,
+    translateY
+  };
+}
+export {
+  useFlyoutLifecycle
+};
+//# sourceMappingURL=use-flyout-lifecycle.hook.js.map

package/dist/hooks/use-flyout-lifecycle.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-flyout-lifecycle.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { LayoutChangeEvent } from \"react-native\";\nimport { Gesture } from \"react-native-gesture-handler\";\nimport {\n  Easing,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport type { FlyoutProps } from \"../types\";\nimport { FlyoutHandleHeight } from \"../constants\";\n\nconst EnterAnimationConfig = {\n  damping: 50,\n  stiffness: 300,\n  mass: 1,\n  overshootClamping: true,\n};\n\nconst ExitAnimationConfig = {\n  duration: 150,\n  easing: Easing.in(Easing.quad),\n};\n\ninterface UseFlyoutLifecycleProps {\n  id: FlyoutProps[\"id\"];\n  open: FlyoutProps[\"open\"];\n  placement: NonNullable<FlyoutProps[\"placement\"]>;\n  screenHeight: number;\n  safeAreaInset: number;\n  overlayVisibleOpacity: number;\n  onClose: FlyoutProps[\"onClose\"];\n  onCloseFinished: FlyoutProps[\"onCloseFinished\"];\n  onOpen: FlyoutProps[\"onOpen\"];\n  onOpenFinished: FlyoutProps[\"onOpenFinished\"];\n}\n\nexport function useFlyoutLifecycle(props: UseFlyoutLifecycleProps) {\n  const {\n    id,\n    open,\n    placement,\n    screenHeight,\n    safeAreaInset,\n    overlayVisibleOpacity,\n    onClose,\n    onCloseFinished,\n    onOpen,\n    onOpenFinished,\n  } = props;\n\n  const [mounted, setMounted] = useState(open);\n  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);\n  const [isTouchable, setIsTouchable] = useState(false);\n\n  const didOpen = useRef(false);\n  const isClosing = useRef(false);\n  const transitionId = useRef(0);\n\n  const translateY = useSharedValue(\n    placement === \"top\" ? -screenHeight : screenHeight,\n  );\n  const opacity = useSharedValue(0);\n\n  const hasMeasured = measuredHeight !== null;\n\n  const onLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      if (measuredHeight !== null) {\n        return;\n      }\n\n      const height =\n        event.nativeEvent.layout.height + safeAreaInset + FlyoutHandleHeight;\n\n      translateY.value = placement === \"top\" ? -height : height;\n      setMeasuredHeight(height);\n    },\n    [measuredHeight, placement, safeAreaInset, translateY],\n  );\n\n  const finishClosing = useCallback(\n    (finishedTransitionId: number) => {\n      if (!isClosing.current || transitionId.current !== finishedTransitionId) {\n        return;\n      }\n\n      isClosing.current = false;\n      setMounted(false);\n      setMeasuredHeight(null);\n      onCloseFinished?.(id);\n    },\n    [id, onCloseFinished],\n  );\n\n  const close = useCallback(() => {\n    if (measuredHeight === null || isClosing.current) {\n      return;\n    }\n\n    isClosing.current = true;\n    transitionId.current += 1;\n    setIsTouchable(false);\n    onClose?.(id);\n\n    const target = placement === \"top\" ? -measuredHeight : measuredHeight;\n    const closingTransitionId = transitionId.current;\n\n    translateY.value = withTiming(target, ExitAnimationConfig, (finished) => {\n      if (finished) {\n        scheduleOnRN(finishClosing, closingTransitionId);\n      }\n    });\n    opacity.value = withTiming(0, ExitAnimationConfig);\n    didOpen.current = false;\n  }, [\n    finishClosing,\n    id,\n    measuredHeight,\n    onClose,\n    opacity,\n    placement,\n    translateY,\n  ]);\n\n  const dragGesture = useMemo(\n    () =>\n      Gesture.Pan()\n        .enabled(hasMeasured)\n        .onUpdate((event) => {\n          if (placement === \"bottom\") {\n            translateY.value = Math.max(0, event.translationY);\n            return;\n          }\n\n          translateY.value = Math.min(0, event.translationY);\n        })\n        .onEnd((event) => {\n          if (measuredHeight === null) {\n            return;\n          }\n\n          const shouldClose =\n            placement === \"bottom\"\n              ? event.translationY > measuredHeight * 0.5 ||\n                event.velocityY > 1500\n              : event.translationY < -measuredHeight * 0.5 ||\n                event.velocityY < -1500;\n\n          if (shouldClose) {\n            scheduleOnRN(close);\n            return;\n          }\n\n          translateY.value = withSpring(0, EnterAnimationConfig);\n          opacity.value = withSpring(\n            overlayVisibleOpacity,\n            EnterAnimationConfig,\n          );\n        }),\n    [\n      close,\n      hasMeasured,\n      measuredHeight,\n      opacity,\n      overlayVisibleOpacity,\n      placement,\n      translateY,\n    ],\n  );\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    transitionId.current += 1;\n    setIsTouchable(false);\n    isClosing.current = false;\n    didOpen.current = false;\n\n    if (!mounted) {\n      setMounted(true);\n      setMeasuredHeight(null);\n      translateY.value = placement === \"top\" ? -screenHeight : screenHeight;\n      opacity.value = 0;\n    }\n  }, [mounted, open, opacity, placement, screenHeight, translateY]);\n\n  useEffect(() => {\n    if (!open || measuredHeight === null || didOpen.current) {\n      return;\n    }\n\n    setIsTouchable(true);\n    onOpen?.(id);\n\n    translateY.value = withSpring(0, EnterAnimationConfig, (finished) => {\n      if (finished && onOpenFinished) {\n        scheduleOnRN(onOpenFinished, id);\n      }\n    });\n    opacity.value = withSpring(overlayVisibleOpacity, EnterAnimationConfig);\n    didOpen.current = true;\n  }, [\n    id,\n    measuredHeight,\n    onOpen,\n    onOpenFinished,\n    opacity,\n    open,\n    overlayVisibleOpacity,\n    translateY,\n  ]);\n\n  useEffect(() => {\n    if (open || !mounted || isClosing.current) {\n      return;\n    }\n\n    if (didOpen.current) {\n      close();\n      return;\n    }\n\n    setMounted(false);\n    setMeasuredHeight(null);\n  }, [close, mounted, open]);\n\n  return {\n    close,\n    dragGesture,\n    hasMeasured,\n    isTouchable,\n    mounted,\n    onLayout,\n    opacity,\n    translateY,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -2,4 +2,4 @@ export { Flyout } from './components/flyout.mjs';
 export { FlyoutProps } from './types/flyout.types.mjs';
 import 'react';
 import 'react/jsx-runtime';
-import '@impulse-ui-native/types';
+import '@impulse-ui-native/overlay';

package/dist/types/flyout.types.d.mts

@@ -1,7 +1,6 @@
-import { LayerComponentBaseProps } from '@impulse-ui-native/types';
+import { OverlayComponentProps } from '@impulse-ui-native/overlay';
 
-interface FlyoutProps extends LayerComponentBaseProps {
-    open?: boolean;
+interface FlyoutProps extends OverlayComponentProps {
     placement?: "top" | "bottom";
     topOffset?: number;
     bottomOffset?: number;

package/dist/types/index.d.mts

@@ -1,2 +1,2 @@
 export { FlyoutProps } from './flyout.types.mjs';
-import '@impulse-ui-native/types';
+import '@impulse-ui-native/overlay';

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@impulse-ui-native/flyout",
-  "version": "2.3.4",
+  "version": "2.4.0",
+  "description": "Flyout, popover, and overlay components for ImpulseUI Native applications.",
+  "keywords": [
+    "react-native",
+    "flyout",
+    "popover",
+    "overlay",
+    "components"
+  ],
+  "license": "MIT",
   "source": "src/index.ts",
   "module": "dist/index.js",
   "types": "dist/index.d.mts",
@@ -19,10 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/primitives": "2.3.4",
-    "@impulse-ui-native/core": "2.3.4",
-    "@impulse-ui-native/types": "2.3.4",
-    "@impulse-ui-native/theme": "2.3.4"
+    "@impulse-ui-native/overlay": "2.4.0",
+    "@impulse-ui-native/primitives": "2.4.0",
+    "@impulse-ui-native/theme": "2.4.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",