@impulse-ui-native/popover 9.1.1 → 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/popover.js +4 -2
- package/dist/components/popover.js.map +1 -1
- package/dist/components/tooltip.d.mts +1 -2
- package/dist/components/tooltip.js +2 -1
- package/dist/components/tooltip.js.map +1 -1
- 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 };
|
|
@@ -22,12 +22,14 @@ const PopoverComponent = memo(function Popover({
|
|
|
22
22
|
...props
|
|
23
23
|
}) {
|
|
24
24
|
const colors = useColors();
|
|
25
|
+
const showHeader = header || title || !hideClose;
|
|
26
|
+
const showTitle = !header && title;
|
|
25
27
|
return /* @__PURE__ */ jsxs(PopoverRoot, { ...props, children: [
|
|
26
28
|
/* @__PURE__ */ jsx(PopoverTrigger, { ...triggerProps, children: trigger }),
|
|
27
29
|
/* @__PURE__ */ jsxs(PopoverContent, { ...contentProps, children: [
|
|
28
|
-
|
|
30
|
+
showHeader ? /* @__PURE__ */ jsxs(PopoverHeader, { children: [
|
|
29
31
|
header,
|
|
30
|
-
|
|
32
|
+
showTitle ? /* @__PURE__ */ jsx(PopoverTitle, { children: title }) : null,
|
|
31
33
|
!hideClose ? /* @__PURE__ */ jsx(PopoverClose, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Icon, { icon: XIcon, size: "small", color: colors.text.tertiary }) }) : null
|
|
32
34
|
] }) : null,
|
|
33
35
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XIcon } from \"@impulse-ui-native/icon/icons/x\";\nimport { useColors } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverProps } from \"../types\";\nimport { PopoverClose } from \"./popover-close\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverFooter } from \"./popover-footer\";\nimport { PopoverHeader } from \"./popover-header\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTitle } from \"./popover-title\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const PopoverComponent = memo(function Popover({\n trigger,\n triggerProps,\n contentProps,\n header,\n title,\n footer,\n hideClose = false,\n children,\n ...props\n}: PopoverProps) {\n const colors = useColors();\n\n return (\n <PopoverRoot {...props}>\n <PopoverTrigger {...triggerProps}>{trigger}</PopoverTrigger>\n <PopoverContent {...contentProps}>\n {
|
|
1
|
+
{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XIcon } from \"@impulse-ui-native/icon/icons/x\";\nimport { useColors } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverProps } from \"../types\";\nimport { PopoverClose } from \"./popover-close\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverFooter } from \"./popover-footer\";\nimport { PopoverHeader } from \"./popover-header\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTitle } from \"./popover-title\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const PopoverComponent = memo(function Popover({\n trigger,\n triggerProps,\n contentProps,\n header,\n title,\n footer,\n hideClose = false,\n children,\n ...props\n}: PopoverProps) {\n const colors = useColors();\n\n const showHeader = header || title || !hideClose;\n const showTitle = !header && title;\n\n return (\n <PopoverRoot {...props}>\n <PopoverTrigger {...triggerProps}>{trigger}</PopoverTrigger>\n <PopoverContent {...contentProps}>\n {showHeader ? (\n <PopoverHeader>\n {header}\n {showTitle ? <PopoverTitle>{title}</PopoverTitle> : null}\n {!hideClose ? (\n <PopoverClose marginLeft=\"auto\">\n <Icon icon={XIcon} size=\"small\" color={colors.text.tertiary} />\n </PopoverClose>\n ) : null}\n </PopoverHeader>\n ) : null}\n {children}\n {footer ? <PopoverFooter>{footer}</PopoverFooter> : null}\n </PopoverContent>\n </PopoverRoot>\n );\n});\n"],"mappings":"AAiCM,cAGI,YAHJ;AAjCN,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAG1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,KAAK,SAAS,QAAQ;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,UAAU,SAAS,CAAC;AACvC,QAAM,YAAY,CAAC,UAAU;AAE7B,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,kBAAgB,GAAG,cAAe,mBAAQ;AAAA,IAC3C,qBAAC,kBAAgB,GAAG,cACjB;AAAA,mBACC,qBAAC,iBACE;AAAA;AAAA,QACA,YAAY,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,QACnD,CAAC,YACA,oBAAC,gBAAa,YAAW,QACvB,8BAAC,QAAK,MAAM,OAAO,MAAK,SAAQ,OAAO,OAAO,KAAK,UAAU,GAC/D,IACE;AAAA,SACN,IACE;AAAA,MACH;AAAA,MACA,SAAS,oBAAC,iBAAe,kBAAO,IAAmB;AAAA,OACtD;AAAA,KACF;AAEJ,CAAC;","names":[]}
|
|
@@ -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 };
|
|
@@ -32,6 +32,7 @@ const Tooltip = memo(function Tooltip2({
|
|
|
32
32
|
const styles = useThemedStyles(themedStyles);
|
|
33
33
|
const dismiss = useEventCallback(() => setOpen(false));
|
|
34
34
|
useTimer({ enabled: open && !disabled, duration, callback: dismiss });
|
|
35
|
+
const isTextContent = typeof content === "string" || typeof content === "number";
|
|
35
36
|
return /* @__PURE__ */ jsxs(
|
|
36
37
|
PopoverRoot,
|
|
37
38
|
{
|
|
@@ -42,7 +43,7 @@ const Tooltip = memo(function Tooltip2({
|
|
|
42
43
|
placement,
|
|
43
44
|
children: [
|
|
44
45
|
/* @__PURE__ */ jsx(PopoverTrigger, { trigger: "longPress", ...triggerProps, children }),
|
|
45
|
-
/* @__PURE__ */ jsx(PopoverContent, { shadow: "sm", style: styles.content, children:
|
|
46
|
+
/* @__PURE__ */ jsx(PopoverContent, { shadow: "sm", style: styles.content, children: isTextContent ? /* @__PURE__ */ jsx(PopoverDescription, { style: styles.description, children: content }) : content })
|
|
46
47
|
]
|
|
47
48
|
}
|
|
48
49
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useControllableState,\n useEventCallback,\n useTimer,\n} from \"@impulse-ui-native/core\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { TooltipProps } from \"../types\";\nimport { TooltipDuration } from \"../constants/popover.constants\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Tooltip = memo(function Tooltip({\n children,\n content,\n triggerProps,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disabled,\n placement = \"top\",\n duration = TooltipDuration,\n ...props\n}: TooltipProps) {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const styles = useThemedStyles(themedStyles);\n\n const dismiss = useEventCallback(() => setOpen(false));\n\n useTimer({ enabled: open && !disabled, duration, callback: dismiss });\n\n return (\n <PopoverRoot\n {...props}\n open={open}\n onOpenChange={setOpen}\n disabled={disabled}\n placement={placement}\n >\n <PopoverTrigger trigger=\"longPress\" {...triggerProps}>\n {children}\n </PopoverTrigger>\n <PopoverContent shadow=\"sm\" style={styles.content}>\n {
|
|
1
|
+
{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useControllableState,\n useEventCallback,\n useTimer,\n} from \"@impulse-ui-native/core\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { TooltipProps } from \"../types\";\nimport { TooltipDuration } from \"../constants/popover.constants\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Tooltip = memo(function Tooltip({\n children,\n content,\n triggerProps,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n disabled,\n placement = \"top\",\n duration = TooltipDuration,\n ...props\n}: TooltipProps) {\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const styles = useThemedStyles(themedStyles);\n\n const dismiss = useEventCallback(() => setOpen(false));\n\n useTimer({ enabled: open && !disabled, duration, callback: dismiss });\n\n const isTextContent =\n typeof content === \"string\" || typeof content === \"number\";\n\n return (\n <PopoverRoot\n {...props}\n open={open}\n onOpenChange={setOpen}\n disabled={disabled}\n placement={placement}\n >\n <PopoverTrigger trigger=\"longPress\" {...triggerProps}>\n {children}\n </PopoverTrigger>\n <PopoverContent shadow=\"sm\" style={styles.content}>\n {isTextContent ? (\n <PopoverDescription style={styles.description}>\n {content}\n </PopoverDescription>\n ) : (\n content\n )}\n </PopoverContent>\n </PopoverRoot>\n );\n});\n\nfunction themedStyles(theme: AppTheme) {\n const tokens = theme.components.popover.tooltip;\n\n return StyleSheet.create({\n content: {\n width: \"auto\",\n backgroundColor: tokens.backgroundColor,\n borderColor: tokens.backgroundColor,\n borderWidth: 0,\n borderRadius: tokens.borderRadius,\n paddingHorizontal: tokens.paddingHorizontal,\n paddingVertical: tokens.paddingVertical,\n },\n description: {\n color: tokens.color,\n },\n });\n}\n"],"mappings":"AA8CI,SAOE,KAPF;AA9CJ,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAGhC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,UAAU,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAErD,WAAS,EAAE,SAAS,QAAQ,CAAC,UAAU,UAAU,UAAU,QAAQ,CAAC;AAEpE,QAAM,gBACJ,OAAO,YAAY,YAAY,OAAO,YAAY;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,kBAAe,SAAQ,aAAa,GAAG,cACrC,UACH;AAAA,QACA,oBAAC,kBAAe,QAAO,MAAK,OAAO,OAAO,SACvC,0BACC,oBAAC,sBAAmB,OAAO,OAAO,aAC/B,mBACH,IAEA,SAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW,QAAQ;AAExC,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,OAAO;AAAA,MACP,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,mBAAmB,OAAO;AAAA,MAC1B,iBAAiB,OAAO;AAAA,IAC1B;AAAA,IACA,aAAa;AAAA,MACX,OAAO,OAAO;AAAA,IAChB;AAAA,EACF,CAAC;AACH;","names":["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":"AAEA,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AAGpC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,SAAS,mBACd,SACA;AACA,QAAM,EAAE,UAAU,IAAI,kBAAkB;AACxC,QAAM,SAAS,oBAAoB;AACnC,QAAM,SAAS,kBAAkB;AAEjC,QAAM,CAAC,aAAa,cAAc,IAAI,SAG5B,IAAI;AAEd,QAAM,SAAS,oBAAoB,EAAE;AAErC,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,OAAO,aAAa;AAC1B,UAAM,IAAI,KAAK,IAAI,MAAM,KAAK,GAAG,OAAO,IAAI,IAAI,OAAO;AACvD,UAAM,IAAI,KAAK,IAAI,MAAM,KAAK,GAAG,OAAO,GAAG,IAAI,OAAO;AACtD,UAAM,QACJ,KAAK;AAAA,MACH,OAAO,KAAK,IAAI,KAAK,QAAQ,OAAO;AAAA,MACpC,OAAO,QAAQ,OAAO;AAAA,IACxB,IAAI,OAAO;AACb,UAAM,SACJ,KAAK;AAAA,MACH,OAAO,KAAK,IAAI,KAAK,SAAS,OAAO;AAAA,MACrC,OAAO,SAAS,OAAO;AAAA,IACzB,IAAI,OAAO;AAEb,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO,KAAK,IAAI,GAAG,QAAQ,CAAC;AAAA,MAC5B,QAAQ,KAAK,IAAI,GAAG,SAAS,CAAC;AAAA,IAChC;AAAA,EACF,GAAG;AAAA,IACD,aAAa;AAAA,IACb;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,SAAS;AACb,QAAI,YAAY;AAEhB,UAAM,UAAU,MAAM;AACpB,YAAM,aAAa,UAAU;AAC7B,YAAM,WAAW,QAAQ;AAEzB,UAAI,CAAC,cAAc,CAAC,UAAU;AAC5B,uBAAe,IAAI;AAEnB;AAAA,MACF;AAEA,UAAI,WAAW;AACb;AAAA,MACF;AAEA,kBAAY;AAEZ,eAAS,gBAAgB,CAAC,GAAG,GAAG,OAAO,WAAW;AAChD,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AAEA,cAAM,OAAO,EAAE,GAAG,GAAG,OAAO,OAAO;AAEnC,mBAAW,gBAAgB,CAAC,IAAI,IAAI,IAAI,OAAO;AAC7C,sBAAY;AAEZ,cACE,CAAC,UACD,UAAU,YAAY,cACtB,QAAQ,YAAY,UACpB;AACA;AAAA,UACF;AAEA,gBAAMA,UAAS,EAAE,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,GAAG;AAErD,yBAAe,CAAC,aAAa;AAC3B,kBAAM,aAAa,WAAW,UAAU,UAAU,MAAMA,OAAM;AAC9D,kBAAM,WAAW,WAAW,UAAU,QAAQ,MAAM,IAAI;AAExD,gBAAI,cAAc,UAAU;AAC1B,qBAAO;AAAA,YACT;AAEA,mBAAO;AAAA,cACL,QAAAA;AAAA,cACA,MAAM,YAAY,WAAW,SAAS,OAAO;AAAA,YAC/C;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAEA,YAAQ;AAER,UAAM,QAAQ,YAAY,SAAS,qBAAqB;AAExD,WAAO,MAAM;AACX,eAAS;AACT,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,OAAO,OAAO,OAAO,MAAM,CAAC;AAEpD,QAAM,SAAS,aAAa;AAE5B,QAAM,UAAU;AAAA,IACd,UACA,OAAO,QAAQ,KACf,OAAO,SAAS,KAChB,OAAO,QAAQ,KACf,OAAO,SAAS,KAChB,OAAO,IAAI,OAAO,QAAQ,OAAO,KACjC,OAAO,IAAI,OAAO,IAAI,OAAO,SAC7B,OAAO,IAAI,OAAO,SAAS,OAAO,KAClC,OAAO,IAAI,OAAO,IAAI,OAAO;AAAA,EAC/B;AAEA,SAAO,EAAE,aAAa,QAAQ,QAAQ;AACxC;","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",
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
"source": "src/index.ts",
|
|
13
13
|
"module": "dist/index.js",
|
|
14
14
|
"types": "dist/index.d.mts",
|
|
15
|
-
"react-native": "
|
|
15
|
+
"react-native": "dist/index.js",
|
|
16
16
|
"exports": {
|
|
17
17
|
".": {
|
|
18
18
|
"types": "./dist/index.d.mts",
|
|
19
|
-
"react-native": "./
|
|
19
|
+
"react-native": "./dist/index.js",
|
|
20
20
|
"import": "./dist/index.js"
|
|
21
21
|
}
|
|
22
22
|
},
|
|
@@ -27,19 +27,19 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/
|
|
31
|
-
"@impulse-ui-native/portal": "
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/theme": "
|
|
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
45
|
"@impulse-ui-native/prettier-config": "1.0.0",
|