script-eslint/no-unused-vars
    isVisible = null,
    children: mergedChildren = null,
    className: mergedClassName = '',
    component: MergedComponent = component,
    ...mergedProps
  } = merged;

  const treeTableTitleCell =
    (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
    (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));

  React.useEffect(() => {
    setTruncated(
      (cellRef as React.RefObject<HTMLElement>).current.offsetWidth <
        (cellRef as React.RefObject<HTMLElement>).current.scrollWidth
    );
  }, [cellRef]);

  const cell = (
    <MergedComponent
      tabIndex={(select || !truncated) && modifier !== 'truncate' ? -1 : 0}
      {...(!treeTableTitleCell && { 'data-label': dataLabel })}
      onFocus={tooltip !== null ? onMouseEnter : onMouseEnterProp}
      onBlur={() => setShowTooltip(false)}
      onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
      className={css(
        styles.tableTd,
        className,
        isActionCell && styles.tableAction,
        textCenter && styles.modifiers.center,
        noPadding && styles.modifiers.noPadding,
        isStickyColumn && scrollStyles.tableStickyCell,
        hasRightBorder && scrollStyles.modifiers.borderRight,
        hasLeftBorder && scrollStyles.modifiers.borderLeft,
        styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap' | undefined],
        draggableParams && styles.tableDraggable,
        mergedClassName
      )}
      ref={cellRef}
      {...mergedProps}
      {...props}
      {...(isStickyColumn && {
        style: {
          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
          ...props.style
        } as React.CSSProperties
      })}
    >
      {mergedChildren || children}
    </MergedComponent>
  );

  const canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (
    <>
      {cell}
      <Tooltip
        triggerRef={cellRef as React.RefObject<any>}
        content={tooltip || (tooltip === '' && children)}
        isVisible
      />
    </>
  ) : (
    cell
  );
};

export const Td = React.forwardRef((props: TdProps, ref: React.Ref<HTMLTableDataCellElement>) => (
  <TdBase {...props} innerRef={ref} />
));
Td.displayName = 'Td';