@elliemae/ds-truncated-tooltip-text 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSTruncateTextWithTooltip.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+var styled = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1w57q5j-0"
+})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;:focus{border:none;outline:none;background:", ";}"], props => props.theme.colors.brand['200']);
+const DSTruncateTextWithTooltipDatatestId = 'DS-TruncateTextWithTooltip';
+const DSTruncateTextWithTooltip = _ref => {
+  let {
+    text,
+    tooltipProps = {}
+  } = _ref;
+  const [textWrapperEl, setTextWrapperEl] = React.useState(); // const textWrapperEl = useRef<HTMLSpanElement>();
+
+  const [isShowingEllipsis, setIsShowingEllipsis] = React.useState(false); // const isShowingEllipsis = textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth;
+
+  const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
+    if (entries.length) {
+      const [textWrapperEntry] = entries;
+      const el = textWrapperEntry.target;
+      setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
+    }
+  }), []);
+  React.useEffect(() => {
+    if (textWrapperEl) {
+      setIsShowingEllipsis((textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.scrollWidth) > (textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.clientWidth));
+      resizeObserver.observe(textWrapperEl);
+    }
+
+    return () => {
+      if (textWrapperEl) {
+        resizeObserver.unobserve(textWrapperEl);
+      }
+    };
+  }, [resizeObserver, textWrapperEl]);
+  if (isShowingEllipsis) return /*#__PURE__*/jsxRuntime.jsx(dsTooltip.DSTooltipV3, _objectSpread(_objectSpread({
+    text: text
+  }, tooltipProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Text, {
+      ref: setTextWrapperEl,
+      tabIndex: 0,
+      "data-testid": DSTruncateTextWithTooltipDatatestId,
+      children: text
+    })
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
+    ref: setTextWrapperEl,
+    "data-testid": DSTruncateTextWithTooltipDatatestId,
+    children: text
+  });
+};
+
+exports.DSTruncateTextWithTooltip = DSTruncateTextWithTooltip;
+exports.DSTruncateTextWithTooltipDatatestId = DSTruncateTextWithTooltipDatatestId;

package/cjs/DSTruncatedTooltipText.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsPopper = require('@elliemae/ds-popper');
+var TooltipTextProvider = require('./TooltipTextProvider.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const _excluded = ["containerProps", "value", "zIndex"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const isEllipsisActive = _ref => {
+  let {
+    offsetWidth,
+    scrollWidth
+  } = _ref;
+  return offsetWidth < scrollWidth;
+}; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
+
+
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1olo1o7-0"
+})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;"]);
+
+const DSTruncatedTooltipText = _ref2 => {
+  let {
+    containerProps = {},
+    value = '',
+    zIndex = 110
+  } = _ref2,
+      otherTextProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
+
+  const tooltipContext = React.useContext(TooltipTextProvider.TruncatedTooltipContext);
+  React.useEffect(() => {
+    if (zIndex && tooltipContext) tooltipContext.setZIndex(zIndex);
+  }, [zIndex]);
+  if (!tooltipContext) return value;
+  const {
+    showTooltip,
+    hideTooltip
+  } = tooltipContext;
+
+  const handleMouseEnter = e => {
+    const {
+      target
+    } = e;
+
+    if (target && isEllipsisActive(target, target.getBoundingClientRect())) {
+      showTooltip({
+        value,
+        reference: target
+      }, e);
+    }
+  };
+
+  const handleMouseLeave = e => {
+    hideTooltip({
+      reference: e.target
+    });
+  };
+
+  const handlers = showTooltip ? {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  } : {};
+  return /*#__PURE__*/jsxRuntime.jsx(Text, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, containerProps), otherTextProps), handlers), {}, {
+    children: value
+  }));
+};
+
+DSTruncatedTooltipText.defaultProps = {
+  value: '',
+  zIndex: 110
+};
+const truncatedTooltipTextProps = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Text that when truncated will trigger the tooltip interaction'),
+  tooltipPlacement: reactDesc.PropTypes.oneOf([dsPopper.PopperPositions.AUTO_START, dsPopper.PopperPositions.AUTO_END, dsPopper.PopperPositions.AUTO, dsPopper.PopperPositions.TOP_START, dsPopper.PopperPositions.TOP, dsPopper.PopperPositions.TOP_END, dsPopper.PopperPositions.RIGHT_START, dsPopper.PopperPositions.RIGHT, dsPopper.PopperPositions.RIGHT_END, dsPopper.PopperPositions.BOTTOM_START, dsPopper.PopperPositions.BOTTOM, dsPopper.PopperPositions.BOTTOM_END, dsPopper.PopperPositions.LEFT_START, dsPopper.PopperPositions.LEFT, dsPopper.PopperPositions.LEFT_END]).description('Position of the tooltip'),
+  tooltipDelay: reactDesc.PropTypes.number.description('Delay to show the tooltip'),
+  zIndex: reactDesc.PropTypes.number.description('override default zIndex').defaultValue(110)
+};
+DSTruncatedTooltipText.defaultProps = {
+  containerProps: {},
+  value: '',
+  tooltipPlacement: undefined,
+  tooltipDelay: undefined
+};
+const TruncatedTooltipTextWithSchema = reactDesc.describe(DSTruncatedTooltipText);
+TruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;
+
+exports.DSTruncatedTooltipText = DSTruncatedTooltipText;
+exports.TruncatedTooltipTextWithSchema = TruncatedTooltipTextWithSchema;
+exports["default"] = DSTruncatedTooltipText;

