@dxos/react-ui-text-tooltip 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446
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 +20 -16
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +19 -15
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +20 -16
- 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 +8 -6
- 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 +51 -22
|
@@ -1,29 +1,33 @@
|
|
|
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, Fragment, useRef, useState } from "react";
|
|
4
4
|
import { Tooltip } from "@dxos/react-ui";
|
|
5
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({
|
|
5
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side, truncateQuery, ...props }, forwardedRef) => {
|
|
6
|
+
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
6
7
|
const content = useRef(null);
|
|
7
8
|
const ref = useComposedRefs(content, forwardedRef);
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const [open, setOpen] = useState(false);
|
|
10
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Root, {
|
|
11
|
+
open,
|
|
12
|
+
onOpenChange: (nextOpen) => {
|
|
13
|
+
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
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);
|
|
13
18
|
}
|
|
14
19
|
}
|
|
15
|
-
},
|
|
16
|
-
onlyWhenTruncating,
|
|
17
|
-
truncateQuery
|
|
18
|
-
]);
|
|
19
|
-
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
20
|
+
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
20
21
|
asChild,
|
|
21
22
|
...props,
|
|
22
|
-
content: text,
|
|
23
|
-
side,
|
|
24
|
-
onInteract: handleInteract,
|
|
25
23
|
ref
|
|
26
|
-
}, children)
|
|
24
|
+
}, children), /* @__PURE__ */ React.createElement(ContentRoot, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
25
|
+
side,
|
|
26
|
+
sideOffset,
|
|
27
|
+
style: {
|
|
28
|
+
zIndex
|
|
29
|
+
}
|
|
30
|
+
}, text, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
|
|
27
31
|
});
|
|
28
32
|
export {
|
|
29
33
|
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 forwardRef,\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 type CSSProperties,\n forwardRef,\n Fragment,\n type PropsWithChildren,\n useRef,\n useState,\n} from 'react';\n\nimport { Tooltip, type TooltipContentProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n portal?: boolean;\n zIndex?: CSSProperties['zIndex'];\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipContentProps, 'side' | 'sideOffset'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(\n (\n {\n text,\n children,\n onlyWhenTruncating,\n asChild = true,\n portal = true,\n zIndex = 70,\n sideOffset,\n side,\n truncateQuery,\n ...props\n },\n forwardedRef,\n ) => {\n const ContentRoot = portal ? Tooltip.Portal : Fragment;\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const [open, setOpen] = useState(false);\n return (\n <Tooltip.Root\n open={open}\n onOpenChange={(nextOpen) => {\n if (onlyWhenTruncating && nextOpen && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n return setOpen(element ? element.scrollWidth > element.offsetWidth : false);\n } else {\n return setOpen(nextOpen);\n }\n }}\n >\n <Tooltip.Trigger asChild={asChild} {...props} ref={ref}>\n {children}\n </Tooltip.Trigger>\n <ContentRoot>\n <Tooltip.Content\n {...{\n side,\n sideOffset,\n style: { zIndex },\n }}\n >\n {text}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </ContentRoot>\n </Tooltip.Root>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";AAIA,SAASA,uBAAuB;AAChC,OAAOC,SAGLC,YACAC,UAEAC,QACAC,gBACK;AAEP,SAASC,eAAyC;AAc3C,IAAMC,cAAcC,2BACzB,CACE,EACEC,MACAC,UACAC,oBACAC,UAAU,MACVC,SAAS,MACTC,SAAS,IACTC,YACAC,MACAC,eACA,GAAGC,MAAAA,GAELC,iBAAAA;AAEA,QAAMC,cAAcP,SAASQ,QAAQC,SAASC;AAC9C,QAAMC,UAAUC,OAAiC,IAAA;AACjD,QAAMC,MAAMC,gBAAgBH,SAASL,YAAAA;AACrC,QAAM,CAACS,MAAMC,OAAAA,IAAWC,SAAS,KAAA;AACjC,SACE,sBAAA,cAACT,QAAQU,MAAI;IACXH;IACAI,cAAc,CAACC,aAAAA;AACb,UAAItB,sBAAsBsB,YAAYT,QAAQU,SAAS;AACrD,cAAMC,UAA8BlB,gBAChCO,QAAQU,QAAQE,cAAcnB,aAAAA,IAC9BO,QAAQU;AACZ,eAAOL,QAAQM,UAAUA,QAAQE,cAAcF,QAAQG,cAAc,KAAA;MACvE,OAAO;AACL,eAAOT,QAAQI,QAAAA;MACjB;IACF;KAEA,sBAAA,cAACZ,QAAQkB,SAAO;IAAC3B;IAAmB,GAAGM;IAAOQ;KAC3ChB,QAAAA,GAEH,sBAAA,cAACU,aAAAA,MACC,sBAAA,cAACC,QAAQmB,SACH;IACFxB;IACAD;IACA0B,OAAO;MAAE3B;IAAO;EAClB,GAECL,MACD,sBAAA,cAACY,QAAQqB,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB,CAAA;",
|
|
6
|
+
"names": ["useComposedRefs", "React", "forwardRef", "Fragment", "useRef", "useState", "Tooltip", "TextTooltip", "forwardRef", "text", "children", "onlyWhenTruncating", "asChild", "portal", "zIndex", "sideOffset", "side", "truncateQuery", "props", "forwardedRef", "ContentRoot", "Tooltip", "Portal", "Fragment", "content", "useRef", "ref", "useComposedRefs", "open", "setOpen", "useState", "Root", "onOpenChange", "nextOpen", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "Trigger", "Content", "style", "Arrow"]
|
|
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":6535,"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":3671},"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":1331},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1460}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -34,28 +34,32 @@ 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)(({
|
|
37
|
+
var TextTooltip = /* @__PURE__ */ (0, import_react.forwardRef)(({ text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side, truncateQuery, ...props }, forwardedRef) => {
|
|
38
|
+
const ContentRoot = portal ? import_react_ui.Tooltip.Portal : import_react.Fragment;
|
|
38
39
|
const content = (0, import_react.useRef)(null);
|
|
39
40
|
const ref = (0, import_react_compose_refs.useComposedRefs)(content, forwardedRef);
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
const [open, setOpen] = (0, import_react.useState)(false);
|
|
42
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Root, {
|
|
43
|
+
open,
|
|
44
|
+
onOpenChange: (nextOpen) => {
|
|
45
|
+
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
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);
|
|
45
50
|
}
|
|
46
51
|
}
|
|
47
|
-
},
|
|
48
|
-
onlyWhenTruncating,
|
|
49
|
-
truncateQuery
|
|
50
|
-
]);
|
|
51
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
52
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Trigger, {
|
|
52
53
|
asChild,
|
|
53
54
|
...props,
|
|
54
|
-
content: text,
|
|
55
|
-
side,
|
|
56
|
-
onInteract: handleInteract,
|
|
57
55
|
ref
|
|
58
|
-
}, children)
|
|
56
|
+
}, children), /* @__PURE__ */ import_react.default.createElement(ContentRoot, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Content, {
|
|
57
|
+
side,
|
|
58
|
+
sideOffset,
|
|
59
|
+
style: {
|
|
60
|
+
zIndex
|
|
61
|
+
}
|
|
62
|
+
}, text, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Tooltip.Arrow, null))));
|
|
59
63
|
});
|
|
60
64
|
// Annotate the CommonJS export names for ESM import in node:
|
|
61
65
|
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 forwardRef,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,gCAAgC;AAChC,
|
|
6
|
-
"names": ["TextTooltip", "forwardRef", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n Fragment,\n type PropsWithChildren,\n useRef,\n useState,\n} from 'react';\n\nimport { Tooltip, type TooltipContentProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n portal?: boolean;\n zIndex?: CSSProperties['zIndex'];\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipContentProps, 'side' | 'sideOffset'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(\n (\n {\n text,\n children,\n onlyWhenTruncating,\n asChild = true,\n portal = true,\n zIndex = 70,\n sideOffset,\n side,\n truncateQuery,\n ...props\n },\n forwardedRef,\n ) => {\n const ContentRoot = portal ? Tooltip.Portal : Fragment;\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const [open, setOpen] = useState(false);\n return (\n <Tooltip.Root\n open={open}\n onOpenChange={(nextOpen) => {\n if (onlyWhenTruncating && nextOpen && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n return setOpen(element ? element.scrollWidth > element.offsetWidth : false);\n } else {\n return setOpen(nextOpen);\n }\n }}\n >\n <Tooltip.Trigger asChild={asChild} {...props} ref={ref}>\n {children}\n </Tooltip.Trigger>\n <ContentRoot>\n <Tooltip.Content\n {...{\n side,\n sideOffset,\n style: { zIndex },\n }}\n >\n {text}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </ContentRoot>\n </Tooltip.Root>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,gCAAgC;AAChC,mBAQO;AAEP,sBAAkD;AAc3C,IAAMA,cAAcC,6CACzB,CACE,EACEC,MACAC,UACAC,oBACAC,UAAU,MACVC,SAAS,MACTC,SAAS,IACTC,YACAC,MACAC,eACA,GAAGC,MAAAA,GAELC,iBAAAA;AAEA,QAAMC,cAAcP,SAASQ,wBAAQC,SAASC;AAC9C,QAAMC,cAAUC,qBAAiC,IAAA;AACjD,QAAMC,UAAMC,2CAAgBH,SAASL,YAAAA;AACrC,QAAM,CAACS,MAAMC,OAAAA,QAAWC,uBAAS,KAAA;AACjC,SACE,6BAAAC,QAAA,cAACV,wBAAQW,MAAI;IACXJ;IACAK,cAAc,CAACC,aAAAA;AACb,UAAIvB,sBAAsBuB,YAAYV,QAAQW,SAAS;AACrD,cAAMC,UAA8BnB,gBAChCO,QAAQW,QAAQE,cAAcpB,aAAAA,IAC9BO,QAAQW;AACZ,eAAON,QAAQO,UAAUA,QAAQE,cAAcF,QAAQG,cAAc,KAAA;MACvE,OAAO;AACL,eAAOV,QAAQK,QAAAA;MACjB;IACF;KAEA,6BAAAH,QAAA,cAACV,wBAAQmB,SAAO;IAAC5B;IAAmB,GAAGM;IAAOQ;KAC3ChB,QAAAA,GAEH,6BAAAqB,QAAA,cAACX,aAAAA,MACC,6BAAAW,QAAA,cAACV,wBAAQoB,SACH;IACFzB;IACAD;IACA2B,OAAO;MAAE5B;IAAO;EAClB,GAECL,MACD,6BAAAsB,QAAA,cAACV,wBAAQsB,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB,CAAA;",
|
|
6
|
+
"names": ["TextTooltip", "forwardRef", "text", "children", "onlyWhenTruncating", "asChild", "portal", "zIndex", "sideOffset", "side", "truncateQuery", "props", "forwardedRef", "ContentRoot", "Tooltip", "Portal", "Fragment", "content", "useRef", "ref", "useComposedRefs", "open", "setOpen", "useState", "React", "Root", "onOpenChange", "nextOpen", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "Trigger", "Content", "style", "Arrow"]
|
|
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":6535,"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":3671},"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":1331},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1460}}}
|
|
@@ -2,30 +2,34 @@ 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, Fragment, useRef, useState } from "react";
|
|
6
6
|
import { Tooltip } from "@dxos/react-ui";
|
|
7
|
-
var TextTooltip = /* @__PURE__ */ forwardRef(({
|
|
7
|
+
var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side, truncateQuery, ...props }, forwardedRef) => {
|
|
8
|
+
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
8
9
|
const content = useRef(null);
|
|
9
10
|
const ref = useComposedRefs(content, forwardedRef);
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
const [open, setOpen] = useState(false);
|
|
12
|
+
return /* @__PURE__ */ React.createElement(Tooltip.Root, {
|
|
13
|
+
open,
|
|
14
|
+
onOpenChange: (nextOpen) => {
|
|
15
|
+
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
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);
|
|
15
20
|
}
|
|
16
21
|
}
|
|
17
|
-
},
|
|
18
|
-
onlyWhenTruncating,
|
|
19
|
-
truncateQuery
|
|
20
|
-
]);
|
|
21
|
-
return /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
22
|
+
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
22
23
|
asChild,
|
|
23
24
|
...props,
|
|
24
|
-
content: text,
|
|
25
|
-
side,
|
|
26
|
-
onInteract: handleInteract,
|
|
27
25
|
ref
|
|
28
|
-
}, children)
|
|
26
|
+
}, children), /* @__PURE__ */ React.createElement(ContentRoot, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
27
|
+
side,
|
|
28
|
+
sideOffset,
|
|
29
|
+
style: {
|
|
30
|
+
zIndex
|
|
31
|
+
}
|
|
32
|
+
}, text, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
|
|
29
33
|
});
|
|
30
34
|
export {
|
|
31
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 forwardRef,\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 type CSSProperties,\n forwardRef,\n Fragment,\n type PropsWithChildren,\n useRef,\n useState,\n} from 'react';\n\nimport { Tooltip, type TooltipContentProps } from '@dxos/react-ui';\n\nexport type TextTooltipProps = PropsWithChildren<\n {\n text: string;\n asChild?: boolean;\n portal?: boolean;\n zIndex?: CSSProperties['zIndex'];\n onlyWhenTruncating?: boolean;\n truncateQuery?: string;\n } & Pick<TooltipContentProps, 'side' | 'sideOffset'> &\n ComponentPropsWithoutRef<'button'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(\n (\n {\n text,\n children,\n onlyWhenTruncating,\n asChild = true,\n portal = true,\n zIndex = 70,\n sideOffset,\n side,\n truncateQuery,\n ...props\n },\n forwardedRef,\n ) => {\n const ContentRoot = portal ? Tooltip.Portal : Fragment;\n const content = useRef<HTMLButtonElement | null>(null);\n const ref = useComposedRefs(content, forwardedRef);\n const [open, setOpen] = useState(false);\n return (\n <Tooltip.Root\n open={open}\n onOpenChange={(nextOpen) => {\n if (onlyWhenTruncating && nextOpen && content.current) {\n const element: HTMLElement | null = truncateQuery\n ? content.current.querySelector(truncateQuery)\n : content.current;\n return setOpen(element ? element.scrollWidth > element.offsetWidth : false);\n } else {\n return setOpen(nextOpen);\n }\n }}\n >\n <Tooltip.Trigger asChild={asChild} {...props} ref={ref}>\n {children}\n </Tooltip.Trigger>\n <ContentRoot>\n <Tooltip.Content\n {...{\n side,\n sideOffset,\n style: { zIndex },\n }}\n >\n {text}\n <Tooltip.Arrow />\n </Tooltip.Content>\n </ContentRoot>\n </Tooltip.Root>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": ";;;AAIA,SAASA,uBAAuB;AAChC,OAAOC,SAGLC,YACAC,UAEAC,QACAC,gBACK;AAEP,SAASC,eAAyC;AAc3C,IAAMC,cAAcC,2BACzB,CACE,EACEC,MACAC,UACAC,oBACAC,UAAU,MACVC,SAAS,MACTC,SAAS,IACTC,YACAC,MACAC,eACA,GAAGC,MAAAA,GAELC,iBAAAA;AAEA,QAAMC,cAAcP,SAASQ,QAAQC,SAASC;AAC9C,QAAMC,UAAUC,OAAiC,IAAA;AACjD,QAAMC,MAAMC,gBAAgBH,SAASL,YAAAA;AACrC,QAAM,CAACS,MAAMC,OAAAA,IAAWC,SAAS,KAAA;AACjC,SACE,sBAAA,cAACT,QAAQU,MAAI;IACXH;IACAI,cAAc,CAACC,aAAAA;AACb,UAAItB,sBAAsBsB,YAAYT,QAAQU,SAAS;AACrD,cAAMC,UAA8BlB,gBAChCO,QAAQU,QAAQE,cAAcnB,aAAAA,IAC9BO,QAAQU;AACZ,eAAOL,QAAQM,UAAUA,QAAQE,cAAcF,QAAQG,cAAc,KAAA;MACvE,OAAO;AACL,eAAOT,QAAQI,QAAAA;MACjB;IACF;KAEA,sBAAA,cAACZ,QAAQkB,SAAO;IAAC3B;IAAmB,GAAGM;IAAOQ;KAC3ChB,QAAAA,GAEH,sBAAA,cAACU,aAAAA,MACC,sBAAA,cAACC,QAAQmB,SACH;IACFxB;IACAD;IACA0B,OAAO;MAAE3B;IAAO;EAClB,GAECL,MACD,sBAAA,cAACY,QAAQqB,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB,CAAA;",
|
|
6
|
+
"names": ["useComposedRefs", "React", "forwardRef", "Fragment", "useRef", "useState", "Tooltip", "TextTooltip", "forwardRef", "text", "children", "onlyWhenTruncating", "asChild", "portal", "zIndex", "sideOffset", "side", "truncateQuery", "props", "forwardedRef", "ContentRoot", "Tooltip", "Portal", "Fragment", "content", "useRef", "ref", "useComposedRefs", "open", "setOpen", "useState", "Root", "onOpenChange", "nextOpen", "current", "element", "querySelector", "scrollWidth", "offsetWidth", "Trigger", "Content", "style", "Arrow"]
|
|
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":6535,"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":3673},"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":1331},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1553}}}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
|
|
2
|
-
import { type
|
|
1
|
+
import React, { type ComponentPropsWithoutRef, type CSSProperties, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type TooltipContentProps } 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'];
|
|
6
8
|
onlyWhenTruncating?: boolean;
|
|
7
9
|
truncateQuery?: string;
|
|
8
|
-
} & Pick<
|
|
10
|
+
} & Pick<TooltipContentProps, 'side' | 'sideOffset'> & ComponentPropsWithoutRef<'button'>>;
|
|
9
11
|
export declare const TextTooltip: React.ForwardRefExoticComponent<{
|
|
10
12
|
text: string;
|
|
11
13
|
asChild?: boolean;
|
|
14
|
+
portal?: boolean;
|
|
15
|
+
zIndex?: CSSProperties["zIndex"];
|
|
12
16
|
onlyWhenTruncating?: boolean;
|
|
13
17
|
truncateQuery?: string;
|
|
14
|
-
} & Pick<
|
|
18
|
+
} & Pick<TooltipContentProps, "side" | "sideOffset"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
15
19
|
children?: React.ReactNode | undefined;
|
|
16
|
-
} & {
|
|
17
|
-
__scopeTooltip?: import("@radix-ui/react-context").Scope;
|
|
18
20
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
19
21
|
//# 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,EAC7B,KAAK,aAAa,EAGlB,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAW,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAC9C;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,YAAY,CAAC,GAClD,wBAAwB,CAAC,QAAQ,CAAC,CACrC,CAAC;AAEF,eAAO,MAAM,WAAW;UAVd,MAAM;cACF,OAAO;aACR,OAAO;aACP,aAAa,CAAC,QAAQ,CAAC;yBACX,OAAO;oBACZ,MAAM;;;2CAyDzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.7.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-staging.7ac8446",
|
|
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-
|
|
37
|
-
"@dxos/react-ui-theme": "0.8.2-
|
|
36
|
+
"@dxos/react-ui": "0.8.2-staging.7ac8446",
|
|
37
|
+
"@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
|
|
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-
|
|
44
|
-
"@dxos/react-ui-theme": "0.8.2-
|
|
43
|
+
"@dxos/react-ui": "0.8.2-staging.7ac8446",
|
|
44
|
+
"@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
@@ -5,49 +5,78 @@
|
|
|
5
5
|
import { useComposedRefs } from '@radix-ui/react-compose-refs';
|
|
6
6
|
import React, {
|
|
7
7
|
type ComponentPropsWithoutRef,
|
|
8
|
+
type CSSProperties,
|
|
8
9
|
forwardRef,
|
|
10
|
+
Fragment,
|
|
9
11
|
type PropsWithChildren,
|
|
10
|
-
type SyntheticEvent,
|
|
11
|
-
useCallback,
|
|
12
12
|
useRef,
|
|
13
|
+
useState,
|
|
13
14
|
} from 'react';
|
|
14
15
|
|
|
15
|
-
import { Tooltip, type
|
|
16
|
+
import { Tooltip, type TooltipContentProps } from '@dxos/react-ui';
|
|
16
17
|
|
|
17
18
|
export type TextTooltipProps = PropsWithChildren<
|
|
18
19
|
{
|
|
19
20
|
text: string;
|
|
20
21
|
asChild?: boolean;
|
|
22
|
+
portal?: boolean;
|
|
23
|
+
zIndex?: CSSProperties['zIndex'];
|
|
21
24
|
onlyWhenTruncating?: boolean;
|
|
22
25
|
truncateQuery?: string;
|
|
23
|
-
} & Pick<
|
|
26
|
+
} & Pick<TooltipContentProps, 'side' | 'sideOffset'> &
|
|
24
27
|
ComponentPropsWithoutRef<'button'>
|
|
25
28
|
>;
|
|
26
29
|
|
|
27
|
-
export const TextTooltip = forwardRef<HTMLButtonElement,
|
|
30
|
+
export const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(
|
|
28
31
|
(
|
|
29
|
-
{
|
|
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
|
+
},
|
|
30
44
|
forwardedRef,
|
|
31
45
|
) => {
|
|
46
|
+
const ContentRoot = portal ? Tooltip.Portal : Fragment;
|
|
32
47
|
const content = useRef<HTMLButtonElement | null>(null);
|
|
33
48
|
const ref = useComposedRefs(content, forwardedRef);
|
|
34
|
-
const
|
|
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();
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
[onlyWhenTruncating, truncateQuery],
|
|
46
|
-
);
|
|
49
|
+
const [open, setOpen] = useState(false);
|
|
47
50
|
return (
|
|
48
|
-
<Tooltip.
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
+
<Tooltip.Root
|
|
52
|
+
open={open}
|
|
53
|
+
onOpenChange={(nextOpen) => {
|
|
54
|
+
if (onlyWhenTruncating && nextOpen && content.current) {
|
|
55
|
+
const element: HTMLElement | null = truncateQuery
|
|
56
|
+
? content.current.querySelector(truncateQuery)
|
|
57
|
+
: content.current;
|
|
58
|
+
return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
|
|
59
|
+
} else {
|
|
60
|
+
return setOpen(nextOpen);
|
|
61
|
+
}
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
<Tooltip.Trigger asChild={asChild} {...props} ref={ref}>
|
|
65
|
+
{children}
|
|
66
|
+
</Tooltip.Trigger>
|
|
67
|
+
<ContentRoot>
|
|
68
|
+
<Tooltip.Content
|
|
69
|
+
{...{
|
|
70
|
+
side,
|
|
71
|
+
sideOffset,
|
|
72
|
+
style: { zIndex },
|
|
73
|
+
}}
|
|
74
|
+
>
|
|
75
|
+
{text}
|
|
76
|
+
<Tooltip.Arrow />
|
|
77
|
+
</Tooltip.Content>
|
|
78
|
+
</ContentRoot>
|
|
79
|
+
</Tooltip.Root>
|
|
51
80
|
);
|
|
52
81
|
},
|
|
53
82
|
);
|