@impulse-ui-native/popover 9.1.2 → 10.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/dist/components/index.d.mts +9 -10
- package/dist/components/popover-close.d.mts +1 -2
- package/dist/components/popover-content.d.mts +1 -2
- package/dist/components/popover-description.d.mts +1 -2
- package/dist/components/popover-footer.d.mts +1 -2
- package/dist/components/popover-header.d.mts +1 -2
- package/dist/components/popover-root.d.mts +1 -2
- package/dist/components/popover-root.js.map +1 -1
- package/dist/components/popover-surface.d.mts +1 -2
- package/dist/components/popover-title.d.mts +1 -2
- package/dist/components/popover-trigger.d.mts +1 -2
- package/dist/components/popover.d.mts +1 -2
- package/dist/components/tooltip.d.mts +1 -2
- package/dist/hooks/use-popover-position.hook.d.mts +2 -2
- package/dist/hooks/use-popover-position.hook.js.map +1 -1
- package/dist/hooks/use-popover-surface.hook.d.mts +4 -9
- package/dist/hooks/use-popover-surface.hook.js.map +1 -1
- package/dist/index.d.mts +0 -1
- package/dist/types/popover.types.d.mts +9 -3
- package/package.json +12 -12
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
2
|
import { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverHeaderProps, PopoverFooterProps, PopoverTitleProps, PopoverDescriptionProps, PopoverCloseProps } from '../types/popover.types.mjs';
|
|
4
3
|
export { Tooltip } from './tooltip.mjs';
|
|
@@ -6,16 +5,16 @@ import 'react-native';
|
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
7
6
|
|
|
8
7
|
declare const Popover: react.NamedExoticComponent<PopoverProps> & {
|
|
9
|
-
readonly type: ({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) =>
|
|
8
|
+
readonly type: ({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) => react.JSX.Element;
|
|
10
9
|
} & {
|
|
11
|
-
Root: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) =>
|
|
12
|
-
Trigger: react.MemoExoticComponent<({ trigger, disabled, loading, onPress, onLongPress, ...props }: PopoverTriggerProps) =>
|
|
13
|
-
Content: react.MemoExoticComponent<(props: PopoverContentProps) =>
|
|
14
|
-
Header: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) =>
|
|
15
|
-
Footer: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) =>
|
|
16
|
-
Title: react.MemoExoticComponent<(props: PopoverTitleProps) =>
|
|
17
|
-
Description: react.MemoExoticComponent<(props: PopoverDescriptionProps) =>
|
|
18
|
-
Close: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: PopoverCloseProps) =>
|
|
10
|
+
Root: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) => react.JSX.Element>;
|
|
11
|
+
Trigger: react.MemoExoticComponent<({ trigger, disabled, loading, onPress, onLongPress, ...props }: PopoverTriggerProps) => react.JSX.Element>;
|
|
12
|
+
Content: react.MemoExoticComponent<(props: PopoverContentProps) => react.JSX.Element | null>;
|
|
13
|
+
Header: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) => react.JSX.Element>;
|
|
14
|
+
Footer: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) => react.JSX.Element>;
|
|
15
|
+
Title: react.MemoExoticComponent<(props: PopoverTitleProps) => react.JSX.Element>;
|
|
16
|
+
Description: react.MemoExoticComponent<(props: PopoverDescriptionProps) => react.JSX.Element>;
|
|
17
|
+
Close: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: PopoverCloseProps) => react.JSX.Element>;
|
|
19
18
|
};
|
|
20
19
|
|
|
21
20
|
export { Popover };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverCloseProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverClose: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: PopoverCloseProps) =>
|
|
6
|
+
declare const PopoverClose: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: PopoverCloseProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverClose };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverContentProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverContent: react.MemoExoticComponent<(props: PopoverContentProps) =>
|
|
6
|
+
declare const PopoverContent: react.MemoExoticComponent<(props: PopoverContentProps) => react.JSX.Element | null>;
|
|
8
7
|
|
|
9
8
|
export { PopoverContent };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverDescriptionProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverDescription: react.MemoExoticComponent<(props: PopoverDescriptionProps) =>
|
|
6
|
+
declare const PopoverDescription: react.MemoExoticComponent<(props: PopoverDescriptionProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverDescription };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverFooterProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverFooter: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) =>
|
|
6
|
+
declare const PopoverFooter: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverFooter };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverHeaderProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverHeader: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) =>
|
|
6
|
+
declare const PopoverHeader: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverHeader };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverRootProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverRoot: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) =>
|
|
6
|
+
declare const PopoverRoot: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverRoot };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/popover-root.tsx"],"sourcesContent":["import type { View } from \"react-native\";\nimport { memo, useMemo, useRef } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport type { PopoverRootProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\n\nexport const PopoverRoot = memo(function PopoverRoot({\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disabled = false,\n placement = \"bottom\",\n portalName,\n}: PopoverRootProps) {\n const anchorRef = useRef<View
|
|
1
|
+
{"version":3,"sources":["../../src/components/popover-root.tsx"],"sourcesContent":["import type { ComponentRef } from \"react\";\nimport type { View } from \"react-native\";\nimport { memo, useMemo, useRef } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport type { PopoverRootProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\n\nexport const PopoverRoot = memo(function PopoverRoot({\n children,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disabled = false,\n placement = \"bottom\",\n portalName,\n}: PopoverRootProps) {\n const anchorRef = useRef<ComponentRef<typeof View>>(null);\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const context = useMemo(\n () => ({\n open: open && !disabled,\n disabled,\n setOpen,\n anchorRef,\n placement,\n portalName,\n }),\n [open, disabled, setOpen, placement, portalName],\n );\n\n return (\n <PopoverContext.Provider value={context}>\n {children}\n </PopoverContext.Provider>\n );\n});\n"],"mappings":"AAuCI;AArCJ,SAAS,MAAM,SAAS,cAAc;AAEtC,SAAS,4BAA4B;AAGrC,SAAS,sBAAsB;AAExB,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAqB;AACnB,QAAM,YAAY,OAAkC,IAAI;AAExD,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,MAAM,QAAQ,CAAC;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,SAAS,WAAW,UAAU;AAAA,EACjD;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["PopoverRoot"]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverContentProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverSurfaceView: react.MemoExoticComponent<({ children, style, onLayout, ...props }: PopoverContentProps) =>
|
|
6
|
+
declare const PopoverSurfaceView: react.MemoExoticComponent<({ children, style, onLayout, ...props }: PopoverContentProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverSurfaceView };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverTitleProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverTitle: react.MemoExoticComponent<(props: PopoverTitleProps) =>
|
|
6
|
+
declare const PopoverTitle: react.MemoExoticComponent<(props: PopoverTitleProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverTitle };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverTriggerProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverTrigger: react.MemoExoticComponent<({ trigger, disabled, loading, onPress, onLongPress, ...props }: PopoverTriggerProps) =>
|
|
6
|
+
declare const PopoverTrigger: react.MemoExoticComponent<({ trigger, disabled, loading, onPress, onLongPress, ...props }: PopoverTriggerProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverTrigger };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { PopoverProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const PopoverComponent: react.MemoExoticComponent<({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) =>
|
|
6
|
+
declare const PopoverComponent: react.MemoExoticComponent<({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { PopoverComponent };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
2
|
import { TooltipProps } from '../types/popover.types.mjs';
|
|
4
3
|
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
|
-
declare const Tooltip: react.MemoExoticComponent<({ children, content, triggerProps, open: openProp, defaultOpen, onOpenChange, disabled, placement, duration, ...props }: TooltipProps) =>
|
|
6
|
+
declare const Tooltip: react.MemoExoticComponent<({ children, content, triggerProps, open: openProp, defaultOpen, onOpenChange, disabled, placement, duration, ...props }: TooltipProps) => react.JSX.Element>;
|
|
8
7
|
|
|
9
8
|
export { Tooltip };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { RefObject, ComponentRef } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import { PopoverRect } from '../types/popover.types.mjs';
|
|
4
4
|
import '@impulse-ui-native/primitives';
|
|
5
5
|
|
|
6
|
-
declare function usePopoverPosition(hostRef: RefObject<View | null>): {
|
|
6
|
+
declare function usePopoverPosition(hostRef: RefObject<ComponentRef<typeof View> | null>): {
|
|
7
7
|
measurement: {
|
|
8
8
|
anchor: PopoverRect;
|
|
9
9
|
host: PopoverRect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-popover-position.hook.ts"],"sourcesContent":["import type { 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 { PopoverRect } from \"../types/popover.types\";\nimport { AnchorMeasureInterval } from \"../constants/popover.constants\";\nimport { equalRects } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\n\nexport function usePopoverPosition(hostRef: RefObject<View | null
|
|
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 { PopoverRect } from \"../types/popover.types\";\nimport { AnchorMeasureInterval } from \"../constants/popover.constants\";\nimport { equalRects } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\n\nexport function usePopoverPosition(\n hostRef: RefObject<ComponentRef<typeof View> | null>,\n) {\n const { anchorRef } = usePopoverContext();\n const window = useWindowDimensions();\n const insets = useSafeAreaInsets();\n\n const [measurement, setMeasurement] = useState<{\n anchor: PopoverRect;\n host: PopoverRect;\n } | null>(null);\n\n const tokens = useComponentsTokens().popover;\n\n const bounds = useMemo(() => {\n const host = measurement?.host;\n const x = Math.max(host?.x ?? 0, insets.left) + tokens.edgeOffset;\n const y = Math.max(host?.y ?? 0, insets.top) + tokens.edgeOffset;\n const right =\n Math.min(\n host ? host.x + host.width : window.width,\n window.width - insets.right,\n ) - tokens.edgeOffset;\n const bottom =\n Math.min(\n host ? host.y + host.height : window.height,\n window.height - insets.bottom,\n ) - tokens.edgeOffset;\n\n return {\n x,\n y,\n width: Math.max(0, right - x),\n height: Math.max(0, bottom - y),\n };\n }, [\n measurement?.host,\n insets,\n window.width,\n window.height,\n tokens.edgeOffset,\n ]);\n\n useEffect(() => {\n let active = true;\n let measuring = false;\n\n const measure = () => {\n const anchorNode = anchorRef.current;\n const hostNode = hostRef.current;\n\n if (!anchorNode || !hostNode) {\n setMeasurement(null);\n\n return;\n }\n\n if (measuring) {\n return;\n }\n\n measuring = true;\n\n hostNode.measureInWindow((x, y, width, height) => {\n if (!active) {\n return;\n }\n\n const host = { x, y, width, height };\n\n anchorNode.measureInWindow((ax, ay, aw, ah) => {\n measuring = false;\n\n if (\n !active ||\n anchorRef.current !== anchorNode ||\n hostRef.current !== hostNode\n ) {\n return;\n }\n\n const anchor = { x: ax, y: ay, width: aw, height: ah };\n\n setMeasurement((previous) => {\n const sameAnchor = equalRects(previous?.anchor ?? null, anchor);\n const sameHost = equalRects(previous?.host ?? null, host);\n\n if (sameAnchor && sameHost) {\n return previous;\n }\n\n return {\n anchor,\n host: sameHost && previous ? previous.host : host,\n };\n });\n });\n });\n };\n\n measure();\n\n const timer = setInterval(measure, AnchorMeasureInterval);\n\n return () => {\n active = false;\n clearInterval(timer);\n };\n }, [anchorRef, hostRef, window.width, window.height]);\n\n const anchor = measurement?.anchor;\n\n const visible = Boolean(\n anchor &&\n anchor.width > 0 &&\n anchor.height > 0 &&\n bounds.width > 0 &&\n bounds.height > 0 &&\n anchor.x + anchor.width > bounds.x &&\n anchor.x < bounds.x + bounds.width &&\n anchor.y + anchor.height > bounds.y &&\n anchor.y < bounds.y + bounds.height,\n );\n\n return { measurement, bounds, visible };\n}\n"],"mappings":"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","names":["anchor"]}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { PopoverContentProps, PopoverSurfaceResult } from '../types/popover.types.mjs';
|
|
2
|
+
import 'react';
|
|
3
|
+
import 'react-native';
|
|
4
4
|
import '@impulse-ui-native/primitives';
|
|
5
5
|
|
|
6
|
-
declare function usePopoverSurface(onLayout: PopoverContentProps["onLayout"]):
|
|
7
|
-
hostRef: react.RefObject<View | null>;
|
|
8
|
-
styleProps: PopoverSurfaceStyleProps;
|
|
9
|
-
close: () => void;
|
|
10
|
-
handleLayout: (event: LayoutChangeEvent) => void;
|
|
11
|
-
};
|
|
6
|
+
declare function usePopoverSurface(onLayout: PopoverContentProps["onLayout"]): PopoverSurfaceResult;
|
|
12
7
|
|
|
13
8
|
export { usePopoverSurface };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-popover-surface.hook.ts"],"sourcesContent":["import type { LayoutChangeEvent, View } from \"react-native\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { useBackHandler, useEventCallback } from \"@impulse-ui-native/core\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type {
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-popover-surface.hook.ts"],"sourcesContent":["import type { ComponentRef } from \"react\";\nimport type { LayoutChangeEvent, View } from \"react-native\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { useBackHandler, useEventCallback } from \"@impulse-ui-native/core\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type {\n PopoverSurfaceResult,\n PopoverSurfaceStyleProps,\n} from \"../types/popover.types\";\nimport { getPopoverPosition } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\nimport { usePopoverPosition } from \"./use-popover-position.hook\";\n\nexport function usePopoverSurface(\n onLayout: PopoverContentProps[\"onLayout\"],\n): PopoverSurfaceResult {\n const { placement, setOpen } = usePopoverContext();\n\n const [size, setSize] = useState({ width: 0, height: 0 });\n const hostRef = useRef<ComponentRef<typeof View>>(null);\n\n const tokens = useComponentsTokens().popover;\n const { measurement, bounds, visible } = usePopoverPosition(hostRef);\n\n const position = useMemo(\n () =>\n measurement\n ? getPopoverPosition({\n anchor: measurement.anchor,\n bounds,\n ...size,\n placement,\n gap: tokens.gap,\n })\n : null,\n [measurement, bounds, size, placement, tokens.gap],\n );\n\n const ready = visible && size.width > 0 && size.height > 0;\n const styleProps = useMemo<PopoverSurfaceStyleProps>(\n () => ({ bounds, host: measurement?.host, position, ready }),\n [bounds, measurement?.host, position, ready],\n );\n\n const close = useEventCallback(() => setOpen(false));\n\n const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n const { width, height } = event.nativeEvent.layout;\n\n setSize((previous) =>\n previous.width === width && previous.height === height\n ? previous\n : { width, height },\n );\n\n onLayout?.(event);\n });\n\n useBackHandler(() => {\n close();\n\n return true;\n });\n\n return { hostRef, styleProps, close, handleLayout };\n}\n"],"mappings":"AAEA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,2BAA2B;AAOpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,SAAS,kBACd,UACsB;AACtB,QAAM,EAAE,WAAW,QAAQ,IAAI,kBAAkB;AAEjD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AACxD,QAAM,UAAU,OAAkC,IAAI;AAEtD,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,aAAa,QAAQ,QAAQ,IAAI,mBAAmB,OAAO;AAEnE,QAAM,WAAW;AAAA,IACf,MACE,cACI,mBAAmB;AAAA,MACjB,QAAQ,YAAY;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,MACA,KAAK,OAAO;AAAA,IACd,CAAC,IACD;AAAA,IACN,CAAC,aAAa,QAAQ,MAAM,WAAW,OAAO,GAAG;AAAA,EACnD;AAEA,QAAM,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK,SAAS;AACzD,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,QAAQ,MAAM,aAAa,MAAM,UAAU,MAAM;AAAA,IAC1D,CAAC,QAAQ,aAAa,MAAM,UAAU,KAAK;AAAA,EAC7C;AAEA,QAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAEnD,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,UAAM,EAAE,OAAO,OAAO,IAAI,MAAM,YAAY;AAE5C;AAAA,MAAQ,CAAC,aACP,SAAS,UAAU,SAAS,SAAS,WAAW,SAC5C,WACA,EAAE,OAAO,OAAO;AAAA,IACtB;AAEA,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,iBAAe,MAAM;AACnB,UAAM;AAEN,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,SAAS,YAAY,OAAO,aAAa;AACpD;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export { Popover } from './components/index.mjs';
|
|
2
2
|
export { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps } from './types/popover.types.mjs';
|
|
3
3
|
export { Tooltip } from './components/tooltip.mjs';
|
|
4
|
-
import 'react/jsx-runtime';
|
|
5
4
|
import 'react';
|
|
6
5
|
import 'react-native';
|
|
7
6
|
import '@impulse-ui-native/primitives';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PropsWithChildren, ReactNode, RefObject } from 'react';
|
|
1
|
+
import { PropsWithChildren, ReactNode, RefObject, ComponentRef } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
import { PressableCoreProps, ViewProps, TextProps } from '@impulse-ui-native/primitives';
|
|
4
4
|
|
|
@@ -39,7 +39,7 @@ interface PopoverContextValue {
|
|
|
39
39
|
open: boolean;
|
|
40
40
|
disabled: boolean;
|
|
41
41
|
setOpen: (open: boolean) => void;
|
|
42
|
-
anchorRef: RefObject<View | null>;
|
|
42
|
+
anchorRef: RefObject<ComponentRef<typeof View> | null>;
|
|
43
43
|
placement: PopoverPlacement;
|
|
44
44
|
portalName?: string;
|
|
45
45
|
}
|
|
@@ -68,5 +68,11 @@ interface PopoverSurfaceStyleProps {
|
|
|
68
68
|
position: PopoverPosition | null;
|
|
69
69
|
ready: boolean;
|
|
70
70
|
}
|
|
71
|
+
interface PopoverSurfaceResult {
|
|
72
|
+
hostRef: RefObject<ComponentRef<typeof View> | null>;
|
|
73
|
+
styleProps: PopoverSurfaceStyleProps;
|
|
74
|
+
close: () => void;
|
|
75
|
+
handleLayout: NonNullable<PopoverContentProps["onLayout"]>;
|
|
76
|
+
}
|
|
71
77
|
|
|
72
|
-
export type { PopoverCloseProps, PopoverContentProps, PopoverContextValue, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverProps, PopoverRect, PopoverRootProps, PopoverSurfaceStyleProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps };
|
|
78
|
+
export type { PopoverCloseProps, PopoverContentProps, PopoverContextValue, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverProps, PopoverRect, PopoverRootProps, PopoverSurfaceResult, PopoverSurfaceStyleProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/popover",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"description": "Portal-rendered tooltips and compound anchored popovers for ImpulseUI Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -27,23 +27,23 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/core": "
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
30
|
+
"@impulse-ui-native/core": "10.0.0",
|
|
31
|
+
"@impulse-ui-native/portal": "10.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "10.0.0",
|
|
33
|
+
"@impulse-ui-native/theme": "10.0.0",
|
|
34
|
+
"@impulse-ui-native/primitives": "10.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@types/react": "~19.
|
|
37
|
+
"@types/react": "~19.3.0",
|
|
38
38
|
"eslint": "^9.38.0",
|
|
39
39
|
"prettier": "^3.6.2",
|
|
40
|
-
"react": "19.
|
|
41
|
-
"react-native": "0.
|
|
42
|
-
"react-native-safe-area-context": "~5.
|
|
40
|
+
"react": "19.3.0",
|
|
41
|
+
"react-native": "0.88.0",
|
|
42
|
+
"react-native-safe-area-context": "~5.10.1",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
44
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
45
|
-
"@impulse-ui-native/
|
|
46
|
-
"@impulse-ui-native/
|
|
45
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
46
|
+
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": ">=18",
|