package/cjs/SimpleTruncatedTooltipText.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var styled = require('styled-components');
+var DSPopover = require('@elliemae/ds-popover');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const dsTestId = 'DS-SimpleTruncateText';
+
+const isEllipsisActive = _ref => {
+  let {
+    offsetWidth,
+    scrollWidth
+  } = _ref;
+  return offsetWidth < scrollWidth;
+};
+
+const initialTooltipState = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return {
+    reference: null,
+    visible: false,
+    value,
+    options
+  };
+}; // reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
+
+
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-2f4vtq-0"
+})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;"]);
+
+const SimpleTruncatedTooltipText = props => {
+  const {
+    containerProps,
+    tooltipDelay,
+    placement,
+    value,
+    zIndex,
+    tooltipOptions,
+    textOptions
+  } = props; // not using "usePopoverProviderState" because usePopoverState has memory leak issues
+
+  const [tooltipState, setTooltipState] = React.useState(initialTooltipState(value, tooltipOptions));
+  const show = React.useCallback(newState => {
+    setTooltipState(_objectSpread(_objectSpread(_objectSpread({}, tooltipState), newState), {}, {
+      visible: true
+    }));
+  }, [tooltipState]);
+  const hideTooltip = React.useCallback(newState => {
+    setTooltipState(_objectSpread(_objectSpread(_objectSpread({}, tooltipState), newState), {}, {
+      visible: false
+    }));
+  }, [tooltipState]);
+  const [showTooltip, cancelShowTooltip] = dsUtilities.useCancellableDelayedCallback(show, tooltipDelay);
+  const handleMouseEnter = React.useCallback(e => {
+    const {
+      target
+    } = e; // we search for the closest parent with data-testid matching this component
+    //  this is required because the target may not be this component itself
+    //  when the user gives JSX as a value.
+    //  JSX as a value is required for features like text highlight during research
+    //    wich would still allow the truncation behaviour (see tree view for example)
+    // when the target has the test-id itself target===SimpleTruncatedTextEl
+
+    const SimpleTruncatedTextEl = target.closest("[data-testid=\"".concat(dsTestId, "\"]"));
+
+    if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {
+      showTooltip({
+        value,
+        reference: SimpleTruncatedTextEl
+      });
+    }
+  }, [showTooltip, value]);
+  const handleMouseLeave = React.useCallback(() => {
+    cancelShowTooltip();
+    hideTooltip({
+      reference: null
+    });
+  }, [hideTooltip, cancelShowTooltip]);
+  const handlers = React.useMemo(() => {
+    if (!showTooltip) return {};
+    return {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    };
+  }, [showTooltip, handleMouseEnter, handleMouseLeave]);
+  const PurePopover = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: tooltipState.visible ? /*#__PURE__*/_jsx2__default["default"](DSPopover__default["default"], {
+      boundaries: "window",
+      style: {
+        pointerEvents: 'none',
+        zIndex
+      },
+      placement: placement,
+      content: tooltipState.value,
+      referenceEl: tooltipState.reference,
+      visible: tooltipState.visible,
+      showArrow: true
+    }) : null
+  }), [tooltipState, placement, zIndex]);
+  const PureText = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Text, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, containerProps && _objectSpread({}, containerProps)), textOptions && _objectSpread({}, textOptions)), handlers && _objectSpread({}, handlers)), {}, {
+      "data-testid": dsTestId // this is used by mouse enter too. required to support value as JSX
+      ,
+      children: value
+    }))
+  }), [containerProps, textOptions, handlers, value]);
+  const PureSimpleTruncatedTooltipText = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [PureText, PurePopover]
+  }), [PureText, PurePopover]);
+  return PureSimpleTruncatedTooltipText;
+};
+
+SimpleTruncatedTooltipText.defaultProps = {
+  containerProps: {},
+  tooltipOptions: {},
+  textOptions: {},
+  value: '',
+  placement: DSPopover.PopperPositions.TOP,
+  tooltipDelay: 200,
+  zIndex: 110
+};
+
+exports.SimpleTruncatedTooltipText = SimpleTruncatedTooltipText;
+exports["default"] = SimpleTruncatedTooltipText;

