@impulse-ui-native/flyout 2.6.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment, memo, useMemo } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { StyleSheet, useWindowDimensions } from "react-native";
|
|
4
4
|
import { GestureDetector } from "react-native-gesture-handler";
|
|
5
5
|
import Animated, { useAnimatedStyle } from "react-native-reanimated";
|
|
6
6
|
import {
|
|
7
7
|
SafeAreaView,
|
|
8
8
|
useSafeAreaInsets
|
|
9
9
|
} from "react-native-safe-area-context";
|
|
10
|
-
import { View } from "@impulse-ui-native/primitives";
|
|
10
|
+
import { Pressable, View } from "@impulse-ui-native/primitives";
|
|
11
11
|
import { useTheme } from "@impulse-ui-native/theme";
|
|
12
12
|
import { useFlyoutLifecycle } from "../hooks";
|
|
13
13
|
import { FlyoutHandle } from "./flyout-handle";
|
|
@@ -74,6 +74,14 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
74
74
|
const styles = useMemo(() => {
|
|
75
75
|
return themedStyles(theme, placement, maxHeight);
|
|
76
76
|
}, [theme, placement, maxHeight]);
|
|
77
|
+
const overlayContainerStyle = useMemo(
|
|
78
|
+
() => [StyleSheet.absoluteFill, overlayStyle],
|
|
79
|
+
[overlayStyle]
|
|
80
|
+
);
|
|
81
|
+
const containerStyle = useMemo(
|
|
82
|
+
() => [styles.container, !hasMeasured && styles.hidden, animatedStyle],
|
|
83
|
+
[animatedStyle, hasMeasured, styles.container, styles.hidden]
|
|
84
|
+
);
|
|
77
85
|
if (!mounted) {
|
|
78
86
|
return null;
|
|
79
87
|
}
|
|
@@ -82,27 +90,16 @@ const Flyout = memo(function Flyout2(props) {
|
|
|
82
90
|
Animated.View,
|
|
83
91
|
{
|
|
84
92
|
pointerEvents: isTouchable ? "auto" : "none",
|
|
85
|
-
style:
|
|
93
|
+
style: overlayContainerStyle,
|
|
86
94
|
children: /* @__PURE__ */ jsx(Pressable, { onPress: close, style: StyleSheet.absoluteFill })
|
|
87
95
|
}
|
|
88
96
|
),
|
|
89
|
-
/* @__PURE__ */ jsx(GestureDetector, { gesture: dragGesture, children: /* @__PURE__ */ jsx(
|
|
90
|
-
|
|
91
|
-
{
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
!hasMeasured && styles.hidden,
|
|
96
|
-
animatedStyle
|
|
97
|
-
],
|
|
98
|
-
children: /* @__PURE__ */ jsxs(SafeAreaView, { edges, children: [
|
|
99
|
-
placement === "bottom" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null,
|
|
100
|
-
title ? /* @__PURE__ */ jsx(FlyoutTitle, { title }) : null,
|
|
101
|
-
/* @__PURE__ */ jsx(View, { style: styles.content, children }),
|
|
102
|
-
placement === "top" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null
|
|
103
|
-
] })
|
|
104
|
-
}
|
|
105
|
-
) })
|
|
97
|
+
/* @__PURE__ */ jsx(GestureDetector, { gesture: dragGesture, children: /* @__PURE__ */ jsx(Animated.View, { onLayout, style: containerStyle, children: /* @__PURE__ */ jsxs(SafeAreaView, { edges, children: [
|
|
98
|
+
placement === "bottom" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null,
|
|
99
|
+
title ? /* @__PURE__ */ jsx(FlyoutTitle, { title }) : null,
|
|
100
|
+
/* @__PURE__ */ jsx(View, { style: styles.content, children }),
|
|
101
|
+
placement === "top" ? /* @__PURE__ */ jsx(FlyoutHandle, { placement }) : null
|
|
102
|
+
] }) }) })
|
|
106
103
|
] });
|
|
107
104
|
});
|
|
108
105
|
function themedStyles(theme, placement, maxHeight) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import { Fragment, memo, PropsWithChildren, useMemo } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/flyout.tsx"],"sourcesContent":["import { Fragment, memo, PropsWithChildren, useMemo } from \"react\";\nimport { 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 { Pressable, 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 const overlayContainerStyle = useMemo(\n () => [StyleSheet.absoluteFill, overlayStyle],\n [overlayStyle],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, !hasMeasured && styles.hidden, animatedStyle],\n [animatedStyle, hasMeasured, styles.container, styles.hidden],\n );\n\n if (!mounted) {\n return null;\n }\n\n return (\n <Fragment>\n <Animated.View\n pointerEvents={isTouchable ? \"auto\" : \"none\"}\n style={overlayContainerStyle}\n >\n <Pressable onPress={close} style={StyleSheet.absoluteFill} />\n </Animated.View>\n\n <GestureDetector gesture={dragGesture}>\n <Animated.View onLayout={onLayout} style={containerStyle}>\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"]}
|
|
@@ -174,16 +174,28 @@ function useFlyoutLifecycle(props) {
|
|
|
174
174
|
setMounted(false);
|
|
175
175
|
setMeasuredHeight(null);
|
|
176
176
|
}, [close, mounted, open]);
|
|
177
|
-
return
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
177
|
+
return useMemo(
|
|
178
|
+
() => ({
|
|
179
|
+
close,
|
|
180
|
+
dragGesture,
|
|
181
|
+
hasMeasured,
|
|
182
|
+
isTouchable,
|
|
183
|
+
mounted,
|
|
184
|
+
onLayout,
|
|
185
|
+
opacity,
|
|
186
|
+
translateY
|
|
187
|
+
}),
|
|
188
|
+
[
|
|
189
|
+
close,
|
|
190
|
+
dragGesture,
|
|
191
|
+
hasMeasured,
|
|
192
|
+
isTouchable,
|
|
193
|
+
mounted,
|
|
194
|
+
onLayout,
|
|
195
|
+
opacity,
|
|
196
|
+
translateY
|
|
197
|
+
]
|
|
198
|
+
);
|
|
187
199
|
}
|
|
188
200
|
export {
|
|
189
201
|
useFlyoutLifecycle
|
|
@@ -1 +1 @@
|
|
|
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 { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\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 tokens = useComponentsTokens();\n const handleHeight = tokens.flyout.handle.containerHeight;\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 + handleHeight;\n\n translateY.value = placement === \"top\" ? -height : height;\n setMeasuredHeight(height);\n },\n [handleHeight, 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
|
|
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 { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { FlyoutProps } from \"../types\";\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 tokens = useComponentsTokens();\n const handleHeight = tokens.flyout.handle.containerHeight;\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 + handleHeight;\n\n translateY.value = placement === \"top\" ? -height : height;\n setMeasuredHeight(height);\n },\n [handleHeight, 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 useMemo(\n () => ({\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n }),\n [\n close,\n dragGesture,\n hasMeasured,\n isTouchable,\n mounted,\n onLayout,\n opacity,\n translateY,\n ],\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/flyout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "Flyout, popover, and overlay components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/theme": "2.
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/theme": "2.8.0",
|
|
32
|
+
"@impulse-ui-native/overlay": "2.8.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "2.8.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|