@dxos/react-ui-text-tooltip 0.6.7 → 0.6.8-main.3be982f

package/dist/lib/browser/index.mjs

@@ -2,7 +2,7 @@
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import React, { forwardRef, Fragment, useRef, useState } from "react";
 import { Tooltip } from "@dxos/react-ui";
-var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side }, forwardedRef) => {
+var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side, truncateQuery, ...props }, forwardedRef) => {
   const ContentRoot = portal ? Tooltip.Portal : Fragment;
   const content = useRef(null);
   const ref = useComposedRefs(content, forwardedRef);
@@ -11,13 +11,15 @@ var TextTooltip = /* @__PURE__ */ forwardRef(({ text, children, onlyWhenTruncati
     open,
     onOpenChange: (nextOpen) => {
       if (onlyWhenTruncating && nextOpen && content.current) {
-        return setOpen(content.current.scrollWidth > content.current.offsetWidth);
+        const element = truncateQuery ? content.current.querySelector(truncateQuery) : content.current;
+        return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
       } else {
         return setOpen(nextOpen);
       }
     }
   }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild,
+    ...props,
     ref
   }, children), /* @__PURE__ */ React.createElement(ContentRoot, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
     side,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TextTooltip.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport React, { type CSSProperties, forwardRef, Fragment, type PropsWithChildren, useRef, useState } 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  } & Pick<TooltipContentProps, 'side' | 'sideOffset'>\n>;\n\nexport const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(\n  (\n    { text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side },\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            return setOpen(content.current.scrollWidth > content.current.offsetWidth);\n          } else {\n            return setOpen(nextOpen);\n          }\n        }}\n      >\n        <Tooltip.Trigger asChild={asChild} 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"],
-  "mappings": ";AAIA,SAASA,uBAAuB;AAChC,OAAOC,SAA6BC,YAAYC,UAAkCC,QAAQC,gBAAgB;AAE1G,SAASC,eAAyC;AAY3C,IAAMC,cAAcC,2BACzB,CACE,EAAEC,MAAMC,UAAUC,oBAAoBC,UAAU,MAAMC,SAAS,MAAMC,SAAS,IAAIC,YAAYC,KAAI,GAClGC,iBAAAA;AAEA,QAAMC,cAAcL,SAASM,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,UAAIpB,sBAAsBoB,YAAYT,QAAQU,SAAS;AACrD,eAAOL,QAAQL,QAAQU,QAAQC,cAAcX,QAAQU,QAAQE,WAAW;MAC1E,OAAO;AACL,eAAOP,QAAQI,QAAAA;MACjB;IACF;KAEA,sBAAA,cAACZ,QAAQgB,SAAO;IAACvB;IAAkBY;KAChCd,QAAAA,GAEH,sBAAA,cAACQ,aAAAA,MACC,sBAAA,cAACC,QAAQiB,SACH;IACFpB;IACAD;IACAsB,OAAO;MAAEvB;IAAO;EAClB,GAECL,MACD,sBAAA,cAACU,QAAQmB,OAAK,IAAA,CAAA,CAAA,CAAA;AAKxB,CAAA;",
-  "names": ["useComposedRefs", "React", "forwardRef", "Fragment", "useRef", "useState", "Tooltip", "TextTooltip", "forwardRef", "text", "children", "onlyWhenTruncating", "asChild", "portal", "zIndex", "sideOffset", "side", "forwardedRef", "ContentRoot", "Tooltip", "Portal", "Fragment", "content", "useRef", "ref", "useComposedRefs", "open", "setOpen", "useState", "Root", "onOpenChange", "nextOpen", "current", "scrollWidth", "offsetWidth", "Trigger", "Content", "style", "Arrow"]
+  "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"],
+  "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;",
+  "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"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-text-tooltip/src/components/TextTooltip.tsx":{"bytes":5642,"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":3132},"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":1186},"packages/ui/react-ui-text-tooltip/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-text-tooltip/src/index.ts":{"bytesInOutput":0}},"bytes":1315}}}
+{"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/types/src/components/TextTooltip.d.ts

@@ -1,4 +1,4 @@
-import React, { type CSSProperties, type PropsWithChildren } from 'react';
+import React, { type ComponentPropsWithoutRef, type CSSProperties, type PropsWithChildren } from 'react';
 import { type TooltipContentProps } from '@dxos/react-ui';
 export type TextTooltipProps = PropsWithChildren<{
     text: string;
@@ -6,14 +6,16 @@ export type TextTooltipProps = PropsWithChildren<{
     portal?: boolean;
     zIndex?: CSSProperties['zIndex'];
     onlyWhenTruncating?: boolean;
-} & Pick<TooltipContentProps, 'side' | 'sideOffset'>>;
+    truncateQuery?: string;
+} & Pick<TooltipContentProps, 'side' | 'sideOffset'> & ComponentPropsWithoutRef<'button'>>;
 export declare const TextTooltip: React.ForwardRefExoticComponent<{
     text: string;
-    asChild?: boolean | undefined;
-    portal?: boolean | undefined;
-    zIndex?: CSSProperties['zIndex'];
-    onlyWhenTruncating?: boolean | undefined;
-} & Pick<TooltipContentProps, "side" | "sideOffset"> & {
-    children?: React.ReactNode;
+    asChild?: boolean;
+    portal?: boolean;
+    zIndex?: CSSProperties["zIndex"];
+    onlyWhenTruncating?: boolean;
+    truncateQuery?: string;
+} & Pick<TooltipContentProps, "side" | "sideOffset"> & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=TextTooltip.d.ts.map

package/dist/types/src/components/TextTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/TextTooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAwB,KAAK,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAElH,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;CAC9B,GAAG,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,YAAY,CAAC,CACrD,CAAC;AAEF,eAAO,MAAM,WAAW;UARd,MAAM;;;aAGH,aAAa,CAAC,QAAQ,CAAC;;;;2CA2CnC,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-text-tooltip",
-  "version": "0.6.7",
+  "version": "0.6.8-main.3be982f",
   "description": "An opinionated card component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -22,13 +22,13 @@
   ],
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.0.0",
-    "@dxos/react-ui": "0.6.7",
-    "@dxos/react-ui-theme": "0.6.7"
+    "@dxos/react-ui": "0.6.8-main.3be982f",
+    "@dxos/react-ui-theme": "0.6.8-main.3be982f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4"

package/src/components/TextTooltip.tsx

@@ -3,7 +3,15 @@
 //
 
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import React, { type CSSProperties, forwardRef, Fragment, type PropsWithChildren, useRef, useState } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  forwardRef,
+  Fragment,
+  type PropsWithChildren,
+  useRef,
+  useState,
+} from 'react';
 
 import { Tooltip, type TooltipContentProps } from '@dxos/react-ui';
 
@@ -14,12 +22,25 @@ export type TextTooltipProps = PropsWithChildren<
     portal?: boolean;
     zIndex?: CSSProperties['zIndex'];
     onlyWhenTruncating?: boolean;
-  } & Pick<TooltipContentProps, 'side' | 'sideOffset'>
+    truncateQuery?: string;
+  } & Pick<TooltipContentProps, 'side' | 'sideOffset'> &
+    ComponentPropsWithoutRef<'button'>
 >;
 
 export const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(
   (
-    { text, children, onlyWhenTruncating, asChild = true, portal = true, zIndex = 70, sideOffset, side },
+    {
+      text,
+      children,
+      onlyWhenTruncating,
+      asChild = true,
+      portal = true,
+      zIndex = 70,
+      sideOffset,
+      side,
+      truncateQuery,
+      ...props
+    },
     forwardedRef,
   ) => {
     const ContentRoot = portal ? Tooltip.Portal : Fragment;
@@ -31,13 +52,16 @@ export const TextTooltip = forwardRef<HTMLButtonElement, TextTooltipProps>(
         open={open}
         onOpenChange={(nextOpen) => {
           if (onlyWhenTruncating && nextOpen && content.current) {
-            return setOpen(content.current.scrollWidth > content.current.offsetWidth);
+            const element: HTMLElement | null = truncateQuery
+              ? content.current.querySelector(truncateQuery)
+              : content.current;
+            return setOpen(element ? element.scrollWidth > element.offsetWidth : false);
           } else {
             return setOpen(nextOpen);
           }
         }}
       >
-        <Tooltip.Trigger asChild={asChild} ref={ref}>
+        <Tooltip.Trigger asChild={asChild} {...props} ref={ref}>
           {children}
         </Tooltip.Trigger>
         <ContentRoot>