package/cjs/TooltipTextProvider.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var DSPopover = require('@elliemae/ds-popover');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
+
+const _excluded = ["children", "tooltipDelay", "placement"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const TruncatedTooltipContext = /*#__PURE__*/React__default["default"].createContext();
+const {
+  Provider
+} = TruncatedTooltipContext;
+
+function TooltipTextProvider(_ref) {
+  let {
+    children,
+    tooltipDelay = 200,
+    placement = 'top'
+  } = _ref,
+      tooltipOptions = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const {
+    show: showTooltip,
+    hide: hideTooltip,
+    state: tooltipState
+  } = DSPopover.usePopoverProviderState({
+    delay: tooltipDelay
+  });
+  const [zIndex, setZIndex] = React.useState(110);
+  const value = React.useMemo(() => ({
+    showTooltip,
+    hideTooltip,
+    setZIndex
+  }), []);
+  return /*#__PURE__*/_jsx2__default["default"](Provider, {
+    value: value
+  }, void 0, children, tooltipState.visible ? /*#__PURE__*/jsxRuntime.jsx(DSPopover__default["default"], _objectSpread(_objectSpread(_objectSpread({
+    boundaries: "window",
+    placement: placement,
+    showArrow: true
+  }, tooltipOptions), tooltipState.options || {}), {}, {
+    content: tooltipState.value,
+    referenceEl: tooltipState.reference,
+    style: {
+      pointerEvents: 'none',
+      zIndex
+    },
+    visible: tooltipState.visible
+  })) : null);
+}
+
+TooltipTextProvider.defaultProps = {};
+
+exports.TooltipTextProvider = TooltipTextProvider;
+exports.TruncatedTooltipContext = TruncatedTooltipContext;
+exports["default"] = TooltipTextProvider;

package/cjs/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TooltipTextProvider = require('./TooltipTextProvider.js');
+var SimpleTruncatedTooltipText = require('./SimpleTruncatedTooltipText.js');
+var DSTruncatedTooltipText = require('./DSTruncatedTooltipText.js');
+var DSTruncateTextWithTooltip = require('./DSTruncateTextWithTooltip.js');
+
+
+
+exports.TooltipTextProvider = TooltipTextProvider.TooltipTextProvider;
+exports.TruncatedTooltipContext = TooltipTextProvider.TruncatedTooltipContext;
+exports.SimpleTruncatedTooltipText = SimpleTruncatedTooltipText.SimpleTruncatedTooltipText;
+exports.DSTruncatedTooltipText = DSTruncatedTooltipText.DSTruncatedTooltipText;
+exports.TruncatedTooltipTextWithSchema = DSTruncatedTooltipText.TruncatedTooltipTextWithSchema;
+exports["default"] = DSTruncatedTooltipText.DSTruncatedTooltipText;
+exports.DSTruncateTextWithTooltip = DSTruncateTextWithTooltip.DSTruncateTextWithTooltip;
+exports.DSTruncateTextWithTooltipDatatestId = DSTruncateTextWithTooltip.DSTruncateTextWithTooltipDatatestId;

package/esm/DSTruncateTextWithTooltip.js

@@ -0,0 +1,65 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useMemo, useEffect } from 'react';
+import { DSTooltipV3 } from '@elliemae/ds-tooltip';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1w57q5j-0"
+})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;:focus{border:none;outline:none;background:", ";}"], props => props.theme.colors.brand['200']);
+const DSTruncateTextWithTooltipDatatestId = 'DS-TruncateTextWithTooltip';
+const DSTruncateTextWithTooltip = _ref => {
+  let {
+    text,
+    tooltipProps = {}
+  } = _ref;
+  const [textWrapperEl, setTextWrapperEl] = useState(); // const textWrapperEl = useRef<HTMLSpanElement>();
+
+  const [isShowingEllipsis, setIsShowingEllipsis] = useState(false); // const isShowingEllipsis = textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth;
+
+  const resizeObserver = useMemo(() => new ResizeObserver(entries => {
+    if (entries.length) {
+      const [textWrapperEntry] = entries;
+      const el = textWrapperEntry.target;
+      setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
+    }
+  }), []);
+  useEffect(() => {
+    if (textWrapperEl) {
+      setIsShowingEllipsis((textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.scrollWidth) > (textWrapperEl === null || textWrapperEl === void 0 ? void 0 : textWrapperEl.clientWidth));
+      resizeObserver.observe(textWrapperEl);
+    }
+
+    return () => {
+      if (textWrapperEl) {
+        resizeObserver.unobserve(textWrapperEl);
+      }
+    };
+  }, [resizeObserver, textWrapperEl]);
+  if (isShowingEllipsis) return /*#__PURE__*/jsx(DSTooltipV3, _objectSpread(_objectSpread({
+    text: text
+  }, tooltipProps), {}, {
+    children: /*#__PURE__*/jsx(Text, {
+      ref: setTextWrapperEl,
+      tabIndex: 0,
+      "data-testid": DSTruncateTextWithTooltipDatatestId,
+      children: text
+    })
+  }));
+  return /*#__PURE__*/jsx(Text, {
+    ref: setTextWrapperEl,
+    "data-testid": DSTruncateTextWithTooltipDatatestId,
+    children: text
+  });
+};
+
+export { DSTruncateTextWithTooltip, DSTruncateTextWithTooltipDatatestId };

