[UIK-2976] ellipsis improvements

semcore/base-components/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [16.2.0] - 2025-08-08
+
+### Added
+
+- `useEllipsis` hook.
+- `Hint` component.
+
 ## [16.1.2] - 2025-07-23
 
 ### Changed

semcore/base-components/package.json

@@ -19,6 +19,7 @@
     }
   },
   "dependencies": {
+    "@floating-ui/dom": "1.7.2",
     "@popperjs/core": "2.11.5",
     "classnames": "2.2.6",
     "csstype": "3.1.3",

semcore/base-components/src/components/ellipsis/index.ts

@@ -0,0 +1,12 @@
+import { useEllipsis, isTextOverflowing } from './useEllipsis';
+import type { EllipsisSettings } from './useEllipsis';
+import { useResizeObserver } from './useResizeObserver';
+
+export {
+  useEllipsis,
+  isTextOverflowing,
+  useResizeObserver,
+};
+export type {
+  EllipsisSettings,
+};

semcore/base-components/src/components/ellipsis/useEllipsis.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import { useResizeObserver } from './useResizeObserver';
+
+export type EllipsisSettings = {
+  trim?: 'end' | 'middle';
+  maxLine?: number;
+};
+
+function createMeasurerElement(element: HTMLElement, text?: string) {
+  const styleElement = window.getComputedStyle(element, null);
+  const temporaryElement = document.createElement('temporary-block');
+  temporaryElement.style.display = styleElement.getPropertyValue('display');
+  temporaryElement.style.padding = styleElement.getPropertyValue('padding');
+  temporaryElement.style.position = 'absolute';
+  temporaryElement.style.right = '0%';
+  temporaryElement.style.bottom = '0%';
+  temporaryElement.style.visibility = 'hidden';
+  temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');
+  temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');
+  temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');
+  temporaryElement.style.lineHeight = styleElement.getPropertyValue('line-height');
+  temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
+  temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
+
+  temporaryElement.style.fontFeatureSettings =
+    styleElement.getPropertyValue('font-feature-settings');
+  temporaryElement.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
+
+  temporaryElement.innerHTML = text ?? element.innerHTML;
+  return temporaryElement;
+}
+
+export function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text?: string): boolean {
+  if (!element) return false;
+
+  const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();
+  const measuringElement = createMeasurerElement(element, text);
+  let isOverflowing = false;
+
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = `${currentWidth}px`;
+
+    const width = measuringElement.scrollWidth;
+    const height = measuringElement.getBoundingClientRect().height;
+
+    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
+      isOverflowing = true;
+    }
+  } else {
+    measuringElement.style.whiteSpace = 'nowrap';
+    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
+  }
+
+  document.body.removeChild(measuringElement);
+
+  return isOverflowing;
+}
+
+export function useEllipsis(ref: React.RefObject<HTMLElement>, props: EllipsisSettings | false): boolean {
+  const [isEllipsized, setIsEllipsized] = React.useState(false);
+
+  const maxLine = props === false ? undefined : (props.maxLine ?? 1);
+  const trim = props === false ? undefined : (props.trim ?? 'end');
+
+  React.useEffect(() => {
+    if (!ref.current) return;
+    if (trim === undefined || maxLine === undefined) {
+      setIsEllipsized(false);
+      return;
+    };
+    ref.current.style.setProperty('overflow', 'hidden');
+    ref.current.style.setProperty('text-overflow', 'hidden');
+    ref.current.style.setProperty('white-space', 'pre');
+
+    const isEllipsized = isTextOverflowing(ref.current, maxLine > 1);
+    setIsEllipsized(isEllipsized);
+  }, [ref.current, trim, maxLine]);
+
+  const blockWidth = useResizeObserver(ref, isEllipsized ? undefined : { width: 0 }).width;
+
+  React.useEffect(() => {
+    if (!ref.current || !isEllipsized) return;
+    if (trim === undefined || maxLine === undefined) {
+      return;
+    }
+
+    if (trim === 'end') {
+      ref.current.style.setProperty('text-overflow', 'ellipsis');
+    }
+
+    if (trim === 'middle') {
+      ref.current.style.setProperty('display', 'flex');
+
+      const styleElement = window.getComputedStyle(ref.current);
+      const dateSpan = document.createElement('temporary-block');
+      dateSpan.style.setProperty('font-size', styleElement.getPropertyValue('font-size'));
+      dateSpan.innerHTML = 'a';
+      document.body.appendChild(dateSpan);
+      const symbolWidth = dateSpan.getBoundingClientRect().width;
+      dateSpan.remove();
+
+      const displayedSymbols = Math.round(blockWidth / symbolWidth);
+      const evenDisplayedSymbols = displayedSymbols % 2 === 0 ? displayedSymbols : displayedSymbols - 1;
+
+      const text = ref.current.textContent ?? '';
+
+      const begining = text.substring(0, text.length - evenDisplayedSymbols / 2 - 1);
+      const tail = text.substring(text.length - evenDisplayedSymbols / 2 - 1);
+
+      ref.current.innerHTML = `<span style="overflow: hidden; text-overflow: ellipsis">${begining}</span><span>${tail}</span>`;
+    }
+  }, [ref.current, trim, maxLine, isEllipsized, blockWidth]);
+
+  return isEllipsized;
+}

semcore/ellipsis/src/useResizeObserver.tsx → semcore/base-components/src/components/ellipsis/useResizeObserver.tsx

@@ -31,7 +31,7 @@ export const useResizeObserver = (
         ro.disconnect();
       };
     }
-  }, [hookOverride]);
+  }, [hookOverride, ref.current]);
 
   if (hookOverride) {
     return hookOverride;