@universe-platform/ui 0.1.0-beta.17 → 0.1.0-beta.18

package/dist/index.d.mts

@@ -305,9 +305,14 @@ interface RelationFilterPopoverProps {
 }
 declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * checkElementTruncation - Standard browser-accurate truncation detection using the Range API.
+ * Measures the exact unconstrained bounding box of rendered text without container padding interference.
+ */
+declare const checkElementTruncation: (el: HTMLElement | null) => boolean;
 /**
  * useSmartTooltip - Reusable hook for detecting text truncation and rendering
- * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > clientWidth).
+ * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > el.clientWidth).
  */
 declare function useSmartTooltip<T extends HTMLElement = HTMLElement>(): {
     targetRef: react__default.RefObject<T | null>;
@@ -440,4 +445,4 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, checkElementTruncation, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };

package/dist/index.d.ts

@@ -305,9 +305,14 @@ interface RelationFilterPopoverProps {
 }
 declare function RelationFilterPopover({ isOpen, onClose, column, triggerRect, options, filterValue, selectedValues, onSelectionChange, isLoading, }: RelationFilterPopoverProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * checkElementTruncation - Standard browser-accurate truncation detection using the Range API.
+ * Measures the exact unconstrained bounding box of rendered text without container padding interference.
+ */
+declare const checkElementTruncation: (el: HTMLElement | null) => boolean;
 /**
  * useSmartTooltip - Reusable hook for detecting text truncation and rendering
- * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > clientWidth).
+ * a custom portal tooltip bubble strictly when content is clipped (scrollWidth > el.clientWidth).
  */
 declare function useSmartTooltip<T extends HTMLElement = HTMLElement>(): {
     targetRef: react__default.RefObject<T | null>;
@@ -440,4 +445,4 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DatePickerCell, type DeleteRecordPayload, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, type OrgRole, PASTEL_PALETTES, type PastelPalette, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SmartTextCell, type SplitTitleResult, TableBlock, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, calculateMinColumnWidth, checkElementTruncation, cn, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseLinkValue, parseTimeParts, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, useColumnReorder, useColumnResize, useSmartTooltip, useToast };

package/dist/index.js

@@ -81,6 +81,7 @@ __export(src_exports, {
   UNIVERSE_COMPONENTS: () => UNIVERSE_COMPONENTS,
   WhatsAppComponent: () => WhatsAppComponent,
   calculateMinColumnWidth: () => calculateMinColumnWidth,
+  checkElementTruncation: () => checkElementTruncation,
   cn: () => cn,
   extractUniqueVariableIndices: () => extractUniqueVariableIndices,
   extractVariableIndices: () => extractVariableIndices,
@@ -1397,6 +1398,31 @@ var import_lucide_react3 = require("lucide-react");
 var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var checkElementTruncation = (el) => {
+  if (!el) return false;
+  const isInput = el instanceof HTMLInputElement || el.tagName === "INPUT";
+  const text = isInput ? el.value : el.textContent;
+  if (!text) return false;
+  if (!isInput && typeof document !== "undefined" && document.createRange) {
+    try {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const textWidth = range.getBoundingClientRect().width;
+      let clientWidth = el.clientWidth;
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const style = window.getComputedStyle(el);
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const paddingRight = parseFloat(style.paddingRight) || 0;
+        clientWidth = clientWidth - paddingLeft - paddingRight;
+      }
+      if (textWidth > 0 && clientWidth > 0) {
+        return Math.ceil(textWidth) > Math.floor(clientWidth);
+      }
+    } catch (e) {
+    }
+  }
+  return el.scrollWidth > el.clientWidth;
+};
 function useSmartTooltip() {
   const [isTruncated, setIsTruncated] = (0, import_react4.useState)(false);
   const [showBubble, setShowBubble] = (0, import_react4.useState)(false);
@@ -1405,14 +1431,14 @@ function useSmartTooltip() {
   const checkTruncation = (0, import_react4.useCallback)(() => {
     const el = targetRef.current;
     if (!el) return false;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     return truncated;
   }, []);
   const handleMouseEnter = (0, import_react4.useCallback)(() => {
     const el = targetRef.current;
     if (!el) return;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     if (truncated) {
       const rect = el.getBoundingClientRect();
@@ -1492,7 +1518,7 @@ var TruncatedTooltip = ({
   const handleMouseEnter = () => {
     const el = spanRef.current;
     if (!el) return;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     if (truncated && tooltipContent.trim().length > 0) {
       const rect = el.getBoundingClientRect();
@@ -1583,12 +1609,21 @@ var SmartTextCell = ({
   const textValue = value !== void 0 && value !== null ? String(value) : "";
   const effectiveTooltip = tooltipText !== void 0 ? tooltipText : textValue;
   const checkTruncation = (0, import_react4.useCallback)(() => {
+    if (!readOnly && inputRef.current && spanRef.current) {
+      const inputEl = inputRef.current;
+      let padding = 16;
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const style = window.getComputedStyle(inputEl);
+        padding = (parseFloat(style.paddingLeft) || 8) + (parseFloat(style.paddingRight) || 8);
+      }
+      spanRef.current.style.width = `${Math.max(0, inputEl.clientWidth - padding)}px`;
+    }
     const el = spanRef.current || inputRef.current;
     if (!el) return false;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     return truncated;
-  }, []);
+  }, [readOnly]);
   const handleMouseEnter = () => {
     const truncated = checkTruncation();
     const targetEl = readOnly ? spanRef.current : inputRef.current || spanRef.current;
@@ -1701,7 +1736,9 @@ var SmartTextCell = ({
             "aria-hidden": "true",
             dir,
             className: "invisible pointer-events-none absolute truncate overflow-hidden text-ellipsis whitespace-nowrap max-w-full",
-            style: { width: inputRef.current ? `${inputRef.current.clientWidth}px` : void 0 },
+            style: {
+              width: inputRef.current ? `${Math.max(0, inputRef.current.clientWidth - 16)}px` : void 0
+            },
             children: textValue
           }
         ),
@@ -7601,7 +7638,7 @@ var TableRow = import_react15.default.memo(function TableRow2({
   permissions
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react15.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: `hover:bg-blue-50/30 transition-colors group ${isSelected ? "bg-blue-50/40" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { className: `transition-colors group hover:bg-blue-50 ${isSelected ? "bg-blue-50" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 80, minWidth: 80, maxWidth: 80 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
         rowStatus && (() => {
           const status = typeof rowStatus === "string" ? rowStatus : rowStatus.status;
@@ -12573,6 +12610,7 @@ var UNIVERSE_COMPONENTS = {
   UNIVERSE_COMPONENTS,
   WhatsAppComponent,
   calculateMinColumnWidth,
+  checkElementTruncation,
   cn,
   extractUniqueVariableIndices,
   extractVariableIndices,

package/dist/index.mjs

@@ -1297,6 +1297,31 @@ import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, X as X3 } from "lu
 import { useState as useState3, useRef as useRef3, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var checkElementTruncation = (el) => {
+  if (!el) return false;
+  const isInput = el instanceof HTMLInputElement || el.tagName === "INPUT";
+  const text = isInput ? el.value : el.textContent;
+  if (!text) return false;
+  if (!isInput && typeof document !== "undefined" && document.createRange) {
+    try {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      const textWidth = range.getBoundingClientRect().width;
+      let clientWidth = el.clientWidth;
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const style = window.getComputedStyle(el);
+        const paddingLeft = parseFloat(style.paddingLeft) || 0;
+        const paddingRight = parseFloat(style.paddingRight) || 0;
+        clientWidth = clientWidth - paddingLeft - paddingRight;
+      }
+      if (textWidth > 0 && clientWidth > 0) {
+        return Math.ceil(textWidth) > Math.floor(clientWidth);
+      }
+    } catch (e) {
+    }
+  }
+  return el.scrollWidth > el.clientWidth;
+};
 function useSmartTooltip() {
   const [isTruncated, setIsTruncated] = useState3(false);
   const [showBubble, setShowBubble] = useState3(false);
@@ -1305,14 +1330,14 @@ function useSmartTooltip() {
   const checkTruncation = useCallback2(() => {
     const el = targetRef.current;
     if (!el) return false;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     return truncated;
   }, []);
   const handleMouseEnter = useCallback2(() => {
     const el = targetRef.current;
     if (!el) return;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     if (truncated) {
       const rect = el.getBoundingClientRect();
@@ -1392,7 +1417,7 @@ var TruncatedTooltip = ({
   const handleMouseEnter = () => {
     const el = spanRef.current;
     if (!el) return;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     if (truncated && tooltipContent.trim().length > 0) {
       const rect = el.getBoundingClientRect();
@@ -1483,12 +1508,21 @@ var SmartTextCell = ({
   const textValue = value !== void 0 && value !== null ? String(value) : "";
   const effectiveTooltip = tooltipText !== void 0 ? tooltipText : textValue;
   const checkTruncation = useCallback2(() => {
+    if (!readOnly && inputRef.current && spanRef.current) {
+      const inputEl = inputRef.current;
+      let padding = 16;
+      if (typeof window !== "undefined" && window.getComputedStyle) {
+        const style = window.getComputedStyle(inputEl);
+        padding = (parseFloat(style.paddingLeft) || 8) + (parseFloat(style.paddingRight) || 8);
+      }
+      spanRef.current.style.width = `${Math.max(0, inputEl.clientWidth - padding)}px`;
+    }
     const el = spanRef.current || inputRef.current;
     if (!el) return false;
-    const truncated = el.scrollWidth > el.clientWidth;
+    const truncated = checkElementTruncation(el);
     setIsTruncated(truncated);
     return truncated;
-  }, []);
+  }, [readOnly]);
   const handleMouseEnter = () => {
     const truncated = checkTruncation();
     const targetEl = readOnly ? spanRef.current : inputRef.current || spanRef.current;
@@ -1601,7 +1635,9 @@ var SmartTextCell = ({
             "aria-hidden": "true",
             dir,
             className: "invisible pointer-events-none absolute truncate overflow-hidden text-ellipsis whitespace-nowrap max-w-full",
-            style: { width: inputRef.current ? `${inputRef.current.clientWidth}px` : void 0 },
+            style: {
+              width: inputRef.current ? `${Math.max(0, inputRef.current.clientWidth - 16)}px` : void 0
+            },
             children: textValue
           }
         ),
@@ -7501,7 +7537,7 @@ var TableRow = React12.memo(function TableRow2({
   permissions
 }) {
   return /* @__PURE__ */ jsxs12(React12.Fragment, { children: [
-    /* @__PURE__ */ jsxs12("tr", { className: `hover:bg-blue-50/30 transition-colors group ${isSelected ? "bg-blue-50/40" : ""}`, children: [
+    /* @__PURE__ */ jsxs12("tr", { className: `transition-colors group hover:bg-blue-50 ${isSelected ? "bg-blue-50" : ""}`, children: [
       /* @__PURE__ */ jsx12("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 80, minWidth: 80, maxWidth: 80 }, children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-1.5", children: [
         rowStatus && (() => {
           const status = typeof rowStatus === "string" ? rowStatus : rowStatus.status;
@@ -12521,6 +12557,7 @@ export {
   UNIVERSE_COMPONENTS,
   WhatsAppComponent,
   calculateMinColumnWidth,
+  checkElementTruncation,
   cn,
   extractUniqueVariableIndices,
   extractVariableIndices,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@universe-platform/ui",
-    "version": "0.1.0-beta.17",
+    "version": "0.1.0-beta.18",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts",