@carto/ps-react-ui 4.17.1 → 4.17.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.
- package/dist/components.js +1 -1
- package/dist/legend.js +301 -251
- package/dist/legend.js.map +1 -1
- package/dist/smart-tooltip-DFV6GD8R.js +40 -0
- package/dist/smart-tooltip-DFV6GD8R.js.map +1 -0
- package/dist/types/legend/components/legend-group/styles.d.ts +17 -0
- package/dist/types/legend/components/legend-row/styles.d.ts +17 -0
- package/dist/widgets/wrapper.js +1 -1
- package/dist/widgets-v2.js +1 -1
- package/package.json +1 -1
- package/src/components/smart-tooltip/smart-tooltip.tsx +25 -10
- package/src/legend/components/legend-group/legend-group.tsx +3 -1
- package/src/legend/components/legend-group/styles.ts +22 -0
- package/src/legend/components/legend-row/legend-row.tsx +3 -1
- package/src/legend/components/legend-row/styles.ts +25 -1
- package/dist/smart-tooltip-D4vwQpFf.js +0 -37
- package/dist/smart-tooltip-D4vwQpFf.js.map +0 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { c as z } from "react/compiler-runtime";
|
|
3
|
+
import { useRef as I, useState as N, useLayoutEffect as P } from "react";
|
|
4
|
+
import { T as R } from "./tooltip-BDnrRKrp.js";
|
|
5
|
+
const x = [];
|
|
6
|
+
function j(E) {
|
|
7
|
+
const e = z(13), {
|
|
8
|
+
title: g,
|
|
9
|
+
dependencies: a,
|
|
10
|
+
timeout: h,
|
|
11
|
+
TooltipProps: c,
|
|
12
|
+
children: f
|
|
13
|
+
} = E, u = a === void 0 ? x : a, t = h === void 0 ? 500 : h, d = I(null), [S, b] = N(!1);
|
|
14
|
+
let s;
|
|
15
|
+
e[0] !== u ? (s = JSON.stringify(u), e[0] = u, e[1] = s) : s = e[1];
|
|
16
|
+
const m = s;
|
|
17
|
+
let n;
|
|
18
|
+
e[2] !== t ? (n = () => {
|
|
19
|
+
const O = () => {
|
|
20
|
+
const i = d.current;
|
|
21
|
+
i && b(i.scrollWidth > i.clientWidth || i.scrollHeight > i.clientHeight);
|
|
22
|
+
}, w = setTimeout(O, t), v = d.current, T = v && typeof ResizeObserver < "u" ? new ResizeObserver(O) : null;
|
|
23
|
+
return v && T?.observe(v), () => {
|
|
24
|
+
clearTimeout(w), T?.disconnect();
|
|
25
|
+
};
|
|
26
|
+
}, e[2] = t, e[3] = n) : n = e[3];
|
|
27
|
+
let r;
|
|
28
|
+
e[4] !== m || e[5] !== t ? (r = [m, t], e[4] = m, e[5] = t, e[6] = r) : r = e[6], P(n, r);
|
|
29
|
+
const p = S && g;
|
|
30
|
+
let o;
|
|
31
|
+
e[7] !== f ? (o = f({
|
|
32
|
+
ref: d
|
|
33
|
+
}), e[7] = f, e[8] = o) : o = e[8];
|
|
34
|
+
let l;
|
|
35
|
+
return e[9] !== c || e[10] !== p || e[11] !== o ? (l = /* @__PURE__ */ y(R, { title: p, ...c, children: o }), e[9] = c, e[10] = p, e[11] = o, e[12] = l) : l = e[12], l;
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
j as S
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=smart-tooltip-DFV6GD8R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"smart-tooltip-DFV6GD8R.js","sources":["../src/components/smart-tooltip/smart-tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from '@mui/material'\nimport { useLayoutEffect, useRef, useState, type JSX, type Ref } from 'react'\nimport { Tooltip } from '../tooltip/tooltip'\n\nconst EMPTY_DEPENDENCIES: unknown[] = []\n\n/**\n * An intelligent tooltip wrapper that automatically detects text overflow and displays a tooltip only when content is truncated.\n *\n * @remarks\n * Uses a render prop pattern. The child function receives a `ref` that must be attached to the element being monitored for overflow. Use the `dependencies` array to trigger re-evaluation when content or container size changes.\n *\n * @example\n * ```tsx\n * <SmartTooltip title=\"This is a long text that might get truncated\">\n * {({ ref }) => (\n * <Typography ref={ref} noWrap sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n * This is a long text that might get truncated\n * </Typography>\n * )}\n * </SmartTooltip>\n * ```\n */\nexport function SmartTooltip<T extends HTMLElement>({\n title,\n dependencies = EMPTY_DEPENDENCIES,\n timeout = 500,\n TooltipProps,\n children,\n}: {\n title: string | undefined\n dependencies?: unknown[]\n timeout?: number\n children: (props: { ref: Ref<T> }) => JSX.Element\n TooltipProps?: Partial<TooltipProps>\n}) {\n const ref = useRef<T>(null)\n const [isOverflowing, setIsOverflowing] = useState(false)\n // Call sites pass a fresh `dependencies={[…]}` literal each render; key by\n // value so the effect does not churn ResizeObserver on referential churn.\n const dependenciesKey = JSON.stringify(dependencies)\n\n useLayoutEffect(() => {\n const checkOverflow = () => {\n const el = ref.current\n if (!el) return\n setIsOverflowing(\n el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight,\n )\n }\n\n // Initial measure after layout settles (fonts, flex collapse, …).\n const timerId = setTimeout(checkOverflow, timeout)\n // Re-measure when the element is resized (e.g. legend title reflows as\n // hover-faded actions collapse/expand).\n const el = ref.current\n const resizeObserver =\n el && typeof ResizeObserver !== 'undefined'\n ? new ResizeObserver(checkOverflow)\n : null\n if (el) resizeObserver?.observe(el)\n\n return () => {\n clearTimeout(timerId)\n resizeObserver?.disconnect()\n }\n }, [dependenciesKey, timeout])\n\n return (\n <Tooltip title={isOverflowing && title} {...TooltipProps}>\n {children({ ref })}\n </Tooltip>\n )\n}\n"],"names":["EMPTY_DEPENDENCIES","SmartTooltip","t0","$","_c","title","dependencies","t1","timeout","t2","TooltipProps","children","undefined","ref","useRef","isOverflowing","setIsOverflowing","useState","t3","JSON","stringify","dependenciesKey","t4","checkOverflow","el","current","scrollWidth","clientWidth","scrollHeight","clientHeight","timerId","setTimeout","el_0","resizeObserver","ResizeObserver","observe","clearTimeout","disconnect","t5","useLayoutEffect","t6","t7","t8","Tooltip"],"mappings":";;;;AAIA,MAAMA,IAAgC,CAAA;AAmB/B,SAAAC,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAA6C;AAAA,IAAAC,OAAAA;AAAAA,IAAAC,cAAAC;AAAAA,IAAAC,SAAAC;AAAAA,IAAAC,cAAAA;AAAAA,IAAAC,UAAAA;AAAAA,EAAAA,IAAAT,GAElDI,IAAAC,MAAAK,SAAAZ,IAAAO,GACAC,IAAAC,MAAAG,SAAA,MAAAH,GAUAI,IAAYC,EAAU,IAAI,GAC1B,CAAAC,GAAAC,CAAA,IAA0CC,EAAS,EAAK;AAAC,MAAAC;AAAA,EAAAf,SAAAG,KAGjCY,IAAAC,KAAIC,UAAWd,CAAY,GAACH,OAAAG,GAAAH,OAAAe,KAAAA,IAAAf,EAAA,CAAA;AAApD,QAAAkB,IAAwBH;AAA4B,MAAAI;AAAA,EAAAnB,SAAAK,KAEpCc,IAAAA,MAAA;AACd,UAAAC,IAAsBA,MAAA;AACpB,YAAAC,IAAWX,EAAGY;AACd,MAAKD,KACLR,EACEQ,EAAEE,cAAeF,EAAEG,eAAgBH,EAAEI,eAAgBJ,EAAEK,YACzD;AAAA,IAAC,GAIHC,IAAgBC,WAAWR,GAAef,CAAO,GAGjDwB,IAAWnB,EAAGY,SACdQ,IACED,KAAM,OAAOE,iBAAmB,MAAhC,IACQA,eAAeX,CAChB,IAFP;AAGF,WAAIC,KAAIS,GAAcE,QAAUX,CAAE,GAE3B,MAAA;AACLY,mBAAaN,CAAO,GACpBG,GAAcI,WAAAA;AAAAA,IAAc;AAAA,EAC7B,GACFlC,OAAAK,GAAAL,OAAAmB,KAAAA,IAAAnB,EAAA,CAAA;AAAA,MAAAmC;AAAA,EAAAnC,EAAA,CAAA,MAAAkB,KAAAlB,SAAAK,KAAE8B,IAAA,CAACjB,GAAiBb,CAAO,GAACL,OAAAkB,GAAAlB,OAAAK,GAAAL,OAAAmC,KAAAA,IAAAnC,EAAA,CAAA,GAxB7BoC,EAAgBjB,GAwBbgB,CAA0B;AAGX,QAAAE,IAAAzB,KAAAV;AAAsB,MAAAoC;AAAA,EAAAtC,SAAAQ,KACnC8B,IAAA9B,EAAS;AAAA,IAAAE,KAAAA;AAAAA,EAAAA,CAAO,GAACV,OAAAQ,GAAAR,OAAAsC,KAAAA,IAAAtC,EAAA,CAAA;AAAA,MAAAuC;AAAA,SAAAvC,EAAA,CAAA,MAAAO,KAAAP,UAAAqC,KAAArC,EAAA,EAAA,MAAAsC,KADpBC,sBAACC,GAAA,EAAe,OAAAH,GAAsB,GAAM9B,GACzC+B,UAAAA,GACH,GAAUtC,OAAAO,GAAAP,QAAAqC,GAAArC,QAAAsC,GAAAtC,QAAAuC,KAAAA,IAAAvC,EAAA,EAAA,GAFVuC;AAEU;"}
|
|
@@ -26,6 +26,22 @@ export declare const styles: {
|
|
|
26
26
|
'&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *': {
|
|
27
27
|
opacity: number;
|
|
28
28
|
};
|
|
29
|
+
'@media (hover: hover)': {
|
|
30
|
+
'& .PsLegend-groupActions:not(:has(.active))': {
|
|
31
|
+
width: number;
|
|
32
|
+
minWidth: number;
|
|
33
|
+
overflow: "hidden";
|
|
34
|
+
marginInlineStart: ({ spacing }: Theme) => string;
|
|
35
|
+
pointerEvents: "none";
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
'&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions': {
|
|
39
|
+
width: string;
|
|
40
|
+
minWidth: number;
|
|
41
|
+
overflow: "visible";
|
|
42
|
+
marginInlineStart: number;
|
|
43
|
+
pointerEvents: "auto";
|
|
44
|
+
};
|
|
29
45
|
'& .PsLegend-dragHandle-group > *': {
|
|
30
46
|
opacity: number;
|
|
31
47
|
transition: ({ transitions }: Theme) => string;
|
|
@@ -72,6 +88,7 @@ export declare const styles: {
|
|
|
72
88
|
color: "text.secondary";
|
|
73
89
|
};
|
|
74
90
|
label: {
|
|
91
|
+
flex: number;
|
|
75
92
|
minWidth: number;
|
|
76
93
|
overflow: "hidden";
|
|
77
94
|
textOverflow: "ellipsis";
|
|
@@ -21,6 +21,22 @@ export declare const styles: {
|
|
|
21
21
|
'&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *': {
|
|
22
22
|
opacity: number;
|
|
23
23
|
};
|
|
24
|
+
'@media (hover: hover)': {
|
|
25
|
+
'& .PsLegend-rowActions:not(:has(.active))': {
|
|
26
|
+
width: number;
|
|
27
|
+
minWidth: number;
|
|
28
|
+
overflow: "hidden";
|
|
29
|
+
marginInlineStart: ({ spacing }: Theme) => string;
|
|
30
|
+
pointerEvents: "none";
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
'&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions': {
|
|
34
|
+
width: string;
|
|
35
|
+
minWidth: number;
|
|
36
|
+
overflow: "visible";
|
|
37
|
+
marginInlineStart: number;
|
|
38
|
+
pointerEvents: "auto";
|
|
39
|
+
};
|
|
24
40
|
'&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
|
|
25
41
|
opacity: number;
|
|
26
42
|
};
|
|
@@ -70,6 +86,7 @@ export declare const styles: {
|
|
|
70
86
|
gap: number;
|
|
71
87
|
};
|
|
72
88
|
title: {
|
|
89
|
+
flex: number;
|
|
73
90
|
minWidth: number;
|
|
74
91
|
overflow: "hidden";
|
|
75
92
|
textOverflow: "ellipsis";
|
package/dist/widgets/wrapper.js
CHANGED
|
@@ -5,7 +5,7 @@ import { MoreVert as D } from "@mui/icons-material";
|
|
|
5
5
|
import { useState as H, useLayoutEffect as G } from "react";
|
|
6
6
|
import "../lasso-tool-YLFRgb-S.js";
|
|
7
7
|
import "../cjs-D4KH3azB.js";
|
|
8
|
-
import { S as U } from "../smart-tooltip-
|
|
8
|
+
import { S as U } from "../smart-tooltip-DFV6GD8R.js";
|
|
9
9
|
import "@carto/ps-utils";
|
|
10
10
|
import { u as V } from "../use-widget-selector-DFl2hW0R.js";
|
|
11
11
|
import { w as M } from "../widget-store-Bw5zRUGg.js";
|
package/dist/widgets-v2.js
CHANGED
|
@@ -6,7 +6,7 @@ import { j as we, i as Ee, e as Ce, n as Te, r as ke, q as _e, v as Ie, u as Le,
|
|
|
6
6
|
import "zustand";
|
|
7
7
|
import { Box as W, LinearProgress as We, Typography as Z, AccordionSummary as $e, AccordionDetails as De, Accordion as Fe, AlertTitle as Be, Alert as Oe, Button as Re, IconButton as Me, Divider as Pe, Popper as Ue, Grow as Ne, Paper as je, Link as pe } from "@mui/material";
|
|
8
8
|
import { ExpandMore as ze, Close as He } from "@mui/icons-material";
|
|
9
|
-
import { S as Ve } from "./smart-tooltip-
|
|
9
|
+
import { S as Ve } from "./smart-tooltip-DFV6GD8R.js";
|
|
10
10
|
import { createPortal as Ge } from "react-dom";
|
|
11
11
|
import { WidgetOptions as qe } from "@carto/meridian-ds/custom-icons";
|
|
12
12
|
import "./lasso-tool-YLFRgb-S.js";
|
package/package.json
CHANGED
|
@@ -36,20 +36,35 @@ export function SmartTooltip<T extends HTMLElement>({
|
|
|
36
36
|
}) {
|
|
37
37
|
const ref = useRef<T>(null)
|
|
38
38
|
const [isOverflowing, setIsOverflowing] = useState(false)
|
|
39
|
+
// Call sites pass a fresh `dependencies={[…]}` literal each render; key by
|
|
40
|
+
// value so the effect does not churn ResizeObserver on referential churn.
|
|
41
|
+
const dependenciesKey = JSON.stringify(dependencies)
|
|
39
42
|
|
|
40
43
|
useLayoutEffect(() => {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
const checkOverflow = () => {
|
|
45
|
+
const el = ref.current
|
|
46
|
+
if (!el) return
|
|
47
|
+
setIsOverflowing(
|
|
48
|
+
el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight,
|
|
49
|
+
)
|
|
50
|
+
}
|
|
46
51
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
// Initial measure after layout settles (fonts, flex collapse, …).
|
|
53
|
+
const timerId = setTimeout(checkOverflow, timeout)
|
|
54
|
+
// Re-measure when the element is resized (e.g. legend title reflows as
|
|
55
|
+
// hover-faded actions collapse/expand).
|
|
56
|
+
const el = ref.current
|
|
57
|
+
const resizeObserver =
|
|
58
|
+
el && typeof ResizeObserver !== 'undefined'
|
|
59
|
+
? new ResizeObserver(checkOverflow)
|
|
60
|
+
: null
|
|
61
|
+
if (el) resizeObserver?.observe(el)
|
|
50
62
|
|
|
51
|
-
return () =>
|
|
52
|
-
|
|
63
|
+
return () => {
|
|
64
|
+
clearTimeout(timerId)
|
|
65
|
+
resizeObserver?.disconnect()
|
|
66
|
+
}
|
|
67
|
+
}, [dependenciesKey, timeout])
|
|
53
68
|
|
|
54
69
|
return (
|
|
55
70
|
<Tooltip title={isOverflowing && title} {...TooltipProps}>
|
|
@@ -97,7 +97,9 @@ export function LegendGroup({ groupId, children }: LegendGroupProps) {
|
|
|
97
97
|
/>
|
|
98
98
|
</Box>
|
|
99
99
|
|
|
100
|
-
<Box sx={styles.actions}>
|
|
100
|
+
<Box className='PsLegend-groupActions' sx={styles.actions}>
|
|
101
|
+
{actions}
|
|
102
|
+
</Box>
|
|
101
103
|
</Box>
|
|
102
104
|
|
|
103
105
|
<Collapse in={!group.collapsed}>
|
|
@@ -38,6 +38,27 @@ export const styles = {
|
|
|
38
38
|
'&:hover .PsLegend-groupFade > *, &:focus-within .PsLegend-groupFade > *': {
|
|
39
39
|
opacity: 1,
|
|
40
40
|
},
|
|
41
|
+
// Faded actions don't reserve flex space on fine-pointer devices — the
|
|
42
|
+
// label grows to the trailing edge. Hover/focus-within restores the slot
|
|
43
|
+
// so the label reflows with the buttons; a dirty `.active` child keeps
|
|
44
|
+
// the slot open even outside hover.
|
|
45
|
+
'@media (hover: hover)': {
|
|
46
|
+
'& .PsLegend-groupActions:not(:has(.active))': {
|
|
47
|
+
width: 0,
|
|
48
|
+
minWidth: 0,
|
|
49
|
+
overflow: 'hidden',
|
|
50
|
+
// Cancel the header gap so nothing is left behind the label.
|
|
51
|
+
marginInlineStart: ({ spacing }: Theme) => `calc(-1 * ${spacing(1)})`,
|
|
52
|
+
pointerEvents: 'none',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
'&:hover .PsLegend-groupActions, &:focus-within .PsLegend-groupActions': {
|
|
56
|
+
width: 'auto',
|
|
57
|
+
minWidth: 0,
|
|
58
|
+
overflow: 'visible',
|
|
59
|
+
marginInlineStart: 0,
|
|
60
|
+
pointerEvents: 'auto',
|
|
61
|
+
},
|
|
41
62
|
// Drag handle (Legend.Sortable): absolutely positioned (no reserved flex
|
|
42
63
|
// slot, so it never shifts the title/icon); the button inside fades in
|
|
43
64
|
// on hover/focus and is always visible on touch devices.
|
|
@@ -103,6 +124,7 @@ export const styles = {
|
|
|
103
124
|
color: 'text.secondary',
|
|
104
125
|
},
|
|
105
126
|
label: {
|
|
127
|
+
flex: 1,
|
|
106
128
|
minWidth: 0,
|
|
107
129
|
overflow: 'hidden',
|
|
108
130
|
textOverflow: 'ellipsis',
|
|
@@ -115,7 +115,9 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
|
|
|
115
115
|
)}
|
|
116
116
|
</Box>
|
|
117
117
|
|
|
118
|
-
<Box sx={styles.actions}>
|
|
118
|
+
<Box className='PsLegend-rowActions' sx={styles.actions}>
|
|
119
|
+
{actions}
|
|
120
|
+
</Box>
|
|
119
121
|
</Box>
|
|
120
122
|
|
|
121
123
|
<Collapse in={!effectivelyCollapsed}>
|
|
@@ -16,7 +16,9 @@ export const styles = {
|
|
|
16
16
|
// `.PsLegend-rowFade` are hidden on fine-pointer devices and fade in when
|
|
17
17
|
// the row is hovered or holds focus; a control carrying `.active` (dirty
|
|
18
18
|
// state — hidden layer, open menu, opacity ≠ 1) stays visible. Coarse-
|
|
19
|
-
// pointer (touch) devices always show them. The
|
|
19
|
+
// pointer (touch) devices always show them. The actions slot itself also
|
|
20
|
+
// collapses to zero width while faded (see `PsLegend-rowActions` below)
|
|
21
|
+
// so the title can grow to the trailing edge. The collapse chevron sits
|
|
20
22
|
// outside the fade group and never fades.
|
|
21
23
|
'& .PsLegend-rowFade > *': {
|
|
22
24
|
opacity: 1,
|
|
@@ -35,6 +37,27 @@ export const styles = {
|
|
|
35
37
|
'&:hover .PsLegend-rowFade > *, &:focus-within .PsLegend-rowFade > *': {
|
|
36
38
|
opacity: 1,
|
|
37
39
|
},
|
|
40
|
+
// Faded actions don't reserve flex space on fine-pointer devices — the
|
|
41
|
+
// title grows to the trailing edge. Hover/focus-within restores the slot
|
|
42
|
+
// so the title reflows with the buttons; a dirty `.active` child keeps
|
|
43
|
+
// the slot open even outside hover.
|
|
44
|
+
'@media (hover: hover)': {
|
|
45
|
+
'& .PsLegend-rowActions:not(:has(.active))': {
|
|
46
|
+
width: 0,
|
|
47
|
+
minWidth: 0,
|
|
48
|
+
overflow: 'hidden',
|
|
49
|
+
// Cancel the header gap so nothing is left behind the title.
|
|
50
|
+
marginInlineStart: ({ spacing }: Theme) => `calc(-1 * ${spacing(0.5)})`,
|
|
51
|
+
pointerEvents: 'none',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
'&:hover .PsLegend-rowActions, &:focus-within .PsLegend-rowActions': {
|
|
55
|
+
width: 'auto',
|
|
56
|
+
minWidth: 0,
|
|
57
|
+
overflow: 'visible',
|
|
58
|
+
marginInlineStart: 0,
|
|
59
|
+
pointerEvents: 'auto',
|
|
60
|
+
},
|
|
38
61
|
// Hovering anywhere in the row also reveals the category/icon values
|
|
39
62
|
// (the renderers keep their own list-scoped rule for standalone usage).
|
|
40
63
|
'&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
|
|
@@ -108,6 +131,7 @@ export const styles = {
|
|
|
108
131
|
gap: 0.5,
|
|
109
132
|
},
|
|
110
133
|
title: {
|
|
134
|
+
flex: 1,
|
|
111
135
|
minWidth: 0,
|
|
112
136
|
overflow: 'hidden',
|
|
113
137
|
textOverflow: 'ellipsis',
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { jsx as v } from "react/jsx-runtime";
|
|
2
|
-
import { c as S } from "react/compiler-runtime";
|
|
3
|
-
import { useRef as w, useState as I, useLayoutEffect as O } from "react";
|
|
4
|
-
import { T as P } from "./tooltip-BDnrRKrp.js";
|
|
5
|
-
const x = [];
|
|
6
|
-
function _(p) {
|
|
7
|
-
const t = S(11), {
|
|
8
|
-
title: a,
|
|
9
|
-
dependencies: m,
|
|
10
|
-
timeout: d,
|
|
11
|
-
TooltipProps: l,
|
|
12
|
-
children: c
|
|
13
|
-
} = p, f = m === void 0 ? x : m, e = d === void 0 ? 500 : d, o = w(null), [T, h] = I(!1);
|
|
14
|
-
let r;
|
|
15
|
-
t[0] !== e ? (r = () => {
|
|
16
|
-
const E = setTimeout(() => {
|
|
17
|
-
if (o.current) {
|
|
18
|
-
const g = o.current.scrollWidth > o.current.clientWidth || o.current.scrollHeight > o.current.clientHeight;
|
|
19
|
-
h(g);
|
|
20
|
-
}
|
|
21
|
-
}, e);
|
|
22
|
-
return () => clearTimeout(E);
|
|
23
|
-
}, t[0] = e, t[1] = r) : r = t[1];
|
|
24
|
-
let n;
|
|
25
|
-
t[2] !== f || t[3] !== e ? (n = [f, e], t[2] = f, t[3] = e, t[4] = n) : n = t[4], O(r, n);
|
|
26
|
-
const u = T && a;
|
|
27
|
-
let i;
|
|
28
|
-
t[5] !== c ? (i = c({
|
|
29
|
-
ref: o
|
|
30
|
-
}), t[5] = c, t[6] = i) : i = t[6];
|
|
31
|
-
let s;
|
|
32
|
-
return t[7] !== l || t[8] !== u || t[9] !== i ? (s = /* @__PURE__ */ v(P, { title: u, ...l, children: i }), t[7] = l, t[8] = u, t[9] = i, t[10] = s) : s = t[10], s;
|
|
33
|
-
}
|
|
34
|
-
export {
|
|
35
|
-
_ as S
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=smart-tooltip-D4vwQpFf.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"smart-tooltip-D4vwQpFf.js","sources":["../src/components/smart-tooltip/smart-tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from '@mui/material'\nimport { useLayoutEffect, useRef, useState, type JSX, type Ref } from 'react'\nimport { Tooltip } from '../tooltip/tooltip'\n\nconst EMPTY_DEPENDENCIES: unknown[] = []\n\n/**\n * An intelligent tooltip wrapper that automatically detects text overflow and displays a tooltip only when content is truncated.\n *\n * @remarks\n * Uses a render prop pattern. The child function receives a `ref` that must be attached to the element being monitored for overflow. Use the `dependencies` array to trigger re-evaluation when content or container size changes.\n *\n * @example\n * ```tsx\n * <SmartTooltip title=\"This is a long text that might get truncated\">\n * {({ ref }) => (\n * <Typography ref={ref} noWrap sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n * This is a long text that might get truncated\n * </Typography>\n * )}\n * </SmartTooltip>\n * ```\n */\nexport function SmartTooltip<T extends HTMLElement>({\n title,\n dependencies = EMPTY_DEPENDENCIES,\n timeout = 500,\n TooltipProps,\n children,\n}: {\n title: string | undefined\n dependencies?: unknown[]\n timeout?: number\n children: (props: { ref: Ref<T> }) => JSX.Element\n TooltipProps?: Partial<TooltipProps>\n}) {\n const ref = useRef<T>(null)\n const [isOverflowing, setIsOverflowing] = useState(false)\n\n useLayoutEffect(() => {\n const timerId = setTimeout(() => {\n if (ref.current) {\n const isOverflowing =\n ref.current.scrollWidth > ref.current.clientWidth ||\n ref.current.scrollHeight > ref.current.clientHeight\n\n setIsOverflowing(isOverflowing)\n }\n }, timeout)\n\n return () => clearTimeout(timerId)\n }, [dependencies, timeout])\n\n return (\n <Tooltip title={isOverflowing && title} {...TooltipProps}>\n {children({ ref })}\n </Tooltip>\n )\n}\n"],"names":["EMPTY_DEPENDENCIES","SmartTooltip","t0","$","_c","title","dependencies","t1","timeout","t2","TooltipProps","children","undefined","ref","useRef","isOverflowing","setIsOverflowing","useState","t3","timerId","setTimeout","current","isOverflowing_0","scrollWidth","clientWidth","scrollHeight","clientHeight","clearTimeout","t4","useLayoutEffect","t5","t6","t7","Tooltip"],"mappings":";;;;AAIA,MAAMA,IAAgC,CAAA;AAmB/B,SAAAC,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAA6C;AAAA,IAAAC,OAAAA;AAAAA,IAAAC,cAAAC;AAAAA,IAAAC,SAAAC;AAAAA,IAAAC,cAAAA;AAAAA,IAAAC,UAAAA;AAAAA,EAAAA,IAAAT,GAElDI,IAAAC,MAAAK,SAAAZ,IAAAO,GACAC,IAAAC,MAAAG,SAAA,MAAAH,GAUAI,IAAYC,EAAU,IAAI,GAC1B,CAAAC,GAAAC,CAAA,IAA0CC,EAAS,EAAK;AAAC,MAAAC;AAAA,EAAAf,SAAAK,KAEzCU,IAAAA,MAAA;AACd,UAAAC,IAAgBC,WAAW,MAAA;AACzB,UAAIP,EAAGQ,SAAQ;AACb,cAAAC,IACET,EAAGQ,QAAQE,cAAeV,EAAGQ,QAAQG,eACrCX,EAAGQ,QAAQI,eAAgBZ,EAAGQ,QAAQK;AAExCV,QAAAA,EAAiBD,CAAa;AAAA,MAAC;AAAA,IAChC,GACAP,CAAO;AAAC,WAEJ,MAAMmB,aAAaR,CAAO;AAAA,EAAC,GACnChB,OAAAK,GAAAL,OAAAe,KAAAA,IAAAf,EAAA,CAAA;AAAA,MAAAyB;AAAA,EAAAzB,EAAA,CAAA,MAAAG,KAAAH,SAAAK,KAAEoB,IAAA,CAACtB,GAAcE,CAAO,GAACL,OAAAG,GAAAH,OAAAK,GAAAL,OAAAyB,KAAAA,IAAAzB,EAAA,CAAA,GAZ1B0B,EAAgBX,GAYbU,CAAuB;AAGR,QAAAE,IAAAf,KAAAV;AAAsB,MAAA0B;AAAA,EAAA5B,SAAAQ,KACnCoB,IAAApB,EAAS;AAAA,IAAAE,KAAAA;AAAAA,EAAAA,CAAO,GAACV,OAAAQ,GAAAR,OAAA4B,KAAAA,IAAA5B,EAAA,CAAA;AAAA,MAAA6B;AAAA,SAAA7B,EAAA,CAAA,MAAAO,KAAAP,SAAA2B,KAAA3B,EAAA,CAAA,MAAA4B,KADpBC,sBAACC,GAAA,EAAe,OAAAH,GAAsB,GAAMpB,GACzCqB,UAAAA,GACH,GAAU5B,OAAAO,GAAAP,OAAA2B,GAAA3B,OAAA4B,GAAA5B,QAAA6B,KAAAA,IAAA7B,EAAA,EAAA,GAFV6B;AAEU;"}
|