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

package/esm/SimpleTruncatedTooltipText.js

@@ -0,0 +1,136 @@
+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';
+import styled from 'styled-components';
+import DSPopover, { PopperPositions } from '@elliemae/ds-popover';
+import { jsx, Fragment, jsxs } 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 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.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] = useState(initialTooltipState(value, tooltipOptions));
+  const show = useCallback(newState => {
+    setTooltipState(_objectSpread(_objectSpread(_objectSpread({}, tooltipState), newState), {}, {
+      visible: true
+    }));
+  }, [tooltipState]);
+  const hideTooltip = useCallback(newState => {
+    setTooltipState(_objectSpread(_objectSpread(_objectSpread({}, tooltipState), newState), {}, {
+      visible: false
+    }));
+  }, [tooltipState]);
+  const [showTooltip, cancelShowTooltip] = useCancellableDelayedCallback(show, tooltipDelay);
+  const handleMouseEnter = 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 = useCallback(() => {
+    cancelShowTooltip();
+    hideTooltip({
+      reference: null
+    });
+  }, [hideTooltip, cancelShowTooltip]);
+  const handlers = useMemo(() => {
+    if (!showTooltip) return {};
+    return {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    };
+  }, [showTooltip, handleMouseEnter, handleMouseLeave]);
+  const PurePopover = useMemo(() => /*#__PURE__*/jsx(Fragment, {
+    children: tooltipState.visible ? /*#__PURE__*/_jsx2(DSPopover, {
+      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 = 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, value]);
+  const PureSimpleTruncatedTooltipText = useMemo(() => /*#__PURE__*/jsxs(Fragment, {
+    children: [PureText, PurePopover]
+  }), [PureText, PurePopover]);
+  return PureSimpleTruncatedTooltipText;
+};
+
+SimpleTruncatedTooltipText.defaultProps = {
+  containerProps: {},
+  tooltipOptions: {},
+  textOptions: {},
+  value: '',
+  placement: PopperPositions.TOP,
+  tooltipDelay: 200,
+  zIndex: 110
+};
+
+export { SimpleTruncatedTooltipText, SimpleTruncatedTooltipText as default };

package/esm/TooltipTextProvider.js

@@ -0,0 +1,64 @@
+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';
+
+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(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.createContext();
+const {
+  Provider
+} = TruncatedTooltipContext;
+
+function TooltipTextProvider(_ref) {
+  let {
+    children,
+    tooltipDelay = 200,
+    placement = 'top'
+  } = _ref,
+      tooltipOptions = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    show: showTooltip,
+    hide: hideTooltip,
+    state: tooltipState
+  } = usePopoverProviderState({
+    delay: tooltipDelay
+  });
+  const [zIndex, setZIndex] = useState(110);
+  const value = useMemo(() => ({
+    showTooltip,
+    hideTooltip,
+    setZIndex
+  }), []);
+  return /*#__PURE__*/_jsx2(Provider, {
+    value: value
+  }, void 0, children, tooltipState.visible ? /*#__PURE__*/jsx(DSPopover, _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 = {};
+
+export { TooltipTextProvider, TruncatedTooltipContext, TooltipTextProvider as default };

package/esm/index.js

@@ -0,0 +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,34 +1,31 @@
 {
   "name": "@elliemae/ds-truncated-tooltip-text",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Truncated Tooltip Text",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./TooltipTextProvider": {
-      "import": "./dist/esm/TooltipTextProvider.js",
-      "require": "./dist/cjs/TooltipTextProvider.js"
+      "import": "./esm/TooltipTextProvider.js",
+      "require": "./cjs/TooltipTextProvider.js"
     },
     "./SimpleTruncatedTooltipText": {
-      "import": "./dist/esm/SimpleTruncatedTooltipText.js",
-      "require": "./dist/cjs/SimpleTruncatedTooltipText.js"
+      "import": "./esm/SimpleTruncatedTooltipText.js",
+      "require": "./cjs/SimpleTruncatedTooltipText.js"
     },
     "./DSTruncateTextWithTooltip": {
-      "import": "./dist/esm/DSTruncateTextWithTooltip.js",
-      "require": "./dist/cjs/DSTruncateTextWithTooltip.js"
+      "import": "./esm/DSTruncateTextWithTooltip.js",
+      "require": "./cjs/DSTruncateTextWithTooltip.js"
     },
     "./DSTruncatedTooltipText": {
-      "import": "./dist/esm/DSTruncatedTooltipText.js",
-      "require": "./dist/cjs/DSTruncatedTooltipText.js"
+      "import": "./esm/DSTruncatedTooltipText.js",
+      "require": "./cjs/DSTruncatedTooltipText.js"
     }
   },
   "sideEffects": [
@@ -40,15 +37,21 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-popover": "2.3.0-alpha.8",
-    "@elliemae/ds-popper": "2.3.0-alpha.8",
-    "@elliemae/ds-tooltip": "2.3.0-alpha.8",
-    "@elliemae/ds-utilities": "2.3.0-alpha.8",
+    "@elliemae/ds-popover": "2.3.0-next.2",
+    "@elliemae/ds-popper": "2.3.0-next.2",
+    "@elliemae/ds-tooltip": "2.3.0-next.2",
+    "@elliemae/ds-utilities": "2.3.0-next.2",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },
@@ -62,12 +65,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

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

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

package/types/SimpleTruncatedTooltipText.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+declare const SimpleTruncatedTooltipText: {
+    (props: any): JSX.Element;
+    propTypes: {
+        containerProps: PropTypes.Requireable<object>;
+        tooltipOptions: PropTypes.Requireable<object>;
+        textOptions: PropTypes.Requireable<object>;
+        /** Text that when truncated will trigger the tooltip interaction */
+        value: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** Position of the tooltip */
+        placement: PropTypes.Requireable<string>;
+        /** Delay to show the tooltip */
+        tooltipDelay: PropTypes.Requireable<number>;
+        /** override default zIndex */
+        zIndex: PropTypes.Requireable<number>;
+    };
+    defaultProps: {
+        containerProps: {};
+        tooltipOptions: {};
+        textOptions: {};
+        value: string;
+        placement: string;
+        tooltipDelay: number;
+        zIndex: number;
+    };
+};
+export { SimpleTruncatedTooltipText };
+export default SimpleTruncatedTooltipText;

package/types/TooltipTextProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare const TruncatedTooltipContext: React.Context<unknown>;
+declare function TooltipTextProvider({ children, tooltipDelay, placement, ...tooltipOptions }: {
+    [x: string]: any;
+    children: any;
+    tooltipDelay?: number | undefined;
+    placement?: string | undefined;
+}): JSX.Element;
+declare namespace TooltipTextProvider {
+    var propTypes: {};
+    var defaultProps: {};
+}
+export { TooltipTextProvider, TruncatedTooltipContext };
+export default TooltipTextProvider;

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './TooltipTextProvider';
+export * from './SimpleTruncatedTooltipText';
+export * from './DSTruncatedTooltipText';
+export { default } from './DSTruncatedTooltipText';
+export * from './DSTruncateTextWithTooltip';

package/dist/cjs/DSTruncateTextWithTooltip.js

@@ -1,86 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSTruncateTextWithTooltip_exports = {};
-__export(DSTruncateTextWithTooltip_exports, {
-  DSTruncateTextWithTooltip: () => DSTruncateTextWithTooltip,
-  DSTruncateTextWithTooltipDatatestId: () => DSTruncateTextWithTooltipDatatestId
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_styled_components = __toESM(require("styled-components"));
-const Text = import_styled_components.default.span`
-  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 = ({ text, tooltipProps = {} }) => {
-  const [textWrapperEl, setTextWrapperEl] = (0, import_react.useState)();
-  const [isShowingEllipsis, setIsShowingEllipsis] = (0, import_react.useState)(false);
-  const resizeObserver = (0, import_react.useMemo)(() => new ResizeObserver((entries) => {
-    if (entries.length) {
-      const [textWrapperEntry] = entries;
-      const el = textWrapperEntry.target;
-      setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);
-    }
-  }), []);
-  (0, import_react.useEffect)(() => {
-    if (textWrapperEl) {
-      setIsShowingEllipsis(textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth);
-      resizeObserver.observe(textWrapperEl);
-    }
-    return () => {
-      if (textWrapperEl) {
-        resizeObserver.unobserve(textWrapperEl);
-      }
-    };
-  }, [resizeObserver, textWrapperEl]);
-  if (isShowingEllipsis)
-    return /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
-      text,
-      ...tooltipProps
-    }, /* @__PURE__ */ import_react.default.createElement(Text, {
-      ref: setTextWrapperEl,
-      tabIndex: 0,
-      "data-testid": DSTruncateTextWithTooltipDatatestId
-    }, text));
-  return /* @__PURE__ */ import_react.default.createElement(Text, {
-    ref: setTextWrapperEl,
-    "data-testid": DSTruncateTextWithTooltipDatatestId
-  }, text);
-};
-module.exports = __toCommonJS(DSTruncateTextWithTooltip_exports);
-//# sourceMappingURL=DSTruncateTextWithTooltip.js.map

package/dist/cjs/DSTruncateTextWithTooltip.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSTruncateTextWithTooltip.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo, useEffect, useRef } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport styled from 'styled-components';\n\n// reduce the possibility of error showing the tooltip(text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n  :focus {\n    border: none;\n    outline: none;\n    background: ${(props) => props.theme.colors.brand['200']};\n  }\n`;\ninterface PropsT {\n  text: string;\n  tooltipProps?: Record<string, unknown>;\n}\nexport const DSTruncateTextWithTooltipDatatestId = 'DS-TruncateTextWithTooltip';\nexport const DSTruncateTextWithTooltip = ({ text, tooltipProps = {} }: PropsT): JSX.Element => {\n  const [textWrapperEl, setTextWrapperEl] = useState<HTMLSpanElement>();\n  // const textWrapperEl = useRef<HTMLSpanElement>();\n  const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);\n  // const isShowingEllipsis = textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth;\n\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        if (entries.length) {\n          const [textWrapperEntry] = entries;\n          const el = textWrapperEntry.target;\n          setIsShowingEllipsis(el?.scrollWidth > el?.clientWidth);\n        }\n      }),\n    [],\n  );\n  useEffect(() => {\n    if (textWrapperEl) {\n      setIsShowingEllipsis(textWrapperEl?.scrollWidth > textWrapperEl?.clientWidth);\n      resizeObserver.observe(textWrapperEl);\n    }\n    return () => {\n      if (textWrapperEl) {\n        resizeObserver.unobserve(textWrapperEl);\n      }\n    };\n  }, [resizeObserver, textWrapperEl]);\n\n  if (isShowingEllipsis)\n    return (\n      <DSTooltipV3 text={text} {...tooltipProps}>\n        <Text ref={setTextWrapperEl} tabIndex={0} data-testid={DSTruncateTextWithTooltipDatatestId}>\n          {text}\n        </Text>\n      </DSTooltipV3>\n    );\n\n  return (\n    <Text ref={setTextWrapperEl} data-testid={DSTruncateTextWithTooltipDatatestId}>\n      {text}\n    </Text>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,wBAA4B;AAC5B,+BAAmB;AAGnB,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAO/C,MAAM,sCAAsC;AAC5C,MAAM,4BAA4B,CAAC,EAAE,MAAM,eAAe,SAA8B;AAC7F,QAAM,CAAC,eAAe,oBAAoB;AAE1C,QAAM,CAAC,mBAAmB,wBAAwB,2BAAS;AAG3D,QAAM,iBAAiB,0BACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,QAAI,QAAQ,QAAQ;AAClB,YAAM,CAAC,oBAAoB;AAC3B,YAAM,KAAK,iBAAiB;AAC5B,2BAAqB,IAAI,cAAc,IAAI;AAAA;AAAA,MAGjD;AAEF,8BAAU,MAAM;AACd,QAAI,eAAe;AACjB,2BAAqB,eAAe,cAAc,eAAe;AACjE,qBAAe,QAAQ;AAAA;AAEzB,WAAO,MAAM;AACX,UAAI,eAAe;AACjB,uBAAe,UAAU;AAAA;AAAA;AAAA,KAG5B,CAAC,gBAAgB;AAEpB,MAAI;AACF,WACE,mDAAC,+BAAD;AAAA,MAAa;AAAA,SAAgB;AAAA,OAC3B,mDAAC,MAAD;AAAA,MAAM,KAAK;AAAA,MAAkB,UAAU;AAAA,MAAG,eAAa;AAAA,OACpD;AAKT,SACE,mDAAC,MAAD;AAAA,IAAM,KAAK;AAAA,IAAkB,eAAa;AAAA,KACvC;AAAA;",
-  "names": []
-}

package/dist/cjs/DSTruncatedTooltipText.js

@@ -1,119 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSTruncatedTooltipText_exports = {};
-__export(DSTruncatedTooltipText_exports, {
-  DSTruncatedTooltipText: () => DSTruncatedTooltipText,
-  TruncatedTooltipTextWithSchema: () => TruncatedTooltipTextWithSchema,
-  default: () => DSTruncatedTooltipText_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_popper = require("@elliemae/ds-popper");
-var import_TooltipTextProvider = require("./TooltipTextProvider");
-const isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;
-const Text = import_styled_components.default.span`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-  max-width: 100%;
-`;
-const DSTruncatedTooltipText = ({
-  containerProps = {},
-  value = "",
-  zIndex = 110,
-  ...otherTextProps
-}) => {
-  const tooltipContext = (0, import_react.useContext)(import_TooltipTextProvider.TruncatedTooltipContext);
-  (0, import_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__ */ import_react.default.createElement(Text, {
-    ...containerProps,
-    ...otherTextProps,
-    ...handlers
-  }, value);
-};
-DSTruncatedTooltipText.defaultProps = {
-  value: "",
-  zIndex: 110
-};
-const truncatedTooltipTextProps = {
-  containerProps: import_react_desc.PropTypes.object.description("Set of Properties attached to the main container"),
-  value: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("Text that when truncated will trigger the tooltip interaction"),
-  tooltipPlacement: import_react_desc.PropTypes.oneOf([
-    import_ds_popper.PopperPositions.AUTO_START,
-    import_ds_popper.PopperPositions.AUTO_END,
-    import_ds_popper.PopperPositions.AUTO,
-    import_ds_popper.PopperPositions.TOP_START,
-    import_ds_popper.PopperPositions.TOP,
-    import_ds_popper.PopperPositions.TOP_END,
-    import_ds_popper.PopperPositions.RIGHT_START,
-    import_ds_popper.PopperPositions.RIGHT,
-    import_ds_popper.PopperPositions.RIGHT_END,
-    import_ds_popper.PopperPositions.BOTTOM_START,
-    import_ds_popper.PopperPositions.BOTTOM,
-    import_ds_popper.PopperPositions.BOTTOM_END,
-    import_ds_popper.PopperPositions.LEFT_START,
-    import_ds_popper.PopperPositions.LEFT,
-    import_ds_popper.PopperPositions.LEFT_END
-  ]).description("Position of the tooltip"),
-  tooltipDelay: import_react_desc.PropTypes.number.description("Delay to show the tooltip"),
-  zIndex: import_react_desc.PropTypes.number.description("override default zIndex").defaultValue(110)
-};
-DSTruncatedTooltipText.defaultProps = {
-  containerProps: {},
-  value: "",
-  tooltipPlacement: void 0,
-  tooltipDelay: void 0
-};
-DSTruncatedTooltipText.propTypes = truncatedTooltipTextProps;
-const TruncatedTooltipTextWithSchema = (0, import_react_desc.describe)(DSTruncatedTooltipText);
-TruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;
-var DSTruncatedTooltipText_default = DSTruncatedTooltipText;
-module.exports = __toCommonJS(DSTruncatedTooltipText_exports);
-//# sourceMappingURL=DSTruncatedTooltipText.js.map

package/dist/cjs/DSTruncatedTooltipText.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/DSTruncatedTooltipText.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { PopperPositions as positions } from '@elliemae/ds-popper';\nimport { TruncatedTooltipContext } from './TooltipTextProvider';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) =>\n  offsetWidth < scrollWidth;\n\n// reduce the possibility of error showing the tooltip (text-overflow: ellipsis) https://jira.elliemae.io/browse/PUI-1755\nconst Text = styled.span`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  max-width: 100%;\n`;\n\nconst DSTruncatedTooltipText = ({\n  containerProps = {},\n  value = '',\n  zIndex = 110, // https://jira.elliemae.io/browse/PUI-1755\n  ...otherTextProps\n}) => {\n  const tooltipContext = useContext(TruncatedTooltipContext);\n  useEffect(() => {\n    if (zIndex && tooltipContext) tooltipContext.setZIndex(zIndex);\n  }, [zIndex]);\n\n  if (!tooltipContext) return value;\n\n  const { showTooltip, hideTooltip } = tooltipContext;\n\n  const handleMouseEnter = (e) => {\n    const { target } = e;\n    if (target && isEllipsisActive(target, target.getBoundingClientRect())) {\n      showTooltip(\n        {\n          value,\n          reference: target,\n        },\n        e,\n      );\n    }\n  };\n\n  const handleMouseLeave = (e) => {\n    hideTooltip({ reference: e.target });\n  };\n\n  const handlers = showTooltip\n    ? { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }\n    : {};\n  return (\n    <Text {...containerProps} {...otherTextProps} {...handlers}>\n      {value}\n    </Text>\n  );\n};\n\nDSTruncatedTooltipText.defaultProps = {\n  value: '',\n  zIndex: 110,\n};\n\nconst truncatedTooltipTextProps = {\n  containerProps: PropTypes.object.description(\n    'Set of Properties attached to the main container',\n  ),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Text that when truncated will trigger the tooltip interaction',\n  ),\n  tooltipPlacement: PropTypes.oneOf([\n    positions.AUTO_START,\n    positions.AUTO_END,\n    positions.AUTO,\n    positions.TOP_START,\n    positions.TOP,\n    positions.TOP_END,\n    positions.RIGHT_START,\n    positions.RIGHT,\n    positions.RIGHT_END,\n    positions.BOTTOM_START,\n    positions.BOTTOM,\n    positions.BOTTOM_END,\n    positions.LEFT_START,\n    positions.LEFT,\n    positions.LEFT_END,\n  ]).description('Position of the tooltip'),\n  tooltipDelay: PropTypes.number.description('Delay to show the tooltip'),\n  zIndex: PropTypes.number\n    .description('override default zIndex')\n    .defaultValue(110),\n};\n\nDSTruncatedTooltipText.defaultProps = {\n  containerProps: {},\n  value: '',\n  tooltipPlacement: undefined,\n  tooltipDelay: undefined,\n};\n\nDSTruncatedTooltipText.propTypes = truncatedTooltipTextProps;\n\nconst TruncatedTooltipTextWithSchema = describe(DSTruncatedTooltipText);\nTruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;\n\nexport { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema };\nexport default DSTruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,wBAAoC;AACpC,+BAAmB;AACnB,uBAA6C;AAC7C,iCAAwC;AAExC,MAAM,mBAAmB,CAAC,EAAE,aAAa,kBACvC,cAAc;AAGhB,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,yBAAyB,CAAC;AAAA,EAC9B,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,SAAS;AAAA,KACN;AAAA,MACC;AACJ,QAAM,iBAAiB,6BAAW;AAClC,8BAAU,MAAM;AACd,QAAI,UAAU;AAAgB,qBAAe,UAAU;AAAA,KACtD,CAAC;AAEJ,MAAI,CAAC;AAAgB,WAAO;AAE5B,QAAM,EAAE,aAAa,gBAAgB;AAErC,QAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAM,EAAE,WAAW;AACnB,QAAI,UAAU,iBAAiB,QAAQ,OAAO,0BAA0B;AACtE,kBACE;AAAA,QACE;AAAA,QACA,WAAW;AAAA,SAEb;AAAA;AAAA;AAKN,QAAM,mBAAmB,CAAC,MAAM;AAC9B,gBAAY,EAAE,WAAW,EAAE;AAAA;AAG7B,QAAM,WAAW,cACb,EAAE,cAAc,kBAAkB,cAAc,qBAChD;AACJ,SACE,mDAAC,MAAD;AAAA,OAAU;AAAA,OAAoB;AAAA,OAAoB;AAAA,KAC/C;AAAA;AAKP,uBAAuB,eAAe;AAAA,EACpC,OAAO;AAAA,EACP,QAAQ;AAAA;AAGV,MAAM,4BAA4B;AAAA,EAChC,gBAAgB,4BAAU,OAAO,YAC/B;AAAA,EAEF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAEF,kBAAkB,4BAAU,MAAM;AAAA,IAChC,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,IACV,iCAAU;AAAA,KACT,YAAY;AAAA,EACf,cAAc,4BAAU,OAAO,YAAY;AAAA,EAC3C,QAAQ,4BAAU,OACf,YAAY,2BACZ,aAAa;AAAA;AAGlB,uBAAuB,eAAe;AAAA,EACpC,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,cAAc;AAAA;AAGhB,uBAAuB,YAAY;AAEnC,MAAM,iCAAiC,gCAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,iCAAQ;",
-  "names": []
-}