@impulse-ui-native/popover 9.0.0 → 9.1.2
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.
|
@@ -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":[]}
|
|
@@ -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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/popover",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.1.2",
|
|
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,11 +27,11 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/
|
|
31
|
-
"@impulse-ui-native/
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
30
|
+
"@impulse-ui-native/core": "9.1.2",
|
|
31
|
+
"@impulse-ui-native/primitives": "9.1.2",
|
|
32
|
+
"@impulse-ui-native/portal": "9.1.2",
|
|
33
|
+
"@impulse-ui-native/icon": "9.1.2",
|
|
34
|
+
"@impulse-ui-native/theme": "9.1.2"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~19.2.14",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"react-native": "0.86.2",
|
|
42
42
|
"react-native-safe-area-context": "~5.7.0",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
|
-
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
45
44
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
45
|
+
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
46
46
|
"@impulse-ui-native/prettier-config": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|