@elliemae/ds-truncated-tooltip-text 2.0.0-alpha.1 → 2.0.0-alpha.13

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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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

@@ -2,6 +2,11 @@
 
 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');
@@ -21,25 +26,28 @@ const _excluded = ["containerProps", "value", "zIndex"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const isEllipsisActive = ({
-  offsetWidth,
-  scrollWidth
-}) => offsetWidth < scrollWidth; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
+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({
+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 = _ref => {
+const DSTruncatedTooltipText = _ref2 => {
   let {
     containerProps = {},
     value = '',
     zIndex = 110
-  } = _ref,
-      otherTextProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+  } = _ref2,
+      otherTextProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
 
   const tooltipContext = React.useContext(TooltipTextProvider.TruncatedTooltipContext);
   React.useEffect(() => {
@@ -101,4 +109,4 @@ TruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;
 
 exports.DSTruncatedTooltipText = DSTruncatedTooltipText;
 exports.TruncatedTooltipTextWithSchema = TruncatedTooltipTextWithSchema;
-exports['default'] = DSTruncatedTooltipText;
+exports["default"] = DSTruncatedTooltipText;

package/cjs/SimpleTruncatedTooltipText.js

@@ -4,8 +4,14 @@ 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 hooks = require('@elliemae/ds-utilities/hooks');
+var dsUtilities = require('@elliemae/ds-utilities');
 var styled = require('styled-components');
 var DSPopover = require('@elliemae/ds-popover');
 var jsxRuntime = require('react/jsx-runtime');
@@ -19,23 +25,30 @@ var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const dsTestId = 'DS-SimpleTruncateText';
 
-const isEllipsisActive = ({
-  offsetWidth,
-  scrollWidth
-}) => offsetWidth < scrollWidth;
+const isEllipsisActive = _ref => {
+  let {
+    offsetWidth,
+    scrollWidth
+  } = _ref;
+  return offsetWidth < scrollWidth;
+};
 
-const initialTooltipState = (value = '', options = {}) => ({
-  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 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({
+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%;"]);
 
@@ -61,7 +74,7 @@ const SimpleTruncatedTooltipText = props => {
       visible: false
     }));
   }, [tooltipState]);
-  const [showTooltip, cancelShowTooltip] = hooks.useCancellableDelayedCallback(show, tooltipDelay);
+  const [showTooltip, cancelShowTooltip] = dsUtilities.useCancellableDelayedCallback(show, tooltipDelay);
   const handleMouseEnter = React.useCallback(e => {
     const {
       target
@@ -72,7 +85,7 @@ const SimpleTruncatedTooltipText = props => {
     //    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="${dsTestId}"]`);
+    const SimpleTruncatedTextEl = target.closest("[data-testid=\"".concat(dsTestId, "\"]"));
 
     if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {
       showTooltip({
@@ -95,7 +108,7 @@ const SimpleTruncatedTooltipText = props => {
     };
   }, [showTooltip, handleMouseEnter, handleMouseLeave]);
   const PurePopover = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: tooltipState.visible ? /*#__PURE__*/_jsx2__default['default'](DSPopover__default['default'], {
+    children: tooltipState.visible ? /*#__PURE__*/_jsx2__default["default"](DSPopover__default["default"], {
       boundaries: "window",
       style: {
         pointerEvents: 'none',
@@ -107,14 +120,14 @@ const SimpleTruncatedTooltipText = props => {
       visible: tooltipState.visible,
       showArrow: true
     }) : null
-  }), [tooltipState, placement, tooltipOptions, zIndex]);
+  }), [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]);
+  }), [containerProps, textOptions, handlers, value]);
   const PureSimpleTruncatedTooltipText = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [PureText, PurePopover]
   }), [PureText, PurePopover]);
@@ -132,4 +145,4 @@ SimpleTruncatedTooltipText.defaultProps = {
 };
 
 exports.SimpleTruncatedTooltipText = SimpleTruncatedTooltipText;
-exports['default'] = SimpleTruncatedTooltipText;
+exports["default"] = SimpleTruncatedTooltipText;

package/cjs/TooltipTextProvider.js

@@ -5,6 +5,12 @@ 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');
@@ -21,8 +27,8 @@ const _excluded = ["children", "tooltipDelay", "placement"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const TruncatedTooltipContext = /*#__PURE__*/React__default['default'].createContext();
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
@@ -33,7 +39,7 @@ function TooltipTextProvider(_ref) {
     tooltipDelay = 200,
     placement = 'top'
   } = _ref,
-      tooltipOptions = _objectWithoutProperties__default['default'](_ref, _excluded);
+      tooltipOptions = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const {
     show: showTooltip,
@@ -48,9 +54,9 @@ function TooltipTextProvider(_ref) {
     hideTooltip,
     setZIndex
   }), []);
-  return /*#__PURE__*/_jsx2__default['default'](Provider, {
+  return /*#__PURE__*/_jsx2__default["default"](Provider, {
     value: value
-  }, void 0, children, tooltipState.visible ? /*#__PURE__*/jsxRuntime.jsx(DSPopover__default['default'], _objectSpread(_objectSpread(_objectSpread({
+  }, void 0, children, tooltipState.visible ? /*#__PURE__*/jsxRuntime.jsx(DSPopover__default["default"], _objectSpread(_objectSpread(_objectSpread({
     boundaries: "window",
     placement: placement,
     showArrow: true
@@ -69,4 +75,4 @@ TooltipTextProvider.defaultProps = {};
 
 exports.TooltipTextProvider = TooltipTextProvider;
 exports.TruncatedTooltipContext = TruncatedTooltipContext;
-exports['default'] = TooltipTextProvider;
+exports["default"] = TooltipTextProvider;

package/cjs/index.js

@@ -5,6 +5,7 @@ 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');
 
 
 
@@ -13,4 +14,6 @@ exports.TruncatedTooltipContext = TooltipTextProvider.TruncatedTooltipContext;
 exports.SimpleTruncatedTooltipText = SimpleTruncatedTooltipText.SimpleTruncatedTooltipText;
 exports.DSTruncatedTooltipText = DSTruncatedTooltipText.DSTruncatedTooltipText;
 exports.TruncatedTooltipTextWithSchema = DSTruncatedTooltipText.TruncatedTooltipTextWithSchema;
-exports.default = DSTruncatedTooltipText.DSTruncatedTooltipText;
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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

@@ -1,3 +1,8 @@
+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';
@@ -13,23 +18,26 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const isEllipsisActive = ({
-  offsetWidth,
-  scrollWidth
-}) => offsetWidth < scrollWidth; // reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755
+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 = _ref => {
+const DSTruncatedTooltipText = _ref2 => {
   let {
     containerProps = {},
     value = '',
     zIndex = 110
-  } = _ref,
-      otherTextProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherTextProps = _objectWithoutProperties(_ref2, _excluded);
 
   const tooltipContext = useContext(TruncatedTooltipContext);
   useEffect(() => {

package/esm/SimpleTruncatedTooltipText.js

@@ -1,7 +1,13 @@
+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 _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
-import { useCancellableDelayedCallback } from '@elliemae/ds-utilities/hooks';
+import { useCancellableDelayedCallback } from '@elliemae/ds-utilities';
 import styled from 'styled-components';
 import DSPopover, { PopperPositions } from '@elliemae/ds-popover';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -11,17 +17,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const dsTestId = 'DS-SimpleTruncateText';
 
-const isEllipsisActive = ({
-  offsetWidth,
-  scrollWidth
-}) => offsetWidth < scrollWidth;
+const isEllipsisActive = _ref => {
+  let {
+    offsetWidth,
+    scrollWidth
+  } = _ref;
+  return offsetWidth < scrollWidth;
+};
 
-const initialTooltipState = (value = '', options = {}) => ({
-  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 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.span.withConfig({
@@ -61,7 +74,7 @@ const SimpleTruncatedTooltipText = props => {
     //    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="${dsTestId}"]`);
+    const SimpleTruncatedTextEl = target.closest("[data-testid=\"".concat(dsTestId, "\"]"));
 
     if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {
       showTooltip({
@@ -96,14 +109,14 @@ const SimpleTruncatedTooltipText = props => {
       visible: tooltipState.visible,
       showArrow: true
     }) : null
-  }), [tooltipState, placement, tooltipOptions, zIndex]);
+  }), [tooltipState, placement, zIndex]);
   const PureText = useMemo(() => /*#__PURE__*/jsx(Fragment, {
     children: /*#__PURE__*/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]);
+  }), [containerProps, textOptions, handlers, value]);
   const PureSimpleTruncatedTooltipText = useMemo(() => /*#__PURE__*/jsxs(Fragment, {
     children: [PureText, PurePopover]
   }), [PureText, PurePopover]);

package/esm/TooltipTextProvider.js

@@ -1,6 +1,12 @@
 import _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 React, { useState, useMemo } from 'react';
 import DSPopover, { usePopoverProviderState } from '@elliemae/ds-popover';
 import { jsx } from 'react/jsx-runtime';

package/esm/index.js

@@ -1,3 +1,4 @@
 export { TooltipTextProvider, TruncatedTooltipContext } from './TooltipTextProvider.js';
 export { SimpleTruncatedTooltipText } from './SimpleTruncatedTooltipText.js';
 export { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema, DSTruncatedTooltipText as default } from './DSTruncatedTooltipText.js';
+export { DSTruncateTextWithTooltip, DSTruncateTextWithTooltipDatatestId } from './DSTruncateTextWithTooltip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-truncated-tooltip-text",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Truncated Tooltip Text",
   "module": "./esm/index.js",
@@ -19,6 +19,10 @@
       "import": "./esm/SimpleTruncatedTooltipText.js",
       "require": "./cjs/SimpleTruncatedTooltipText.js"
     },
+    "./DSTruncateTextWithTooltip": {
+      "import": "./esm/DSTruncateTextWithTooltip.js",
+      "require": "./cjs/DSTruncateTextWithTooltip.js"
+    },
     "./DSTruncatedTooltipText": {
       "import": "./esm/DSTruncatedTooltipText.js",
       "require": "./cjs/DSTruncatedTooltipText.js"
@@ -44,19 +48,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-popover": "2.0.0-alpha.1",
-    "@elliemae/ds-popper": "2.0.0-alpha.1",
-    "@elliemae/ds-utilities": "2.0.0-alpha.1",
+    "@elliemae/ds-popover": "2.0.0-alpha.13",
+    "@elliemae/ds-popper": "2.0.0-alpha.13",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.13",
+    "@elliemae/ds-utilities": "2.0.0-alpha.13",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/DSTruncateTextWithTooltip.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface propsT {
+    text: string;
+    tooltipProps: Record<string, unknown>;
+}
+export declare const DSTruncateTextWithTooltipDatatestId = "DS-TruncateTextWithTooltip";
+export declare const DSTruncateTextWithTooltip: ({ text, tooltipProps }: propsT) => JSX.Element;
+export {};

package/types/DSTruncatedTooltipText.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 declare const DSTruncatedTooltipText: {
     ({ containerProps, value, zIndex, ...otherTextProps }: {
@@ -20,13 +21,44 @@ declare const DSTruncatedTooltipText: {
         zIndex?: undefined;
     };
     propTypes: {
-        containerProps: any;
-        value: any;
-        tooltipPlacement: any;
-        tooltipDelay: any;
-        zIndex: any;
+        containerProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        value: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        tooltipPlacement: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        tooltipDelay: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        zIndex: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const TruncatedTooltipTextWithSchema: any;
+declare const TruncatedTooltipTextWithSchema: {
+    (props?: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        value?: string | undefined;
+        zIndex?: number | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema };
 export default DSTruncatedTooltipText;

package/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './TooltipTextProvider';
 export * from './SimpleTruncatedTooltipText';
 export * from './DSTruncatedTooltipText';
 export { default } from './DSTruncatedTooltipText';
+export * from './DSTruncateTextWithTooltip';

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}