@impulse-ui-native/popover 16.0.0 → 17.0.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.
- package/README.md +5 -3
- package/dist/components/popover-content.js +25 -2
- package/dist/components/popover-content.js.map +1 -1
- package/dist/components/popover-surface.d.mts +4 -2
- package/dist/components/popover-surface.js +58 -9
- package/dist/components/popover-surface.js.map +1 -1
- package/dist/hooks/use-popover-position.hook.d.mts +3 -5
- package/dist/hooks/use-popover-position.hook.js +3 -1
- package/dist/hooks/use-popover-position.hook.js.map +1 -1
- package/dist/types/popover-position.types.d.mts +11 -0
- package/dist/types/popover-position.types.js +1 -0
- package/dist/types/popover-position.types.js.map +1 -0
- package/dist/types/popover-surface.types.d.mts +13 -0
- package/dist/types/popover-surface.types.js +1 -0
- package/dist/types/popover-surface.types.js.map +1 -0
- package/package.json +16 -9
package/README.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# @impulse-ui-native/popover
|
|
2
2
|
|
|
3
|
-
Native anchored overlays with theme tokens and Portal rendering. Tooltip and Popover share measurement and collision handling; no Overlay store
|
|
3
|
+
Native anchored overlays with theme tokens and Portal rendering. Tooltip and Popover share measurement and collision handling; no Overlay store is required. Motion uses Reanimated and Worklets.
|
|
4
4
|
|
|
5
5
|
## Installation and providers
|
|
6
6
|
|
|
7
7
|
```sh
|
|
8
|
-
pnpm add @impulse-ui-native/popover @impulse-ui-native/portal @impulse-ui-native/theme react-native-safe-area-context
|
|
8
|
+
pnpm add @impulse-ui-native/popover @impulse-ui-native/portal @impulse-ui-native/theme react-native-safe-area-context react-native-reanimated react-native-worklets
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Install `SafeAreaProvider`, `ThemeProvider`, and `PortalProvider` at the app root. Render `PortalsHost` last, inside a full-screen native View and the same theme/safe-area providers. Create the `PortalStore` once outside render. A custom `portalName` must match its host's `name`. Positioning measures both anchor and host in window coordinates, so an inset host also works within its own bounds.
|
|
11
|
+
Configure Reanimated/Worklets in the native host. Install `SafeAreaProvider`, `ThemeProvider`, and `PortalProvider` at the app root. Render `PortalsHost` last, inside a full-screen native View and the same theme/safe-area providers. Create the `PortalStore` once outside render. A custom `portalName` must match its host's `name`. Positioning measures both anchor and host in window coordinates, so an inset host also works within its own bounds.
|
|
12
12
|
|
|
13
13
|
## Compound popover
|
|
14
14
|
|
|
@@ -79,3 +79,5 @@ panel styling.
|
|
|
79
79
|
## Agent and design reference
|
|
80
80
|
|
|
81
81
|
Start with the [capability guide](../../docs/design-system/capabilities/popover.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|
|
82
|
+
|
|
83
|
+
Popover and Tooltip use a restrained, critically damped scale and fade from the edge facing the anchor, respecting the resolved collision placement. Entry waits for measurement, and content remains mounted until exit settles. `enterDuration` / `exitDuration` are perceptual spring durations (240 / 180 ms); `closedScale` defaults to 0.96. Install `react-native-reanimated` and `react-native-worklets` in the native host.
|
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from "react";
|
|
2
|
+
import { memo, useState } from "react";
|
|
3
|
+
import { useEventCallback } from "@impulse-ui-native/core";
|
|
4
|
+
import {
|
|
5
|
+
useOverlayLifecycle,
|
|
6
|
+
useOverlaySpring
|
|
7
|
+
} from "@impulse-ui-native/overlay";
|
|
3
8
|
import { Portal } from "@impulse-ui-native/portal";
|
|
9
|
+
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
4
10
|
import { PopoverContext } from "../contexts/popover.context";
|
|
5
11
|
import { usePopoverContext } from "../hooks/use-popover-context.hook";
|
|
6
12
|
import { PopoverSurfaceView } from "./popover-surface";
|
|
7
13
|
const PopoverContent = memo(function PopoverContent2(props) {
|
|
8
14
|
const context = usePopoverContext();
|
|
9
|
-
|
|
15
|
+
const [ready, setReady] = useState(false);
|
|
16
|
+
const tokens = useComponentsTokens().popover;
|
|
17
|
+
const { options, progress } = useOverlaySpring(tokens);
|
|
18
|
+
const handleReady = useEventCallback(() => setReady(true));
|
|
19
|
+
const handleClosed = useEventCallback(() => setReady(false));
|
|
20
|
+
const lifecycle = useOverlayLifecycle(
|
|
21
|
+
{ id: "popover", open: context.open, onCloseFinished: handleClosed },
|
|
22
|
+
{ ...options, ready }
|
|
23
|
+
);
|
|
24
|
+
return lifecycle.mounted ? /* @__PURE__ */ jsx(Portal, { name: context.portalName, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
|
|
25
|
+
PopoverSurfaceView,
|
|
26
|
+
{
|
|
27
|
+
...props,
|
|
28
|
+
progress,
|
|
29
|
+
interactive: lifecycle.interactive,
|
|
30
|
+
onReady: handleReady
|
|
31
|
+
}
|
|
32
|
+
) }) }) : null;
|
|
10
33
|
});
|
|
11
34
|
export {
|
|
12
35
|
PopoverContent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/popover-content.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Portal } from \"@impulse-ui-native/portal\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\nimport { PopoverSurfaceView } from \"./popover-surface\";\n\nexport const PopoverContent = memo(function PopoverContent(\n props: PopoverContentProps,\n) {\n const context = usePopoverContext();\n\n
|
|
1
|
+
{"version":3,"sources":["../../src/components/popover-content.tsx"],"sourcesContent":["import { memo, useState } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport {\r\n useOverlayLifecycle,\r\n useOverlaySpring,\r\n} from \"@impulse-ui-native/overlay\";\r\nimport { Portal } from \"@impulse-ui-native/portal\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverContentProps } from \"../types\";\r\nimport { PopoverContext } from \"../contexts/popover.context\";\r\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\r\nimport { PopoverSurfaceView } from \"./popover-surface\";\r\n\r\nexport const PopoverContent = memo(function PopoverContent(\r\n props: PopoverContentProps,\r\n) {\r\n const context = usePopoverContext();\r\n const [ready, setReady] = useState(false);\r\n const tokens = useComponentsTokens().popover;\r\n const { options, progress } = useOverlaySpring(tokens);\r\n const handleReady = useEventCallback(() => setReady(true));\r\n const handleClosed = useEventCallback(() => setReady(false));\r\n const lifecycle = useOverlayLifecycle(\r\n { id: \"popover\", open: context.open, onCloseFinished: handleClosed },\r\n { ...options, ready },\r\n );\r\n\r\n return lifecycle.mounted ? (\r\n <Portal name={context.portalName}>\r\n <PopoverContext.Provider value={context}>\r\n <PopoverSurfaceView\r\n {...props}\r\n progress={progress}\r\n interactive={lifecycle.interactive}\r\n onReady={handleReady}\r\n />\r\n </PopoverContext.Provider>\r\n </Portal>\r\n ) : null;\r\n});\r\n"],"mappings":"AAgCQ;AAhCR,SAAS,MAAM,gBAAgB;AAE/B,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,2BAA2B;AAGpC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,KAAK,SAASA,gBAC1C,OACA;AACA,QAAM,UAAU,kBAAkB;AAClC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,iBAAiB,MAAM;AACrD,QAAM,cAAc,iBAAiB,MAAM,SAAS,IAAI,CAAC;AACzD,QAAM,eAAe,iBAAiB,MAAM,SAAS,KAAK,CAAC;AAC3D,QAAM,YAAY;AAAA,IAChB,EAAE,IAAI,WAAW,MAAM,QAAQ,MAAM,iBAAiB,aAAa;AAAA,IACnE,EAAE,GAAG,SAAS,MAAM;AAAA,EACtB;AAEA,SAAO,UAAU,UACf,oBAAC,UAAO,MAAM,QAAQ,YACpB,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,aAAa,UAAU;AAAA,MACvB,SAAS;AAAA;AAAA,EACX,GACF,GACF,IACE;AACN,CAAC;","names":["PopoverContent"]}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { PopoverSurfaceViewProps } from '../types/popover-surface.types.mjs';
|
|
3
|
+
import 'react-native-reanimated';
|
|
4
|
+
import '../types/popover.types.mjs';
|
|
3
5
|
import 'react-native';
|
|
4
6
|
import '@impulse-ui-native/primitives';
|
|
5
7
|
|
|
6
|
-
declare const PopoverSurfaceView: react.MemoExoticComponent<({ children, style, onLayout, ...props }:
|
|
8
|
+
declare const PopoverSurfaceView: react.MemoExoticComponent<({ progress, interactive, onReady, children, style, onLayout, shadow, shadowPosition, ...props }: PopoverSurfaceViewProps) => react.JSX.Element>;
|
|
7
9
|
|
|
8
10
|
export { PopoverSurfaceView };
|
|
@@ -1,22 +1,62 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useMemo } from "react";
|
|
2
|
+
import { memo, useEffect, useMemo } from "react";
|
|
3
3
|
import { StyleSheet } from "react-native";
|
|
4
|
+
import Animated, { useAnimatedStyle } from "react-native-reanimated";
|
|
4
5
|
import { Pressable, View } from "@impulse-ui-native/primitives";
|
|
5
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
getShadowStyle,
|
|
8
|
+
useStyleProps,
|
|
9
|
+
useTheme,
|
|
10
|
+
useThemedStyles
|
|
11
|
+
} from "@impulse-ui-native/theme";
|
|
6
12
|
import { usePopoverSurface } from "../hooks/use-popover-surface.hook";
|
|
7
13
|
const PopoverSurfaceView = memo(function PopoverSurfaceView2({
|
|
14
|
+
progress,
|
|
15
|
+
interactive,
|
|
16
|
+
onReady,
|
|
8
17
|
children,
|
|
9
18
|
style,
|
|
10
19
|
onLayout,
|
|
20
|
+
shadow,
|
|
21
|
+
shadowPosition,
|
|
11
22
|
...props
|
|
12
23
|
}) {
|
|
24
|
+
const theme = useTheme();
|
|
13
25
|
const { hostRef, styleProps, close, handleLayout } = usePopoverSurface(onLayout);
|
|
14
26
|
const extractedStyleProps = useStyleProps(props);
|
|
15
27
|
const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);
|
|
28
|
+
const tokens = theme.components.popover;
|
|
29
|
+
const shadowStyle = useMemo(
|
|
30
|
+
() => getShadowStyle(shadow, shadowPosition, theme.colors, theme.shadows),
|
|
31
|
+
[shadow, shadowPosition, theme.colors, theme.shadows]
|
|
32
|
+
);
|
|
33
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
34
|
+
opacity: styleProps.ready ? Math.max(0, Math.min(1, progress.value)) : 0,
|
|
35
|
+
transform: [
|
|
36
|
+
{ scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value }
|
|
37
|
+
]
|
|
38
|
+
}));
|
|
16
39
|
const panelStyle = useMemo(
|
|
17
|
-
() => [
|
|
18
|
-
|
|
40
|
+
() => [
|
|
41
|
+
styles.panel,
|
|
42
|
+
shadowStyle,
|
|
43
|
+
extractedStyleProps,
|
|
44
|
+
style,
|
|
45
|
+
styles.position,
|
|
46
|
+
animatedStyle
|
|
47
|
+
],
|
|
48
|
+
[
|
|
49
|
+
styles.panel,
|
|
50
|
+
shadowStyle,
|
|
51
|
+
extractedStyleProps,
|
|
52
|
+
style,
|
|
53
|
+
styles.position,
|
|
54
|
+
animatedStyle
|
|
55
|
+
]
|
|
19
56
|
);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
if (styleProps.ready) onReady();
|
|
59
|
+
}, [styleProps.ready, onReady]);
|
|
20
60
|
return /* @__PURE__ */ jsxs(
|
|
21
61
|
View,
|
|
22
62
|
{
|
|
@@ -25,12 +65,19 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
|
|
|
25
65
|
pointerEvents: "box-none",
|
|
26
66
|
style: styles.host,
|
|
27
67
|
children: [
|
|
28
|
-
/* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: close }),
|
|
29
68
|
/* @__PURE__ */ jsx(
|
|
30
|
-
|
|
69
|
+
Pressable,
|
|
70
|
+
{
|
|
71
|
+
style: StyleSheet.absoluteFill,
|
|
72
|
+
onPress: close,
|
|
73
|
+
disabled: !interactive
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ jsx(
|
|
77
|
+
Animated.View,
|
|
31
78
|
{
|
|
32
79
|
...props,
|
|
33
|
-
pointerEvents:
|
|
80
|
+
pointerEvents: interactive ? "auto" : "none",
|
|
34
81
|
style: panelStyle,
|
|
35
82
|
onLayout: handleLayout,
|
|
36
83
|
children
|
|
@@ -40,8 +87,10 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
|
|
|
40
87
|
}
|
|
41
88
|
);
|
|
42
89
|
});
|
|
43
|
-
function themedStyles(theme, { bounds, host, position
|
|
90
|
+
function themedStyles(theme, { bounds, host, position }) {
|
|
44
91
|
const tokens = theme.components.popover;
|
|
92
|
+
const placement = position?.placement;
|
|
93
|
+
const transformOrigin = placement === "top" ? "center bottom" : placement === "left" ? "right center" : placement === "right" ? "left center" : "center top";
|
|
45
94
|
return StyleSheet.create({
|
|
46
95
|
host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },
|
|
47
96
|
position: {
|
|
@@ -49,7 +98,7 @@ function themedStyles(theme, { bounds, host, position, ready }) {
|
|
|
49
98
|
left: (position?.x ?? bounds.x) - (host?.x ?? 0),
|
|
50
99
|
top: (position?.y ?? bounds.y) - (host?.y ?? 0),
|
|
51
100
|
maxWidth: Math.min(tokens.maxWidth, bounds.width),
|
|
52
|
-
|
|
101
|
+
transformOrigin
|
|
53
102
|
},
|
|
54
103
|
panel: {
|
|
55
104
|
width: tokens.maxWidth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useEffect, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\r\nimport {\r\n getShadowStyle,\r\n useStyleProps,\r\n useTheme,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverSurfaceViewProps } from \"../types/popover-surface.types\";\r\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\r\nimport { usePopoverSurface } from \"../hooks/use-popover-surface.hook\";\r\n\r\nexport const PopoverSurfaceView = memo(function PopoverSurfaceView({\r\n progress,\r\n interactive,\r\n onReady,\r\n children,\r\n style,\r\n onLayout,\r\n shadow,\r\n shadowPosition,\r\n ...props\r\n}: PopoverSurfaceViewProps) {\r\n const theme = useTheme();\r\n const { hostRef, styleProps, close, handleLayout } =\r\n usePopoverSurface(onLayout);\r\n\r\n const extractedStyleProps = useStyleProps(props);\r\n const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);\r\n\r\n const tokens = theme.components.popover;\r\n const shadowStyle = useMemo(\r\n () => getShadowStyle(shadow, shadowPosition, theme.colors, theme.shadows),\r\n [shadow, shadowPosition, theme.colors, theme.shadows],\r\n );\r\n const animatedStyle = useAnimatedStyle(() => ({\r\n opacity: styleProps.ready ? Math.max(0, Math.min(1, progress.value)) : 0,\r\n transform: [\r\n { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value },\r\n ],\r\n }));\r\n\r\n const panelStyle = useMemo(\r\n () => [\r\n styles.panel,\r\n shadowStyle,\r\n extractedStyleProps,\r\n style,\r\n styles.position,\r\n animatedStyle,\r\n ],\r\n [\r\n styles.panel,\r\n shadowStyle,\r\n extractedStyleProps,\r\n style,\r\n styles.position,\r\n animatedStyle,\r\n ],\r\n );\r\n\r\n useEffect(() => {\r\n if (styleProps.ready) onReady();\r\n }, [styleProps.ready, onReady]);\r\n\r\n return (\r\n <View\r\n ref={hostRef}\r\n collapsable={false}\r\n pointerEvents=\"box-none\"\r\n style={styles.host}\r\n >\r\n <Pressable\r\n style={StyleSheet.absoluteFill}\r\n onPress={close}\r\n disabled={!interactive}\r\n />\r\n <Animated.View\r\n {...props}\r\n pointerEvents={interactive ? \"auto\" : \"none\"}\r\n style={panelStyle}\r\n onLayout={handleLayout}\r\n >\r\n {children}\r\n </Animated.View>\r\n </View>\r\n );\r\n});\r\n\r\nfunction themedStyles(\r\n theme: AppTheme,\r\n { bounds, host, position }: PopoverSurfaceStyleProps,\r\n) {\r\n const tokens = theme.components.popover;\r\n const placement = position?.placement;\r\n const transformOrigin =\r\n placement === \"top\"\r\n ? \"center bottom\"\r\n : placement === \"left\"\r\n ? \"right center\"\r\n : placement === \"right\"\r\n ? \"left center\"\r\n : \"center top\";\r\n\r\n return StyleSheet.create({\r\n host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },\r\n\r\n position: {\r\n position: \"absolute\",\r\n left: (position?.x ?? bounds.x) - (host?.x ?? 0),\r\n top: (position?.y ?? bounds.y) - (host?.y ?? 0),\r\n maxWidth: Math.min(tokens.maxWidth, bounds.width),\r\n transformOrigin,\r\n },\r\n\r\n panel: {\r\n width: tokens.maxWidth,\r\n backgroundColor: tokens.backgroundColor,\r\n borderColor: tokens.borderColor,\r\n borderWidth: tokens.borderWidth,\r\n borderRadius: tokens.borderRadius,\r\n paddingHorizontal: tokens.paddingHorizontal,\r\n paddingVertical: tokens.paddingVertical,\r\n gap: tokens.gap,\r\n },\r\n });\r\n}\r\n"],"mappings":"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","names":["PopoverSurfaceView"]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { RefObject, ComponentRef } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
|
-
import {
|
|
3
|
+
import { PopoverMeasurement } from '../types/popover-position.types.mjs';
|
|
4
|
+
import '../types/popover.types.mjs';
|
|
4
5
|
import '@impulse-ui-native/primitives';
|
|
5
6
|
|
|
6
7
|
declare function usePopoverPosition(hostRef: RefObject<ComponentRef<typeof View> | null>): {
|
|
7
|
-
measurement:
|
|
8
|
-
anchor: PopoverRect;
|
|
9
|
-
host: PopoverRect;
|
|
10
|
-
} | null;
|
|
8
|
+
measurement: PopoverMeasurement | null;
|
|
11
9
|
bounds: {
|
|
12
10
|
x: number;
|
|
13
11
|
y: number;
|
|
@@ -9,7 +9,9 @@ function usePopoverPosition(hostRef) {
|
|
|
9
9
|
const { anchorRef } = usePopoverContext();
|
|
10
10
|
const window = useWindowDimensions();
|
|
11
11
|
const insets = useSafeAreaInsets();
|
|
12
|
-
const [measurement, setMeasurement] = useState(
|
|
12
|
+
const [measurement, setMeasurement] = useState(
|
|
13
|
+
null
|
|
14
|
+
);
|
|
13
15
|
const tokens = useComponentsTokens().popover;
|
|
14
16
|
const bounds = useMemo(() => {
|
|
15
17
|
const host = measurement?.host;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-popover-position.hook.ts"],"sourcesContent":["import type { ComponentRef, RefObject } from \"react\";\nimport type { View } from \"react-native\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useWindowDimensions } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-popover-position.hook.ts"],"sourcesContent":["import type { ComponentRef, RefObject } from \"react\";\r\nimport type { View } from \"react-native\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { useWindowDimensions } from \"react-native\";\r\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\r\n\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { PopoverMeasurement } from \"../types/popover-position.types\";\r\nimport { AnchorMeasureInterval } from \"../constants/popover.constants\";\r\nimport { equalRects } from \"../utils/popover-position.utils\";\r\nimport { usePopoverContext } from \"./use-popover-context.hook\";\r\n\r\nexport function usePopoverPosition(\r\n hostRef: RefObject<ComponentRef<typeof View> | null>,\r\n) {\r\n const { anchorRef } = usePopoverContext();\r\n const window = useWindowDimensions();\r\n const insets = useSafeAreaInsets();\r\n\r\n const [measurement, setMeasurement] = useState<PopoverMeasurement | null>(\r\n null,\r\n );\r\n\r\n const tokens = useComponentsTokens().popover;\r\n\r\n const bounds = useMemo(() => {\r\n const host = measurement?.host;\r\n const x = Math.max(host?.x ?? 0, insets.left) + tokens.edgeOffset;\r\n const y = Math.max(host?.y ?? 0, insets.top) + tokens.edgeOffset;\r\n const right =\r\n Math.min(\r\n host ? host.x + host.width : window.width,\r\n window.width - insets.right,\r\n ) - tokens.edgeOffset;\r\n const bottom =\r\n Math.min(\r\n host ? host.y + host.height : window.height,\r\n window.height - insets.bottom,\r\n ) - tokens.edgeOffset;\r\n\r\n return {\r\n x,\r\n y,\r\n width: Math.max(0, right - x),\r\n height: Math.max(0, bottom - y),\r\n };\r\n }, [\r\n measurement?.host,\r\n insets,\r\n window.width,\r\n window.height,\r\n tokens.edgeOffset,\r\n ]);\r\n\r\n useEffect(() => {\r\n let active = true;\r\n let measuring = false;\r\n\r\n const measure = () => {\r\n const anchorNode = anchorRef.current;\r\n const hostNode = hostRef.current;\r\n\r\n if (!anchorNode || !hostNode) {\r\n setMeasurement(null);\r\n\r\n return;\r\n }\r\n\r\n if (measuring) {\r\n return;\r\n }\r\n\r\n measuring = true;\r\n\r\n hostNode.measureInWindow((x, y, width, height) => {\r\n if (!active) {\r\n return;\r\n }\r\n\r\n const host = { x, y, width, height };\r\n\r\n anchorNode.measureInWindow((ax, ay, aw, ah) => {\r\n measuring = false;\r\n\r\n if (\r\n !active ||\r\n anchorRef.current !== anchorNode ||\r\n hostRef.current !== hostNode\r\n ) {\r\n return;\r\n }\r\n\r\n const anchor = { x: ax, y: ay, width: aw, height: ah };\r\n\r\n setMeasurement((previous) => {\r\n const sameAnchor = equalRects(previous?.anchor ?? null, anchor);\r\n const sameHost = equalRects(previous?.host ?? null, host);\r\n\r\n if (sameAnchor && sameHost) {\r\n return previous;\r\n }\r\n\r\n return {\r\n anchor,\r\n host: sameHost && previous ? previous.host : host,\r\n };\r\n });\r\n });\r\n });\r\n };\r\n\r\n measure();\r\n\r\n const timer = setInterval(measure, AnchorMeasureInterval);\r\n\r\n return () => {\r\n active = false;\r\n clearInterval(timer);\r\n };\r\n }, [anchorRef, hostRef, window.width, window.height]);\r\n\r\n const anchor = measurement?.anchor;\r\n\r\n const visible = Boolean(\r\n anchor &&\r\n anchor.width > 0 &&\r\n anchor.height > 0 &&\r\n bounds.width > 0 &&\r\n bounds.height > 0 &&\r\n anchor.x + anchor.width > bounds.x &&\r\n anchor.x < bounds.x + bounds.width &&\r\n anchor.y + anchor.height > bounds.y &&\r\n anchor.y < bounds.y + bounds.height,\r\n );\r\n\r\n return { measurement, bounds, visible };\r\n}\r\n"],"mappings":"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","names":["anchor"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PopoverRect } from './popover.types.mjs';
|
|
2
|
+
import 'react';
|
|
3
|
+
import 'react-native';
|
|
4
|
+
import '@impulse-ui-native/primitives';
|
|
5
|
+
|
|
6
|
+
interface PopoverMeasurement {
|
|
7
|
+
anchor: PopoverRect;
|
|
8
|
+
host: PopoverRect;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export type { PopoverMeasurement };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=popover-position.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SharedValue } from 'react-native-reanimated';
|
|
2
|
+
import { PopoverContentProps } from './popover.types.mjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
import 'react-native';
|
|
5
|
+
import '@impulse-ui-native/primitives';
|
|
6
|
+
|
|
7
|
+
interface PopoverSurfaceViewProps extends PopoverContentProps {
|
|
8
|
+
progress: SharedValue<number>;
|
|
9
|
+
interactive: boolean;
|
|
10
|
+
onReady: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export type { PopoverSurfaceViewProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=popover-surface.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/popover",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.0.0",
|
|
4
4
|
"description": "Portal-rendered tooltips and compound anchored popovers for ImpulseUI Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/icon": "
|
|
31
|
-
"@impulse-ui-native/core": "
|
|
32
|
-
"@impulse-ui-native/theme": "
|
|
33
|
-
"@impulse-ui-native/primitives": "
|
|
34
|
-
"@impulse-ui-native/portal": "
|
|
30
|
+
"@impulse-ui-native/icon": "17.0.0",
|
|
31
|
+
"@impulse-ui-native/core": "17.0.0",
|
|
32
|
+
"@impulse-ui-native/theme": "17.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "17.0.0",
|
|
34
|
+
"@impulse-ui-native/portal": "17.0.0",
|
|
35
|
+
"@impulse-ui-native/overlay": "17.0.0"
|
|
35
36
|
},
|
|
36
37
|
"devDependencies": {
|
|
37
38
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
@@ -43,12 +44,17 @@
|
|
|
43
44
|
"react": "19.3.0",
|
|
44
45
|
"react-native": "0.88.0",
|
|
45
46
|
"react-native-safe-area-context": "~5.10.1",
|
|
46
|
-
"typescript": "~6.0.3"
|
|
47
|
+
"typescript": "~6.0.3",
|
|
48
|
+
"react-native-reanimated": "4.7.1",
|
|
49
|
+
"react-native-worklets": "0.13.0",
|
|
50
|
+
"react-reconciler": "0.31.0"
|
|
47
51
|
},
|
|
48
52
|
"peerDependencies": {
|
|
49
53
|
"react": ">=18",
|
|
50
54
|
"react-native": ">=0.73",
|
|
51
|
-
"react-native-safe-area-context": ">=5.0.0"
|
|
55
|
+
"react-native-safe-area-context": ">=5.0.0",
|
|
56
|
+
"react-native-reanimated": ">=4",
|
|
57
|
+
"react-native-worklets": ">=0.5"
|
|
52
58
|
},
|
|
53
59
|
"publishConfig": {
|
|
54
60
|
"access": "public"
|
|
@@ -58,6 +64,7 @@
|
|
|
58
64
|
"build": "tsup --config tsup.config.ts",
|
|
59
65
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
60
66
|
"lint": "pnpm exec eslint . --fix",
|
|
61
|
-
"format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore"
|
|
67
|
+
"format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path ../../.prettierignore",
|
|
68
|
+
"test": "node --test ../../scripts/popover-motion-tests.mjs"
|
|
62
69
|
}
|
|
63
70
|
}
|