@dxos/react-ui-text-tooltip 0.8.2-main.12df754 → 0.8.2-main.30e4dbb
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 +16 -20
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +15 -19
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +16 -20
- 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 +5 -5
- package/src/components/TextTooltip.tsx +22 -51
|
@@ -1,33 +1,29 @@
|
|
|
1
1
|
// packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx
|
|
2
2
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
3
|
-
import React, { forwardRef,
|
|
3
|
+
import React, { forwardRef, useCallback, useRef } from "react";
|
|
4
4
|
import { Tooltip } from "@dxos/react-ui";
|
|
5
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true,
|
|
6
|
-
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
5
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
7
6
|
const content = useRef(null);
|
|
8
7
|
const ref = useComposedRefs(content, forwardedRef);
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
15
|
-
return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
|
|
16
|
-
} else {
|
|
17
|
-
return setOpen(nextOpen);
|
|
8
|
+
const handleInteract = useCallback((event) => {
|
|
9
|
+
if (onlyWhenTruncating && content.current) {
|
|
10
|
+
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
11
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
12
|
+
event.preventDefault();
|
|
18
13
|
}
|
|
19
14
|
}
|
|
20
|
-
},
|
|
15
|
+
}, [
|
|
16
|
+
onlyWhenTruncating,
|
|
17
|
+
truncateQuery
|
|
18
|
+
]);
|
|
19
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
21
20
|
asChild,
|
|
22
21
|
...props,
|
|
23
|
-
|
|
24
|
-
}, children), /* @__PURE__ */ React.createElement(ContentRoot, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
22
|
+
content: text,
|
|
25
23
|
side,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
}, text, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
|
|
24
|
+
onInteract: handleInteract,
|
|
25
|
+
ref
|
|
26
|
+
}, children);
|
|
31
27
|
});
|
|
32
28
|
export {
|
|
33
29
|
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": ";AAIA,SAASA,uBAAuB;AAChC,OAAOC,
|
|
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,QAAMC,UAAUC,OAAiC,IAAA;AACjD,QAAMC,MAAMC,gBAAgBH,SAASD,YAAAA;AACrC,QAAMK,iBAAiBC,YACrB,CAACC,UAAAA;AACC,QAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,YAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,UAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,cAAMM,eAAc;MACtB;IACF;EACF,GACA;IAAClB;IAAoBG;GAAc;AAErC,SACE,sBAAA,cAACgB,QAAQC,SAAO;IAACnB;IAAmB,GAAGG;IAAOE,SAASR;IAAMI;IAAYmB,YAAYX;IAAgBF;KAClGT,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":5078,"imports":[{"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":527,"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":511,"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":2821},"packages/ui/react-ui-text-tooltip/dist/lib/browser/index.mjs":{"imports":[{"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":974},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1103}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -34,32 +34,28 @@ module.exports = __toCommonJS(node_exports);
|
|
|
34
34
|
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
36
|
var import_react_ui = require("@dxos/react-ui");
|
|
37
|
-
var TextTooltip = /* @__PURE__ */ (0, import_react.forwardRef)(({ text, children, onlyWhenTruncating, asChild = true,
|
|
38
|
-
const ContentRoot = portal ? import_react_ui.Tooltip.Portal : import_react.Fragment;
|
|
37
|
+
var TextTooltip = /* @__PURE__ */ (0, import_react.forwardRef)(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
39
38
|
const content = (0, import_react.useRef)(null);
|
|
40
39
|
const ref = (0, import_react_compose_refs.useComposedRefs)(content, forwardedRef);
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
47
|
-
return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
|
|
48
|
-
} else {
|
|
49
|
-
return setOpen(nextOpen);
|
|
40
|
+
const handleInteract = (0, import_react.useCallback)((event) => {
|
|
41
|
+
if (onlyWhenTruncating && content.current) {
|
|
42
|
+
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
43
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
44
|
+
event.preventDefault();
|
|
50
45
|
}
|
|
51
46
|
}
|
|
52
|
-
},
|
|
47
|
+
}, [
|
|
48
|
+
onlyWhenTruncating,
|
|
49
|
+
truncateQuery
|
|
50
|
+
]);
|
|
51
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
53
52
|
asChild,
|
|
54
53
|
...props,
|
|
55
|
-
|
|
56
|
-
}, children), /* @__PURE__ */ import_react.default.createElement(ContentRoot, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Content, {
|
|
54
|
+
content: text,
|
|
57
55
|
side,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
}, text, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Arrow, null))));
|
|
56
|
+
onInteract: handleInteract,
|
|
57
|
+
ref
|
|
58
|
+
}, children);
|
|
63
59
|
});
|
|
64
60
|
// Annotate the CommonJS export names for ESM import in node:
|
|
65
61
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,gCAAgC;AAChC,
|
|
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,QAAMC,cAAUC,qBAAiC,IAAA;AACjD,QAAMC,UAAMC,2CAAgBH,SAASD,YAAAA;AACrC,QAAMK,qBAAiBC,0BACrB,CAACC,UAAAA;AACC,QAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,YAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,UAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,cAAMM,eAAc;MACtB;IACF;EACF,GACA;IAAClB;IAAoBG;GAAc;AAErC,SACE,6BAAAgB,QAAA,cAACC,wBAAQC,SAAO;IAACpB;IAAmB,GAAGG;IAAOE,SAASR;IAAMI;IAAYoB,YAAYZ;IAAgBF;KAClGT,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":5078,"imports":[{"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":527,"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":511,"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":2821},"packages/ui/react-ui-text-tooltip/dist/lib/node/index.cjs":{"imports":[{"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":974},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1103}}}
|
|
@@ -2,34 +2,30 @@ import { createRequire } from 'node:module';const require = createRequire(import
|
|
|
2
2
|
|
|
3
3
|
// packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx
|
|
4
4
|
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
5
|
-
import React, { forwardRef,
|
|
5
|
+
import React, { forwardRef, useCallback, useRef } from "react";
|
|
6
6
|
import { Tooltip } from "@dxos/react-ui";
|
|
7
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true,
|
|
8
|
-
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
7
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ __scopeTooltip, text, children, onlyWhenTruncating, asChild = true, side, truncateQuery, ...props }, forwardedRef) => {
|
|
9
8
|
const content = useRef(null);
|
|
10
9
|
const ref = useComposedRefs(content, forwardedRef);
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
17
|
-
return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
|
|
18
|
-
} else {
|
|
19
|
-
return setOpen(nextOpen);
|
|
10
|
+
const handleInteract = useCallback((event) => {
|
|
11
|
+
if (onlyWhenTruncating && content.current) {
|
|
12
|
+
const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
|
|
13
|
+
if (!element || element.scrollWidth <= element.offsetWidth) {
|
|
14
|
+
event.preventDefault();
|
|
20
15
|
}
|
|
21
16
|
}
|
|
22
|
-
},
|
|
17
|
+
}, [
|
|
18
|
+
onlyWhenTruncating,
|
|
19
|
+
truncateQuery
|
|
20
|
+
]);
|
|
21
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
23
22
|
asChild,
|
|
24
23
|
...props,
|
|
25
|
-
|
|
26
|
-
}, children), /* @__PURE__ */ React.createElement(ContentRoot, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
24
|
+
content: text,
|
|
27
25
|
side,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
}, text, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
|
|
26
|
+
onInteract: handleInteract,
|
|
27
|
+
ref
|
|
28
|
+
}, children);
|
|
33
29
|
});
|
|
34
30
|
export {
|
|
35
31
|
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": ";;;AAIA,SAASA,uBAAuB;AAChC,OAAOC,
|
|
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,QAAMC,UAAUC,OAAiC,IAAA;AACjD,QAAMC,MAAMC,gBAAgBH,SAASD,YAAAA;AACrC,QAAMK,iBAAiBC,YACrB,CAACC,UAAAA;AACC,QAAIZ,sBAAsBM,QAAQO,SAAS;AACzC,YAAMC,UAA8BX,gBAChCG,QAAQO,QAAQE,cAAcZ,aAAAA,IAC9BG,QAAQO;AACZ,UAAI,CAACC,WAAWA,QAAQE,eAAeF,QAAQG,aAAa;AAC1DL,cAAMM,eAAc;MACtB;IACF;EACF,GACA;IAAClB;IAAoBG;GAAc;AAErC,SACE,sBAAA,cAACgB,QAAQC,SAAO;IAACnB;IAAmB,GAAGG;IAAOE,SAASR;IAAMI;IAAYmB,YAAYX;IAAgBF;KAClGT,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":5078,"imports":[{"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":527,"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":511,"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":2823},"packages/ui/react-ui-text-tooltip/dist/lib/node-esm/index.mjs":{"imports":[{"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":974},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1196}}}
|
|
@@ -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-main.
|
|
3
|
+
"version": "0.8.2-main.30e4dbb",
|
|
4
4
|
"description": "An opinionated card component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
"react": "~18.2.0",
|
|
34
34
|
"react-dom": "~18.2.0",
|
|
35
35
|
"vite": "5.4.7",
|
|
36
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
37
|
-
"@dxos/react-ui-theme": "0.8.2-main.
|
|
36
|
+
"@dxos/react-ui": "0.8.2-main.30e4dbb",
|
|
37
|
+
"@dxos/react-ui-theme": "0.8.2-main.30e4dbb"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"@phosphor-icons/react": "^2.0.5",
|
|
41
41
|
"react": "~18.2.0",
|
|
42
42
|
"react-dom": "~18.2.0",
|
|
43
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
44
|
-
"@dxos/react-ui
|
|
43
|
+
"@dxos/react-ui-theme": "0.8.2-main.30e4dbb",
|
|
44
|
+
"@dxos/react-ui": "0.8.2-main.30e4dbb"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"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
|
);
|