package/esm/DSTruncatedTooltipText.js

@@ -0,0 +1,100 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useContext, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { PopperPositions } from '@elliemae/ds-popper';
+import { TruncatedTooltipContext } from './TooltipTextProvider.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "value", "zIndex"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const isEllipsisActive = _ref => {
+  let {
+    offsetWidth,
+    scrollWidth
+  } = _ref;
+  return offsetWidth < scrollWidth;
+}; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
+
+
+const Text = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1olo1o7-0"
+})(["text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%;"]);
+
+const DSTruncatedTooltipText = _ref2 => {
+  let {
+    containerProps = {},
+    value = '',
+    zIndex = 110
+  } = _ref2,
+      otherTextProps = _objectWithoutProperties(_ref2, _excluded);
+
+  const tooltipContext = useContext(TruncatedTooltipContext);
+  useEffect(() => {
+    if (zIndex && tooltipContext) tooltipContext.setZIndex(zIndex);
+  }, [zIndex]);
+  if (!tooltipContext) return value;
+  const {
+    showTooltip,
+    hideTooltip
+  } = tooltipContext;
+
+  const handleMouseEnter = e => {
+    const {
+      target
+    } = e;
+
+    if (target && isEllipsisActive(target, target.getBoundingClientRect())) {
+      showTooltip({
+        value,
+        reference: target
+      }, e);
+    }
+  };
+
+  const handleMouseLeave = e => {
+    hideTooltip({
+      reference: e.target
+    });
+  };
+
+  const handlers = showTooltip ? {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  } : {};
+  return /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, containerProps), otherTextProps), handlers), {}, {
+    children: value
+  }));
+};
+
+DSTruncatedTooltipText.defaultProps = {
+  value: '',
+  zIndex: 110
+};
+const truncatedTooltipTextProps = {
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Text that when truncated will trigger the tooltip interaction'),
+  tooltipPlacement: PropTypes.oneOf([PopperPositions.AUTO_START, PopperPositions.AUTO_END, PopperPositions.AUTO, PopperPositions.TOP_START, PopperPositions.TOP, PopperPositions.TOP_END, PopperPositions.RIGHT_START, PopperPositions.RIGHT, PopperPositions.RIGHT_END, PopperPositions.BOTTOM_START, PopperPositions.BOTTOM, PopperPositions.BOTTOM_END, PopperPositions.LEFT_START, PopperPositions.LEFT, PopperPositions.LEFT_END]).description('Position of the tooltip'),
+  tooltipDelay: PropTypes.number.description('Delay to show the tooltip'),
+  zIndex: PropTypes.number.description('override default zIndex').defaultValue(110)
+};
+DSTruncatedTooltipText.defaultProps = {
+  containerProps: {},
+  value: '',
+  tooltipPlacement: undefined,
+  tooltipDelay: undefined
+};
+const TruncatedTooltipTextWithSchema = describe(DSTruncatedTooltipText);
+TruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;
+
+export { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema, DSTruncatedTooltipText as default };