@pine-ds/core 3.17.0 → 3.19.0

package/dist/collection/utils/truncation-tooltip.js

@@ -0,0 +1,242 @@
+import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
+/** CSS class prefix used for truncation tooltip portal elements */
+const TOOLTIP_CLASS = 'pds-truncation-tooltip';
+/**
+ * Injects the truncation tooltip styles into the document head.
+ * Uses the same design tokens as pds-tooltip for visual consistency.
+ * Only injects once — checks the DOM to avoid duplicates.
+ *
+ * Z-Index Strategy:
+ * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
+ * This is necessary because tooltips are portaled to document.body and must overlay:
+ * - Modal dialogs
+ * - Dropdown menus
+ * - Other floating UI elements
+ * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens
+ * or adjust --pine-z-index-nuclear in your theme.
+ */
+function injectStyles() {
+    if (document.querySelector('[data-pds-truncation-tooltip]'))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-pds-truncation-tooltip', '');
+    style.textContent = `
+    .${TOOLTIP_CLASS} {
+      position: fixed;
+      z-index: var(--pine-z-index-nuclear, 9999);
+    }
+    .${TOOLTIP_CLASS}__content {
+      background-color: var(--pine-color-primary, #1a1a2e);
+      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);
+      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));
+      color: var(--pine-color-text-primary, #fff);
+      cursor: text;
+      font-family: var(--pine-font-family-body, sans-serif);
+      font-size: var(--pine-font-size-body-sm, 0.875rem);
+      letter-spacing: var(--pine-letter-spacing, normal);
+      line-height: var(--pine-line-height-body, 1.5);
+      max-width: 320px;
+      opacity: 0;
+      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);
+      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
+      user-select: text;
+      visibility: hidden;
+      width: max-content;
+      word-break: break-word;
+    }
+    .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {
+      opacity: 1;
+      visibility: visible;
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Checks if an element's content is overflowing horizontally (i.e. text is truncated).
+ */
+function isOverflowing(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+/**
+ * Sets up automatic tooltip behavior for a truncated element.
+ *
+ * When the element's text overflows, hovering or focusing the host element
+ * will display a tooltip showing the full text content. The tooltip is
+ * rendered as a portal on document.body and positioned with Floating UI.
+ *
+ * @returns A cleanup function that removes all listeners, observers, and DOM elements.
+ */
+export function setupTruncationTooltip(options) {
+    const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
+    injectStyles();
+    let portalEl = null;
+    let isHovering = false;
+    let isHoveringPortal = false;
+    let isFocused = false;
+    let hideTimeout = null;
+    let resizeObserver = null;
+    let resizeDebounce = null;
+    // Use ResizeObserver to re-evaluate overflow when the element resizes
+    // Debounced to prevent performance issues during rapid window resizing
+    if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => {
+            if (resizeDebounce) {
+                clearTimeout(resizeDebounce);
+            }
+            resizeDebounce = setTimeout(() => {
+                resizeDebounce = null;
+                // If tooltip is showing but text no longer overflows, hide it
+                if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
+                    hideTooltip();
+                }
+            }, 100);
+        });
+        resizeObserver.observe(contentEl);
+    }
+    function createPortal() {
+        if (portalEl)
+            return;
+        const text = getTooltipText();
+        if (!text || text.trim() === '')
+            return;
+        portalEl = document.createElement('div');
+        portalEl.className = TOOLTIP_CLASS;
+        portalEl.setAttribute('role', 'tooltip');
+        portalEl.setAttribute('aria-hidden', 'false');
+        const contentDiv = document.createElement('div');
+        contentDiv.className = `${TOOLTIP_CLASS}__content`;
+        contentDiv.textContent = text.trim();
+        portalEl.appendChild(contentDiv);
+        document.body.appendChild(portalEl);
+        // Allow the user to hover into the tooltip to select/copy text
+        portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
+        portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
+        positionTooltip().then(() => {
+            if (portalEl) {
+                portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);
+            }
+        });
+    }
+    async function positionTooltip() {
+        if (!portalEl)
+            return;
+        try {
+            const { x, y } = await computePosition(hostEl, portalEl, {
+                placement,
+                strategy: 'fixed',
+                middleware: [offset(4), flip(), shift({ padding: 5 })],
+            });
+            Object.assign(portalEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        }
+        catch (_a) {
+            // Fallback: position above the element with bounds checking
+            if (portalEl) {
+                const rect = hostEl.getBoundingClientRect();
+                const portalRect = portalEl.getBoundingClientRect();
+                const padding = 5;
+                // Ensure tooltip stays within viewport bounds
+                const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));
+                const top = Math.max(padding, rect.top - portalRect.height - 8);
+                portalEl.style.left = `${left}px`;
+                portalEl.style.top = `${top}px`;
+            }
+        }
+    }
+    function removePortal() {
+        if (portalEl) {
+            portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
+            portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
+            portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);
+            // Check if portal is still in the DOM before removing
+            if (portalEl.parentNode && portalEl.isConnected) {
+                try {
+                    portalEl.parentNode.removeChild(portalEl);
+                }
+                catch (e) {
+                    // Portal was already removed, ignore error
+                }
+            }
+            portalEl = null;
+        }
+    }
+    function cancelHideTimeout() {
+        if (hideTimeout !== null) {
+            clearTimeout(hideTimeout);
+            hideTimeout = null;
+        }
+    }
+    function showTooltip() {
+        cancelHideTimeout();
+        if (!isOverflowing(contentEl))
+            return;
+        createPortal();
+    }
+    function hideTooltip() {
+        if (isHovering || isHoveringPortal || isFocused)
+            return;
+        removePortal();
+    }
+    /**
+     * Schedules tooltip removal after a short delay.
+     *
+     * The 100ms delay serves two purposes:
+     * 1. Gives users time to move their cursor from the truncated text to the tooltip portal
+     *    without it closing, enabling text selection/copying from the tooltip
+     * 2. Prevents flickering when the user briefly moves the cursor during normal interaction
+     */
+    function scheduleHide() {
+        cancelHideTimeout();
+        hideTimeout = setTimeout(() => {
+            hideTimeout = null;
+            hideTooltip();
+        }, 100);
+    }
+    function handleMouseEnter() {
+        isHovering = true;
+        showTooltip();
+    }
+    function handleMouseLeave() {
+        isHovering = false;
+        scheduleHide();
+    }
+    function handlePortalMouseEnter() {
+        isHoveringPortal = true;
+        cancelHideTimeout();
+    }
+    function handlePortalMouseLeave() {
+        isHoveringPortal = false;
+        scheduleHide();
+    }
+    function handleFocusIn() {
+        isFocused = true;
+        showTooltip();
+    }
+    function handleFocusOut() {
+        isFocused = false;
+        scheduleHide();
+    }
+    hostEl.addEventListener('mouseenter', handleMouseEnter);
+    hostEl.addEventListener('mouseleave', handleMouseLeave);
+    hostEl.addEventListener('focusin', handleFocusIn);
+    hostEl.addEventListener('focusout', handleFocusOut);
+    // Return cleanup function
+    return () => {
+        cancelHideTimeout();
+        if (resizeDebounce) {
+            clearTimeout(resizeDebounce);
+            resizeDebounce = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+        hostEl.removeEventListener('mouseenter', handleMouseEnter);
+        hostEl.removeEventListener('mouseleave', handleMouseLeave);
+        hostEl.removeEventListener('focusin', handleFocusIn);
+        hostEl.removeEventListener('focusout', handleFocusOut);
+        removePortal();
+    };
+}
+//# sourceMappingURL=truncation-tooltip.js.map

package/dist/collection/utils/truncation-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncation-tooltip.js","sourceRoot":"","sources":["../../../src/utils/truncation-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { PlacementType } from './types';\nimport {\n  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\n\nexport interface TruncationTooltipOptions {\n  /** The host element (for hover/focus listeners and positioning anchor) */\n  hostEl: HTMLElement;\n  /** The inner element where overflow actually occurs (inside shadow root) */\n  contentEl: HTMLElement;\n  /** Function that returns the full text to display in the tooltip */\n  getTooltipText: () => string;\n  /** Tooltip placement preference (default: 'top') */\n  placement?: PlacementType;\n}\n\n/** CSS class prefix used for truncation tooltip portal elements */\nconst TOOLTIP_CLASS = 'pds-truncation-tooltip';\n\n/**\n * Injects the truncation tooltip styles into the document head.\n * Uses the same design tokens as pds-tooltip for visual consistency.\n * Only injects once — checks the DOM to avoid duplicates.\n *\n * Z-Index Strategy:\n * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.\n * This is necessary because tooltips are portaled to document.body and must overlay:\n * - Modal dialogs\n * - Dropdown menus\n * - Other floating UI elements\n * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens\n * or adjust --pine-z-index-nuclear in your theme.\n */\nfunction injectStyles(): void {\n  if (document.querySelector('[data-pds-truncation-tooltip]')) return;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-pds-truncation-tooltip', '');\n  style.textContent = `\n    .${TOOLTIP_CLASS} {\n      position: fixed;\n      z-index: var(--pine-z-index-nuclear, 9999);\n    }\n    .${TOOLTIP_CLASS}__content {\n      background-color: var(--pine-color-primary, #1a1a2e);\n      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);\n      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));\n      color: var(--pine-color-text-primary, #fff);\n      cursor: text;\n      font-family: var(--pine-font-family-body, sans-serif);\n      font-size: var(--pine-font-size-body-sm, 0.875rem);\n      letter-spacing: var(--pine-letter-spacing, normal);\n      line-height: var(--pine-line-height-body, 1.5);\n      max-width: 320px;\n      opacity: 0;\n      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);\n      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n      user-select: text;\n      visibility: hidden;\n      width: max-content;\n      word-break: break-word;\n    }\n    .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {\n      opacity: 1;\n      visibility: visible;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\n/**\n * Checks if an element's content is overflowing horizontally (i.e. text is truncated).\n */\nfunction isOverflowing(el: HTMLElement): boolean {\n  return el.scrollWidth > el.clientWidth;\n}\n\n/**\n * Sets up automatic tooltip behavior for a truncated element.\n *\n * When the element's text overflows, hovering or focusing the host element\n * will display a tooltip showing the full text content. The tooltip is\n * rendered as a portal on document.body and positioned with Floating UI.\n *\n * @returns A cleanup function that removes all listeners, observers, and DOM elements.\n */\nexport function setupTruncationTooltip(options: TruncationTooltipOptions): () => void {\n  const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;\n\n  injectStyles();\n\n  let portalEl: HTMLElement | null = null;\n  let isHovering = false;\n  let isHoveringPortal = false;\n  let isFocused = false;\n  let hideTimeout: ReturnType<typeof setTimeout> | null = null;\n  let resizeObserver: ResizeObserver | null = null;\n  let resizeDebounce: ReturnType<typeof setTimeout> | null = null;\n\n  // Use ResizeObserver to re-evaluate overflow when the element resizes\n  // Debounced to prevent performance issues during rapid window resizing\n  if (typeof ResizeObserver !== 'undefined') {\n    resizeObserver = new ResizeObserver(() => {\n      if (resizeDebounce) {\n        clearTimeout(resizeDebounce);\n      }\n      resizeDebounce = setTimeout(() => {\n        resizeDebounce = null;\n        // If tooltip is showing but text no longer overflows, hide it\n        if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {\n          hideTooltip();\n        }\n      }, 100);\n    });\n    resizeObserver.observe(contentEl);\n  }\n\n  function createPortal(): void {\n    if (portalEl) return;\n\n    const text = getTooltipText();\n    if (!text || text.trim() === '') return;\n\n    portalEl = document.createElement('div');\n    portalEl.className = TOOLTIP_CLASS;\n    portalEl.setAttribute('role', 'tooltip');\n    portalEl.setAttribute('aria-hidden', 'false');\n\n    const contentDiv = document.createElement('div');\n    contentDiv.className = `${TOOLTIP_CLASS}__content`;\n    contentDiv.textContent = text.trim();\n\n    portalEl.appendChild(contentDiv);\n    document.body.appendChild(portalEl);\n\n    // Allow the user to hover into the tooltip to select/copy text\n    portalEl.addEventListener('mouseenter', handlePortalMouseEnter);\n    portalEl.addEventListener('mouseleave', handlePortalMouseLeave);\n\n    positionTooltip().then(() => {\n      if (portalEl) {\n        portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);\n      }\n    });\n  }\n\n  async function positionTooltip(): Promise<void> {\n    if (!portalEl) return;\n\n    try {\n      const { x, y } = await computePosition(hostEl, portalEl, {\n        placement,\n        strategy: 'fixed',\n        middleware: [offset(4), flip(), shift({ padding: 5 })],\n      });\n\n      Object.assign(portalEl.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    } catch {\n      // Fallback: position above the element with bounds checking\n      if (portalEl) {\n        const rect = hostEl.getBoundingClientRect();\n        const portalRect = portalEl.getBoundingClientRect();\n        const padding = 5;\n\n        // Ensure tooltip stays within viewport bounds\n        const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));\n        const top = Math.max(padding, rect.top - portalRect.height - 8);\n\n        portalEl.style.left = `${left}px`;\n        portalEl.style.top = `${top}px`;\n      }\n    }\n  }\n\n  function removePortal(): void {\n    if (portalEl) {\n      portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);\n      portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);\n      portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);\n      // Check if portal is still in the DOM before removing\n      if (portalEl.parentNode && portalEl.isConnected) {\n        try {\n          portalEl.parentNode.removeChild(portalEl);\n        } catch (e) {\n          // Portal was already removed, ignore error\n        }\n      }\n      portalEl = null;\n    }\n  }\n\n  function cancelHideTimeout(): void {\n    if (hideTimeout !== null) {\n      clearTimeout(hideTimeout);\n      hideTimeout = null;\n    }\n  }\n\n  function showTooltip(): void {\n    cancelHideTimeout();\n    if (!isOverflowing(contentEl)) return;\n    createPortal();\n  }\n\n  function hideTooltip(): void {\n    if (isHovering || isHoveringPortal || isFocused) return;\n    removePortal();\n  }\n\n  /**\n   * Schedules tooltip removal after a short delay.\n   *\n   * The 100ms delay serves two purposes:\n   * 1. Gives users time to move their cursor from the truncated text to the tooltip portal\n   *    without it closing, enabling text selection/copying from the tooltip\n   * 2. Prevents flickering when the user briefly moves the cursor during normal interaction\n   */\n  function scheduleHide(): void {\n    cancelHideTimeout();\n    hideTimeout = setTimeout(() => {\n      hideTimeout = null;\n      hideTooltip();\n    }, 100);\n  }\n\n  function handleMouseEnter(): void {\n    isHovering = true;\n    showTooltip();\n  }\n\n  function handleMouseLeave(): void {\n    isHovering = false;\n    scheduleHide();\n  }\n\n  function handlePortalMouseEnter(): void {\n    isHoveringPortal = true;\n    cancelHideTimeout();\n  }\n\n  function handlePortalMouseLeave(): void {\n    isHoveringPortal = false;\n    scheduleHide();\n  }\n\n  function handleFocusIn(): void {\n    isFocused = true;\n    showTooltip();\n  }\n\n  function handleFocusOut(): void {\n    isFocused = false;\n    scheduleHide();\n  }\n\n  hostEl.addEventListener('mouseenter', handleMouseEnter);\n  hostEl.addEventListener('mouseleave', handleMouseLeave);\n  hostEl.addEventListener('focusin', handleFocusIn);\n  hostEl.addEventListener('focusout', handleFocusOut);\n\n  // Return cleanup function\n  return () => {\n    cancelHideTimeout();\n    if (resizeDebounce) {\n      clearTimeout(resizeDebounce);\n      resizeDebounce = null;\n    }\n    if (resizeObserver) {\n      resizeObserver.disconnect();\n    }\n    hostEl.removeEventListener('mouseenter', handleMouseEnter);\n    hostEl.removeEventListener('mouseleave', handleMouseLeave);\n    hostEl.removeEventListener('focusin', handleFocusIn);\n    hostEl.removeEventListener('focusout', handleFocusOut);\n    removePortal();\n  };\n}\n"]}

package/dist/collection/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\nexport type BoxSpacingType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n  | '025'\n  | '050'\n  | '100'\n  | '125'\n  | '150'\n  | '200'\n  | '250'\n  | '300'\n  | '350'\n  | '400'\n  | '450'\n  | '500'\n  | '550'\n  | '600'\n  | '650'\n  | '700'\n  | '750'\n  | '800';\n\nexport type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n\nexport type ChipSentimentType =\n  'accent'\n  | 'brand'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\nexport type ChipVariantType =\n  'text'\n  | 'tag'\n  | 'dropdown';"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\nexport type BoxSpacingType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n  | '025'\n  | '050'\n  | '100'\n  | '125'\n  | '150'\n  | '200'\n  | '250'\n  | '300'\n  | '350'\n  | '400'\n  | '450'\n  | '500'\n  | '550'\n  | '600'\n  | '650'\n  | '700'\n  | '750'\n  | '800';\n\nexport type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n\nexport type ChipSentimentType =\n  'accent'\n  | 'brand'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\nexport type ChipSizeType =\n  'sm'\n  | 'md'\n  | 'lg';\n\nexport type ChipVariantType =\n  'text'\n  | 'tag'\n  | 'dropdown';"]}