@tipp/ui 0.1.21 → 0.1.22

package/dist/molecules/index.js

@@ -6,13 +6,12 @@ import {
 import "../chunk-PBPRWY2V.js";
 import "../chunk-NDUKDKGB.js";
 import "../chunk-BSTJBBEX.js";
-import "../chunk-FFC2C2ID.js";
+import "../chunk-MASTHXWN.js";
 import "../chunk-IIBITN2G.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
-import "../chunk-ACVANQJ4.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
 import "../chunk-355MU6BH.js";
@@ -36,16 +35,16 @@ import "../chunk-O3DNDMV3.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-XQOZWYUA.js";
-import "../chunk-OCJNQGHN.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-P6B2PNYI.js";
 import "../chunk-YTZSKMX3.js";
+import "../chunk-4IKPNQV5.js";
+import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
 import "../chunk-CNQ7RNNY.js";
 import "../chunk-O3XTRD7R.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-4Y5BEXVN.js";
 import "../chunk-RET725VL.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-FYEASFUU.js";
@@ -53,12 +52,14 @@ import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
 import "../chunk-JEHDCZQU.js";
 import "../chunk-OHMOP5PV.js";
+import "../chunk-OCJNQGHN.js";
 import "../chunk-MMAV5BRZ.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-CZEGRZBK.js";
 import "../chunk-ALOPZ54P.js";
 import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
 import "../chunk-N552FDTV.js";
 export {
   ExpandTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/ellipsis-tooltip.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from './tooltip';
+import { Typo, type TypoProps } from './typo';
+
+export type EllipsisTooltipProps = TypoProps & {
+  lineClamp?: number;
+  children?: string;
+};
+
+export function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {
+  const { children, style, lineClamp = 2, ...rest } = props;
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(
+    'none'
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      const typo = ref.current;
+      const mouseOver = (): void => {
+        if (typo.clientHeight < typo.scrollHeight) {
+          setTooltipDisplay('block');
+        }
+      };
+
+      const mouseOut = (): void => {
+        setTooltipDisplay('none');
+      };
+
+      ref.current.addEventListener('mouseenter', mouseOver);
+      ref.current.addEventListener('mouseleave', mouseOut);
+    }
+  }, [children]);
+
+  return (
+    <Tooltip content={children} style={{ display: tooltipDisplay }}>
+      <Typo
+        {...rest}
+        ref={ref}
+        style={{
+          width: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          WebkitLineClamp: lineClamp,
+
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          ...style,
+        }}
+      >
+        {children}
+      </Typo>
+    </Tooltip>
+  );
+}

package/src/atoms/index.ts

@@ -49,3 +49,5 @@ export * from './collapse';
 export * from './spinner';
 export * from './pagination';
 export * from './field-error-wrapper';
+
+export * from './ellipsis-tooltip';