@dxos/react-ui-text-tooltip 0.8.2-staging.7ac8446 → 0.8.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/lib/browser/index.mjs +27 -25
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +26 -24
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +27 -25
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/TextTooltip.d.ts +6 -8
- package/dist/types/src/components/TextTooltip.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -5
- package/src/components/TextTooltip.tsx +22 -51
|
@@ -1,33 +1,35 @@
|
|
|
1
1
|
// packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx
|
|
2
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
2
3
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
3
|
-
import React, { forwardRef,
|
|
4
|
+
import React, { forwardRef, useCallback, useRef } from "react";
|
|
4
5
|
import { Tooltip } from "@dxos/react-ui";
|
|
5
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
onOpenChange: (nextOpen) => {
|
|
13
|
-
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
6
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
7
|
+
var _effect = _useSignals();
|
|
8
|
+
try {
|
|
9
|
+
const content = useRef(null);
|
|
10
|
+
const ref = useComposedRefs(content, forwardedRef);
|
|
11
|
+
const handleInteract = useCallback((event) => {
|
|
12
|
+
if (onlyWhenTruncating && content.current) {
|
|
14
13
|
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
}
|
|
18
17
|
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
18
|
+
}, [
|
|
19
|
+
onlyWhenTruncating,
|
|
20
|
+
truncateQuery
|
|
21
|
+
]);
|
|
22
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
23
|
+
asChild,
|
|
24
|
+
...props,
|
|
25
|
+
content: text,
|
|
26
|
+
side,
|
|
27
|
+
onInteract: handleInteract,
|
|
28
|
+
ref
|
|
29
|
+
}, children);
|
|
30
|
+
} finally {
|
|
31
|
+
_effect.f();
|
|
32
|
+
}
|
|
31
33
|
});
|
|
32
34
|
export {
|
|
33
35
|
TextTooltip
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TextTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["useComposedRefs", "React", "forwardRef", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from 'react';\n\nimport { Tooltip, type TooltipScopedProps, type TooltipTriggerProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipTriggerProps, 'side'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TooltipScopedProps<TextTooltipProps>>(\n (\n { __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props },\n forwardedRef,\n ) => {\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const handleInteract = useCallback(\n (event: SyntheticEvent) => {\n if (onlyWhenTruncating && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n if (!element || element.scrollWidth <= element.offsetWidth) {\n event.preventDefault();\n }\n }\n },\n [onlyWhenTruncating, truncateQuery],\n );\n return (\n <Tooltip.Trigger asChild={asChild} {...props} content={text} side={side} onInteract={handleInteract} ref={ref}>\n {children}\n </Tooltip.Trigger>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";;AAIA,SAASA,uBAAuB;AAChC,OAAOC,SAELC,YAGAC,aACAC,cACK;AAEP,SAASC,eAAkE;AAYpE,IAAMC,cAAcC,2BACzB,CACE,EAAEC,gBAAgBC,MAAMC,UAAUC,oBAAoBC,UAAU,MAAMC,MAAMC,eAAe,GAAGC,MAAAA,GAC9FC,iBAAAA;;;AAEA,UAAMC,UAAUC,OAAiC,IAAA;AACjD,UAAMC,MAAMC,gBAAgBH,SAASD,YAAAA;AACrC,UAAMK,iBAAiBC,YACrB,CAACC,UAAAA;AACC,UAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,cAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,YAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,gBAAMM,eAAc;QACtB;MACF;IACF,GACA;MAAClB;MAAoBG;KAAc;AAErC,WACE,sBAAA,cAACgB,QAAQC,SAAO;MAACnB;MAAmB,GAAGG;MAAOE,SAASR;MAAMI;MAAYmB,YAAYX;MAAgBF;OAClGT,QAAAA;;;;AAGP,CAAA;",
|
|
6
|
+
"names": ["useComposedRefs", "React", "forwardRef", "useCallback", "useRef", "Tooltip", "TextTooltip", "forwardRef", "__scopeTooltip", "text", "children", "onlyWhenTruncating", "asChild", "side", "truncateQuery", "props", "forwardedRef", "content", "useRef", "ref", "useComposedRefs", "handleInteract", "useCallback", "event", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "preventDefault", "Tooltip", "Trigger", "onInteract"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":5276,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytes":495,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx","kind":"import-statement","original":"./TextTooltip"}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytes":479,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-text-tooltip/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2828},"packages/ui/react-ui-text-tooltip/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["TextTooltip"],"entryPoint":"packages/ui/react-ui-text-tooltip/src/index.ts","inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytesInOutput":1171},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1300}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -31,35 +31,37 @@ __export(node_exports, {
|
|
|
31
31
|
TextTooltip: () => TextTooltip
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(node_exports);
|
|
34
|
+
var import_tracking = require("@preact-signals/safe-react/tracking");
|
|
34
35
|
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
35
36
|
var import_react = __toESM(require("react"));
|
|
36
37
|
var import_react_ui = require("@dxos/react-ui");
|
|
37
|
-
var TextTooltip = /* @__PURE__ */ (0, import_react.forwardRef)(({ text, children, onlyWhenTruncating, asChild = true,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
onOpenChange: (nextOpen) => {
|
|
45
|
-
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
38
|
+
var TextTooltip = /* @__PURE__ */ (0, import_react.forwardRef)(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
39
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
40
|
+
try {
|
|
41
|
+
const content = (0, import_react.useRef)(null);
|
|
42
|
+
const ref = (0, import_react_compose_refs.useComposedRefs)(content, forwardedRef);
|
|
43
|
+
const handleInteract = (0, import_react.useCallback)((event) => {
|
|
44
|
+
if (onlyWhenTruncating && content.current) {
|
|
46
45
|
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
47
|
+
event.preventDefault();
|
|
48
|
+
}
|
|
50
49
|
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
}, [
|
|
51
|
+
onlyWhenTruncating,
|
|
52
|
+
truncateQuery
|
|
53
|
+
]);
|
|
54
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
55
|
+
asChild,
|
|
56
|
+
...props,
|
|
57
|
+
content: text,
|
|
58
|
+
side,
|
|
59
|
+
onInteract: handleInteract,
|
|
60
|
+
ref
|
|
61
|
+
}, children);
|
|
62
|
+
} finally {
|
|
63
|
+
_effect.f();
|
|
64
|
+
}
|
|
63
65
|
});
|
|
64
66
|
// Annotate the CommonJS export names for ESM import in node:
|
|
65
67
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TextTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["TextTooltip", "forwardRef", "text", "children", "onlyWhenTruncating", "asChild", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from 'react';\n\nimport { Tooltip, type TooltipScopedProps, type TooltipTriggerProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipTriggerProps, 'side'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TooltipScopedProps<TextTooltipProps>>(\n (\n { __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props },\n forwardedRef,\n ) => {\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const handleInteract = useCallback(\n (event: SyntheticEvent) => {\n if (onlyWhenTruncating && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n if (!element || element.scrollWidth <= element.offsetWidth) {\n event.preventDefault();\n }\n }\n },\n [onlyWhenTruncating, truncateQuery],\n );\n return (\n <Tooltip.Trigger asChild={asChild} {...props} content={text} side={side} onInteract={handleInteract} ref={ref}>\n {children}\n </Tooltip.Trigger>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,gCAAgC;AAChC,mBAOO;AAEP,sBAA2E;AAYpE,IAAMA,cAAcC,6CACzB,CACE,EAAEC,gBAAgBC,MAAMC,UAAUC,oBAAoBC,UAAU,MAAMC,MAAMC,eAAe,GAAGC,MAAAA,GAC9FC,iBAAAA;;;AAEA,UAAMC,cAAUC,qBAAiC,IAAA;AACjD,UAAMC,UAAMC,2CAAgBH,SAASD,YAAAA;AACrC,UAAMK,qBAAiBC,0BACrB,CAACC,UAAAA;AACC,UAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,cAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,YAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,gBAAMM,eAAc;QACtB;MACF;IACF,GACA;MAAClB;MAAoBG;KAAc;AAErC,WACE,6BAAAgB,QAAA,cAACC,wBAAQC,SAAO;MAACpB;MAAmB,GAAGG;MAAOE,SAASR;MAAMI;MAAYoB,YAAYZ;MAAgBF;OAClGT,QAAAA;;;;AAGP,CAAA;",
|
|
6
|
+
"names": ["TextTooltip", "forwardRef", "__scopeTooltip", "text", "children", "onlyWhenTruncating", "asChild", "side", "truncateQuery", "props", "forwardedRef", "content", "useRef", "ref", "useComposedRefs", "handleInteract", "useCallback", "event", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "preventDefault", "React", "Tooltip", "Trigger", "onInteract"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":5276,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytes":495,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx","kind":"import-statement","original":"./TextTooltip"}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytes":479,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-text-tooltip/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2828},"packages/ui/react-ui-text-tooltip/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["TextTooltip"],"entryPoint":"packages/ui/react-ui-text-tooltip/src/index.ts","inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytesInOutput":1171},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1300}}}
|
|
@@ -1,35 +1,37 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx
|
|
4
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
4
5
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
5
|
-
import React, { forwardRef,
|
|
6
|
+
import React, { forwardRef, useCallback, useRef } from "react";
|
|
6
7
|
import { Tooltip } from "@dxos/react-ui";
|
|
7
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
onOpenChange: (nextOpen) => {
|
|
15
|
-
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
8
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
9
|
+
var _effect = _useSignals();
|
|
10
|
+
try {
|
|
11
|
+
const content = useRef(null);
|
|
12
|
+
const ref = useComposedRefs(content, forwardedRef);
|
|
13
|
+
const handleInteract = useCallback((event) => {
|
|
14
|
+
if (onlyWhenTruncating && content.current) {
|
|
16
15
|
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
}
|
|
20
19
|
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
20
|
+
}, [
|
|
21
|
+
onlyWhenTruncating,
|
|
22
|
+
truncateQuery
|
|
23
|
+
]);
|
|
24
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
25
|
+
asChild,
|
|
26
|
+
...props,
|
|
27
|
+
content: text,
|
|
28
|
+
side,
|
|
29
|
+
onInteract: handleInteract,
|
|
30
|
+
ref
|
|
31
|
+
}, children);
|
|
32
|
+
} finally {
|
|
33
|
+
_effect.f();
|
|
34
|
+
}
|
|
33
35
|
});
|
|
34
36
|
export {
|
|
35
37
|
TextTooltip
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TextTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["useComposedRefs", "React", "forwardRef", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n type SyntheticEvent,\n useCallback,\n useRef,\n} from 'react';\n\nimport { Tooltip, type TooltipScopedProps, type TooltipTriggerProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipTriggerProps, 'side'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TooltipScopedProps<TextTooltipProps>>(\n (\n { __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props },\n forwardedRef,\n ) => {\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const handleInteract = useCallback(\n (event: SyntheticEvent) => {\n if (onlyWhenTruncating && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n if (!element || element.scrollWidth <= element.offsetWidth) {\n event.preventDefault();\n }\n }\n },\n [onlyWhenTruncating, truncateQuery],\n );\n return (\n <Tooltip.Trigger asChild={asChild} {...props} content={text} side={side} onInteract={handleInteract} ref={ref}>\n {children}\n </Tooltip.Trigger>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";;;;AAIA,SAASA,uBAAuB;AAChC,OAAOC,SAELC,YAGAC,aACAC,cACK;AAEP,SAASC,eAAkE;AAYpE,IAAMC,cAAcC,2BACzB,CACE,EAAEC,gBAAgBC,MAAMC,UAAUC,oBAAoBC,UAAU,MAAMC,MAAMC,eAAe,GAAGC,MAAAA,GAC9FC,iBAAAA;;;AAEA,UAAMC,UAAUC,OAAiC,IAAA;AACjD,UAAMC,MAAMC,gBAAgBH,SAASD,YAAAA;AACrC,UAAMK,iBAAiBC,YACrB,CAACC,UAAAA;AACC,UAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,cAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,YAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,gBAAMM,eAAc;QACtB;MACF;IACF,GACA;MAAClB;MAAoBG;KAAc;AAErC,WACE,sBAAA,cAACgB,QAAQC,SAAO;MAACnB;MAAmB,GAAGG;MAAOE,SAASR;MAAMI;MAAYmB,YAAYX;MAAgBF;OAClGT,QAAAA;;;;AAGP,CAAA;",
|
|
6
|
+
"names": ["useComposedRefs", "React", "forwardRef", "useCallback", "useRef", "Tooltip", "TextTooltip", "forwardRef", "__scopeTooltip", "text", "children", "onlyWhenTruncating", "asChild", "side", "truncateQuery", "props", "forwardedRef", "content", "useRef", "ref", "useComposedRefs", "handleInteract", "useCallback", "event", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "preventDefault", "Tooltip", "Trigger", "onInteract"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":5276,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytes":495,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx","kind":"import-statement","original":"./TextTooltip"}],"format":"esm"},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytes":479,"imports":[{"path":"packages/ui/react-ui-text-tooltip/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-text-tooltip/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2830},"packages/ui/react-ui-text-tooltip/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true}],"exports":["TextTooltip"],"entryPoint":"packages/ui/react-ui-text-tooltip/src/index.ts","inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytesInOutput":1171},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1393}}}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
import React, { type ComponentPropsWithoutRef, type
|
|
2
|
-
import { type
|
|
1
|
+
import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type TooltipTriggerProps } from '@dxos/react-ui';
|
|
3
3
|
export type TextTooltipProps = PropsWithChildren<{
|
|
4
4
|
text: string;
|
|
5
5
|
asChild?: boolean;
|
|
6
|
-
portal?: boolean;
|
|
7
|
-
zIndex?: CSSProperties['zIndex'];
|
|
8
6
|
onlyWhenTruncating?: boolean;
|
|
9
7
|
truncateQuery?: string;
|
|
10
|
-
} & Pick<
|
|
8
|
+
} & Pick<TooltipTriggerProps, 'side'> & ComponentPropsWithoutRef<'button'>>;
|
|
11
9
|
export declare const TextTooltip: React.ForwardRefExoticComponent<{
|
|
12
10
|
text: string;
|
|
13
11
|
asChild?: boolean;
|
|
14
|
-
portal?: boolean;
|
|
15
|
-
zIndex?: CSSProperties["zIndex"];
|
|
16
12
|
onlyWhenTruncating?: boolean;
|
|
17
13
|
truncateQuery?: string;
|
|
18
|
-
} & Pick<
|
|
14
|
+
} & Pick<TooltipTriggerProps, "side"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
19
15
|
children?: React.ReactNode | undefined;
|
|
16
|
+
} & {
|
|
17
|
+
__scopeTooltip?: import("@radix-ui/react-context").Scope;
|
|
20
18
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
21
19
|
//# sourceMappingURL=TextTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/TextTooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,
|
|
1
|
+
{"version":3,"file":"TextTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/TextTooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAE7B,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAoC,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE5F,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GACnC,wBAAwB,CAAC,QAAQ,CAAC,CACrC,CAAC;AAEF,eAAO,MAAM,WAAW;UARd,MAAM;cACF,OAAO;yBACI,OAAO;oBACZ,MAAM;;;;;2CA+BzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-text-tooltip",
|
|
3
|
-
"version": "0.8.2
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "An opinionated card component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"src"
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
|
+
"@preact-signals/safe-react": "^0.9.0",
|
|
27
28
|
"@radix-ui/react-compose-refs": "1.1.1"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
@@ -33,15 +34,15 @@
|
|
|
33
34
|
"react": "~18.2.0",
|
|
34
35
|
"react-dom": "~18.2.0",
|
|
35
36
|
"vite": "5.4.7",
|
|
36
|
-
"@dxos/react-ui": "0.8.2
|
|
37
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
37
|
+
"@dxos/react-ui": "0.8.2",
|
|
38
|
+
"@dxos/react-ui-theme": "0.8.2"
|
|
38
39
|
},
|
|
39
40
|
"peerDependencies": {
|
|
40
41
|
"@phosphor-icons/react": "^2.0.5",
|
|
41
42
|
"react": "~18.2.0",
|
|
42
43
|
"react-dom": "~18.2.0",
|
|
43
|
-
"@dxos/react-ui": "0.8.2
|
|
44
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
44
|
+
"@dxos/react-ui": "0.8.2",
|
|
45
|
+
"@dxos/react-ui-theme": "0.8.2"
|
|
45
46
|
},
|
|
46
47
|
"publishConfig": {
|
|
47
48
|
"access": "public"
|
|
@@ -5,78 +5,49 @@
|
|
|
5
5
|
import { useComposedRefs } from '@radix-ui/react-compose-refs';
|
|
6
6
|
import React, {
|
|
7
7
|
type ComponentPropsWithoutRef,
|
|
8
|
-
type CSSProperties,
|
|
9
8
|
forwardRef,
|
|
10
|
-
Fragment,
|
|
11
9
|
type PropsWithChildren,
|
|
10
|
+
type SyntheticEvent,
|
|
11
|
+
useCallback,
|
|
12
12
|
useRef,
|
|
13
|
-
useState,
|
|
14
13
|
} from 'react';
|
|
15
14
|
|
|
16
|
-
import { Tooltip, type
|
|
15
|
+
import { Tooltip, type TooltipScopedProps, type TooltipTriggerProps } from '@dxos/react-ui';
|
|
17
16
|
|
|
18
17
|
export type TextTooltipProps = PropsWithChildren<
|
|
19
18
|
{
|
|
20
19
|
text: string;
|
|
21
20
|
asChild?: boolean;
|
|
22
|
-
portal?: boolean;
|
|
23
|
-
zIndex?: CSSProperties['zIndex'];
|
|
24
21
|
onlyWhenTruncating?: boolean;
|
|
25
22
|
truncateQuery?: string;
|
|
26
|
-
} & Pick<
|
|
23
|
+
} & Pick<TooltipTriggerProps, 'side'> &
|
|
27
24
|
ComponentPropsWithoutRef<'button'>
|
|
28
25
|
>;
|
|
29
26
|
|
|
30
|
-
export const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps
|
|
27
|
+
export const TextTooltip = forwardRef<HTMLButtonElement, TooltipScopedProps<TextTooltipProps>>(
|
|
31
28
|
(
|
|
32
|
-
{
|
|
33
|
-
text,
|
|
34
|
-
children,
|
|
35
|
-
onlyWhenTruncating,
|
|
36
|
-
asChild = true,
|
|
37
|
-
portal = true,
|
|
38
|
-
zIndex = 70,
|
|
39
|
-
sideOffset,
|
|
40
|
-
side,
|
|
41
|
-
truncateQuery,
|
|
42
|
-
...props
|
|
43
|
-
},
|
|
29
|
+
{ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props },
|
|
44
30
|
forwardedRef,
|
|
45
31
|
) => {
|
|
46
|
-
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
47
32
|
const content = useRef<HTMLButtonElement | null>(null);
|
|
48
33
|
const ref = useComposedRefs(content, forwardedRef);
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
: content.current;
|
|
58
|
-
return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
|
|
59
|
-
} else {
|
|
60
|
-
return setOpen(nextOpen);
|
|
34
|
+
const handleInteract = useCallback(
|
|
35
|
+
(event: SyntheticEvent) => {
|
|
36
|
+
if (onlyWhenTruncating && content.current) {
|
|
37
|
+
const element: HTMLElement | null = truncateQuery
|
|
38
|
+
? content.current.querySelector(truncateQuery)
|
|
39
|
+
: content.current;
|
|
40
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
41
|
+
event.preventDefault();
|
|
61
42
|
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
side,
|
|
71
|
-
sideOffset,
|
|
72
|
-
style: { zIndex },
|
|
73
|
-
}}
|
|
74
|
-
>
|
|
75
|
-
{text}
|
|
76
|
-
<Tooltip.Arrow />
|
|
77
|
-
</Tooltip.Content>
|
|
78
|
-
</ContentRoot>
|
|
79
|
-
</Tooltip.Root>
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
[onlyWhenTruncating, truncateQuery],
|
|
46
|
+
);
|
|
47
|
+
return (
|
|
48
|
+
<Tooltip.Trigger asChild={asChild} {...props} content={text} side={side} onInteract={handleInteract} ref={ref}>
|
|
49
|
+
{children}
|
|
50
|
+
</Tooltip.Trigger>
|
|
80
51
|
);
|
|
81
52
|
},
|
|
82
53
|
);
|