@elliemae/ds-truncated-tooltip-text 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/DSTruncatedTooltipText.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import React2, { useContext, useEffect } from "react";
+import { describe, PropTypes } from "react-desc";
+import styled from "styled-components";
+import { PopperPositions as positions } from "@elliemae/ds-popper";
+import { TruncatedTooltipContext } from "./TooltipTextProvider";
+const isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;
+const Text = styled.span`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  max-width: 100%;
+`;
+const DSTruncatedTooltipText = ({
+  containerProps = {},
+  value = "",
+  zIndex = 110,
+  ...otherTextProps
+}) => {
+  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__ */ React2.createElement(Text, {
+    ...containerProps,
+    ...otherTextProps,
+    ...handlers
+  }, 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([
+    positions.AUTO_START,
+    positions.AUTO_END,
+    positions.AUTO,
+    positions.TOP_START,
+    positions.TOP,
+    positions.TOP_END,
+    positions.RIGHT_START,
+    positions.RIGHT,
+    positions.RIGHT_END,
+    positions.BOTTOM_START,
+    positions.BOTTOM,
+    positions.BOTTOM_END,
+    positions.LEFT_START,
+    positions.LEFT,
+    positions.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: void 0,
+  tooltipDelay: void 0
+};
+DSTruncatedTooltipText.propTypes = truncatedTooltipTextProps;
+const TruncatedTooltipTextWithSchema = describe(DSTruncatedTooltipText);
+TruncatedTooltipTextWithSchema.propTypes = truncatedTooltipTextProps;
+var DSTruncatedTooltipText_default = DSTruncatedTooltipText;
+export {
+  DSTruncatedTooltipText,
+  TruncatedTooltipTextWithSchema,
+  DSTruncatedTooltipText_default as default
+};
+//# sourceMappingURL=DSTruncatedTooltipText.js.map

package/dist/esm/DSTruncatedTooltipText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTruncatedTooltipText.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,CAAC,EAAE,aAAa,kBACvC,cAAc;AAGhB,MAAM,OAAO,OAAO;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,WAAW;AAClC,YAAU,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,qCAAC,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,UAAU,OAAO,YAC/B;AAAA,EAEF,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D;AAAA,EAEF,kBAAkB,UAAU,MAAM;AAAA,IAChC,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EACf,cAAc,UAAU,OAAO,YAAY;AAAA,EAC3C,QAAQ,UAAU,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,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,iCAAQ;",
+  "names": []
+}

package/dist/esm/SimpleTruncatedTooltipText.js

@@ -0,0 +1,108 @@
+import * as React from "react";
+import React2, { useCallback, useMemo, useState } from "react";
+import { useCancellableDelayedCallback } from "@elliemae/ds-utilities";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { DSPopover, PopperPositions as positions } from "@elliemae/ds-popover";
+const dsTestId = "DS-SimpleTruncateText";
+const isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;
+const initialTooltipState = (value = "", options = {}) => ({
+  reference: null,
+  visible: false,
+  value,
+  options
+});
+const Text = styled.span`
+  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;
+  const [tooltipState, setTooltipState] = useState(initialTooltipState(value, tooltipOptions));
+  const show = useCallback((newState) => {
+    setTooltipState({ ...tooltipState, ...newState, visible: true });
+  }, [tooltipState]);
+  const hideTooltip = useCallback((newState) => {
+    setTooltipState({ ...tooltipState, ...newState, visible: false });
+  }, [tooltipState]);
+  const [showTooltip, cancelShowTooltip] = useCancellableDelayedCallback(show, tooltipDelay);
+  const handleMouseEnter = useCallback((e) => {
+    const { target } = e;
+    const SimpleTruncatedTextEl = target.closest(`[data-testid="${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__ */ React2.createElement(React2.Fragment, null, tooltipState.visible ? /* @__PURE__ */ React2.createElement(DSPopover, {
+    boundaries: "window",
+    style: { pointerEvents: "none", zIndex },
+    placement,
+    content: tooltipState.value,
+    referenceEl: tooltipState.reference,
+    visible: tooltipState.visible,
+    showArrow: true
+  }) : null), [tooltipState, placement, zIndex]);
+  const PureText = useMemo(() => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text, {
+    ...containerProps && { ...containerProps },
+    ...textOptions && { ...textOptions },
+    ...handlers && { ...handlers },
+    "data-testid": dsTestId
+  }, value)), [containerProps, textOptions, handlers, value]);
+  const PureSimpleTruncatedTooltipText = useMemo(() => /* @__PURE__ */ React2.createElement(React2.Fragment, null, PureText, PurePopover), [PureText, PurePopover]);
+  return PureSimpleTruncatedTooltipText;
+};
+SimpleTruncatedTooltipText.propTypes = {
+  containerProps: PropTypes.object,
+  tooltipOptions: PropTypes.object,
+  textOptions: PropTypes.object,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
+  placement: PropTypes.oneOf([
+    positions.AUTO_START,
+    positions.AUTO_END,
+    positions.AUTO,
+    positions.TOP_START,
+    positions.TOP,
+    positions.TOP_END,
+    positions.RIGHT_START,
+    positions.RIGHT,
+    positions.RIGHT_END,
+    positions.BOTTOM_START,
+    positions.BOTTOM,
+    positions.BOTTOM_END,
+    positions.LEFT_START,
+    positions.LEFT,
+    positions.LEFT_END
+  ]),
+  tooltipDelay: PropTypes.number,
+  zIndex: PropTypes.number
+};
+SimpleTruncatedTooltipText.defaultProps = {
+  containerProps: {},
+  tooltipOptions: {},
+  textOptions: {},
+  value: "",
+  placement: positions.TOP,
+  tooltipDelay: 200,
+  zIndex: 110
+};
+var SimpleTruncatedTooltipText_default = SimpleTruncatedTooltipText;
+export {
+  SimpleTruncatedTooltipText,
+  SimpleTruncatedTooltipText_default as default
+};
+//# sourceMappingURL=SimpleTruncatedTooltipText.js.map

package/dist/esm/SimpleTruncatedTooltipText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SimpleTruncatedTooltipText.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useCancellableDelayedCallback } from '@elliemae/ds-utilities';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { DSPopover, PopperPositions as positions } from '@elliemae/ds-popover';\n\nconst dsTestId = 'DS-SimpleTruncateText';\n\nconst isEllipsisActive = ({ offsetWidth, scrollWidth }) => offsetWidth < scrollWidth;\n\nconst initialTooltipState = (value = '', options = {}) => ({\n  reference: null,\n  visible: false,\n  value,\n  options,\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 SimpleTruncatedTooltipText = (props) => {\n  const { containerProps, tooltipDelay, placement, value, zIndex, tooltipOptions, textOptions } = props;\n\n  // not using \"usePopoverProviderState\" because usePopoverState has memory leak issues\n  const [tooltipState, setTooltipState] = useState(initialTooltipState(value, tooltipOptions));\n  const show = useCallback(\n    (newState) => {\n      setTooltipState({ ...tooltipState, ...newState, visible: true });\n    },\n    [tooltipState],\n  );\n  const hideTooltip = useCallback(\n    (newState) => {\n      setTooltipState({ ...tooltipState, ...newState, visible: false });\n    },\n    [tooltipState],\n  );\n  const [showTooltip, cancelShowTooltip] = useCancellableDelayedCallback(show, tooltipDelay);\n\n  const handleMouseEnter = useCallback(\n    (e) => {\n      const { target } = e;\n      // we search for the closest parent with data-testid matching this component\n      //  this is required because the target may not be this component itself\n      //  when the user gives JSX as a value.\n      //  JSX as a value is required for features like text highlight during research\n      //    wich would still allow the truncation behaviour (see tree view for example)\n      // when the target has the test-id itself target===SimpleTruncatedTextEl\n      const SimpleTruncatedTextEl = target.closest(`[data-testid=\"${dsTestId}\"]`);\n      if (SimpleTruncatedTextEl && isEllipsisActive(SimpleTruncatedTextEl)) {\n        showTooltip({ value, reference: SimpleTruncatedTextEl });\n      }\n    },\n    [showTooltip, value],\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    cancelShowTooltip();\n    hideTooltip({ reference: null });\n  }, [hideTooltip, cancelShowTooltip]);\n\n  const handlers = useMemo(() => {\n    if (!showTooltip) return {};\n    return {\n      onMouseEnter: handleMouseEnter,\n      onMouseLeave: handleMouseLeave,\n    };\n  }, [showTooltip, handleMouseEnter, handleMouseLeave]);\n\n  const PurePopover = useMemo(\n    () => (\n      <>\n        {tooltipState.visible ? (\n          <DSPopover\n            boundaries=\"window\"\n            style={{ pointerEvents: 'none', zIndex }}\n            placement={placement}\n            content={tooltipState.value}\n            referenceEl={tooltipState.reference}\n            visible={tooltipState.visible}\n            showArrow\n          />\n        ) : null}\n      </>\n    ),\n    [tooltipState, placement, zIndex],\n  );\n  const PureText = useMemo(\n    () => (\n      <>\n        <Text\n          {...(containerProps && { ...containerProps })}\n          {...(textOptions && { ...textOptions })}\n          {...(handlers && { ...handlers })}\n          data-testid={dsTestId} // this is used by mouse enter too. required to support value as JSX\n        >\n          {value}\n        </Text>\n      </>\n    ),\n    [containerProps, textOptions, handlers, value],\n  );\n\n  const PureSimpleTruncatedTooltipText = useMemo(\n    () => (\n      <>\n        {PureText}\n        {PurePopover}\n      </>\n    ),\n    [PureText, PurePopover],\n  );\n\n  return PureSimpleTruncatedTooltipText;\n};\n\nSimpleTruncatedTooltipText.propTypes = {\n  containerProps: PropTypes.object,\n  tooltipOptions: PropTypes.object,\n  textOptions: PropTypes.object,\n  /** Text that when truncated will trigger the tooltip interaction */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),\n  /** Position of the tooltip */\n  placement: 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  ]),\n  /** Delay to show the tooltip */\n  tooltipDelay: PropTypes.number,\n  /** override default zIndex */\n  zIndex: PropTypes.number,\n};\n\nSimpleTruncatedTooltipText.defaultProps = {\n  containerProps: {},\n  tooltipOptions: {},\n  textOptions: {},\n  value: '',\n  placement: positions.TOP,\n  tooltipDelay: 200,\n  zIndex: 110,\n};\n\nexport { SimpleTruncatedTooltipText };\nexport default SimpleTruncatedTooltipText;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,WAAW;AAEjB,MAAM,mBAAmB,CAAC,EAAE,aAAa,kBAAkB,cAAc;AAEzE,MAAM,sBAAsB,CAAC,QAAQ,IAAI,UAAU,OAAQ;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA;AAAA;AAGF,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpB,MAAM,6BAA6B,CAAC,UAAU;AAC5C,QAAM,EAAE,gBAAgB,cAAc,WAAW,OAAO,QAAQ,gBAAgB,gBAAgB;AAGhG,QAAM,CAAC,cAAc,mBAAmB,SAAS,oBAAoB,OAAO;AAC5E,QAAM,OAAO,YACX,CAAC,aAAa;AACZ,oBAAgB,KAAK,iBAAiB,UAAU,SAAS;AAAA,KAE3D,CAAC;AAEH,QAAM,cAAc,YAClB,CAAC,aAAa;AACZ,oBAAgB,KAAK,iBAAiB,UAAU,SAAS;AAAA,KAE3D,CAAC;AAEH,QAAM,CAAC,aAAa,qBAAqB,8BAA8B,MAAM;AAE7E,QAAM,mBAAmB,YACvB,CAAC,MAAM;AACL,UAAM,EAAE,WAAW;AAOnB,UAAM,wBAAwB,OAAO,QAAQ,iBAAiB;AAC9D,QAAI,yBAAyB,iBAAiB,wBAAwB;AACpE,kBAAY,EAAE,OAAO,WAAW;AAAA;AAAA,KAGpC,CAAC,aAAa;AAGhB,QAAM,mBAAmB,YAAY,MAAM;AACzC;AACA,gBAAY,EAAE,WAAW;AAAA,KACxB,CAAC,aAAa;AAEjB,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,CAAC;AAAa,aAAO;AACzB,WAAO;AAAA,MACL,cAAc;AAAA,MACd,cAAc;AAAA;AAAA,KAEf,CAAC,aAAa,kBAAkB;AAEnC,QAAM,cAAc,QAClB,MACE,4DACG,aAAa,UACZ,qCAAC,WAAD;AAAA,IACE,YAAW;AAAA,IACX,OAAO,EAAE,eAAe,QAAQ;AAAA,IAChC;AAAA,IACA,SAAS,aAAa;AAAA,IACtB,aAAa,aAAa;AAAA,IAC1B,SAAS,aAAa;AAAA,IACtB,WAAS;AAAA,OAET,OAGR,CAAC,cAAc,WAAW;AAE5B,QAAM,WAAW,QACf,MACE,4DACE,qCAAC,MAAD;AAAA,OACO,kBAAkB,KAAK;AAAA,OACvB,eAAe,KAAK;AAAA,OACpB,YAAY,KAAK;AAAA,IACtB,eAAa;AAAA,KAEZ,SAIP,CAAC,gBAAgB,aAAa,UAAU;AAG1C,QAAM,iCAAiC,QACrC,MACE,4DACG,UACA,cAGL,CAAC,UAAU;AAGb,SAAO;AAAA;AAGT,2BAA2B,YAAY;AAAA,EACrC,gBAAgB,UAAU;AAAA,EAC1B,gBAAgB,UAAU;AAAA,EAC1B,aAAa,UAAU;AAAA,EAEvB,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU;AAAA,EAE1E,WAAW,UAAU,MAAM;AAAA,IACzB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA;AAAA,EAGZ,cAAc,UAAU;AAAA,EAExB,QAAQ,UAAU;AAAA;AAGpB,2BAA2B,eAAe;AAAA,EACxC,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,OAAO;AAAA,EACP,WAAW,UAAU;AAAA,EACrB,cAAc;AAAA,EACd,QAAQ;AAAA;AAIV,IAAO,qCAAQ;",
+  "names": []
+}

package/dist/esm/TooltipTextProvider.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import React2, { useMemo, useState } from "react";
+import { DSPopover, usePopoverProviderState } from "@elliemae/ds-popover";
+const TruncatedTooltipContext = React2.createContext();
+const { Provider } = TruncatedTooltipContext;
+function TooltipTextProvider({
+  children,
+  tooltipDelay = 200,
+  placement = "top",
+  ...tooltipOptions
+}) {
+  const {
+    show: showTooltip,
+    hide: hideTooltip,
+    state: tooltipState
+  } = usePopoverProviderState({ delay: tooltipDelay });
+  const [zIndex, setZIndex] = useState(110);
+  const value = useMemo(() => ({
+    showTooltip,
+    hideTooltip,
+    setZIndex
+  }), []);
+  return /* @__PURE__ */ React2.createElement(Provider, {
+    value
+  }, children, tooltipState.visible ? /* @__PURE__ */ React2.createElement(DSPopover, {
+    boundaries: "window",
+    placement,
+    showArrow: true,
+    ...tooltipOptions,
+    ...tooltipState.options || {},
+    content: tooltipState.value,
+    referenceEl: tooltipState.reference,
+    style: { pointerEvents: "none", zIndex },
+    visible: tooltipState.visible
+  }) : null);
+}
+TooltipTextProvider.propTypes = {};
+TooltipTextProvider.defaultProps = {};
+var TooltipTextProvider_default = TooltipTextProvider;
+export {
+  TooltipTextProvider,
+  TruncatedTooltipContext,
+  TooltipTextProvider_default as default
+};
+//# sourceMappingURL=TooltipTextProvider.js.map

package/dist/esm/TooltipTextProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TooltipTextProvider.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo, useState } from 'react';\nimport { DSPopover, usePopoverProviderState } from '@elliemae/ds-popover';\n\nconst TruncatedTooltipContext = React.createContext();\n\nconst { Provider } = TruncatedTooltipContext;\n\nfunction TooltipTextProvider({\n  children,\n  tooltipDelay = 200,\n  placement = 'top',\n  ...tooltipOptions\n}) {\n  const {\n    show: showTooltip,\n    hide: hideTooltip,\n    state: tooltipState,\n  } = usePopoverProviderState({ delay: tooltipDelay });\n  const [zIndex, setZIndex] = useState(110);\n\n  const value = useMemo(\n    () => ({\n      showTooltip,\n      hideTooltip,\n      setZIndex,\n    }),\n    [],\n  );\n\n  return (\n    <Provider value={value}>\n      {children}\n      {tooltipState.visible ? (\n        <DSPopover\n          boundaries=\"window\"\n          placement={placement}\n          showArrow\n          {...tooltipOptions}\n          {...(tooltipState.options || {})}\n          content={tooltipState.value}\n          referenceEl={tooltipState.reference}\n          style={{ pointerEvents: 'none', zIndex }}\n          visible={tooltipState.visible}\n        />\n      ) : null}\n    </Provider>\n  );\n}\n\nTooltipTextProvider.propTypes = {};\nTooltipTextProvider.defaultProps = {};\n\nexport { TooltipTextProvider, TruncatedTooltipContext };\nexport default TooltipTextProvider;\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEA,MAAM,0BAA0B,OAAM;AAEtC,MAAM,EAAE,aAAa;AAErB,6BAA6B;AAAA,EAC3B;AAAA,EACA,eAAe;AAAA,EACf,YAAY;AAAA,KACT;AAAA,GACF;AACD,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,MACL,wBAAwB,EAAE,OAAO;AACrC,QAAM,CAAC,QAAQ,aAAa,SAAS;AAErC,QAAM,QAAQ,QACZ,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,MAEF;AAGF,SACE,qCAAC,UAAD;AAAA,IAAU;AAAA,KACP,UACA,aAAa,UACZ,qCAAC,WAAD;AAAA,IACE,YAAW;AAAA,IACX;AAAA,IACA,WAAS;AAAA,OACL;AAAA,OACC,aAAa,WAAW;AAAA,IAC7B,SAAS,aAAa;AAAA,IACtB,aAAa,aAAa;AAAA,IAC1B,OAAO,EAAE,eAAe,QAAQ;AAAA,IAChC,SAAS,aAAa;AAAA,OAEtB;AAAA;AAKV,oBAAoB,YAAY;AAChC,oBAAoB,eAAe;AAGnC,IAAO,8BAAQ;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { TooltipTextProvider, TruncatedTooltipContext } from "./TooltipTextProvider";
+import { SimpleTruncatedTooltipText } from "./SimpleTruncatedTooltipText";
+import { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema, default as default2 } from "./DSTruncatedTooltipText";
+import { DSTruncateTextWithTooltipDatatestId, DSTruncateTextWithTooltip } from "./DSTruncateTextWithTooltip";
+export {
+  DSTruncateTextWithTooltip,
+  DSTruncateTextWithTooltipDatatestId,
+  DSTruncatedTooltipText,
+  SimpleTruncatedTooltipText,
+  TooltipTextProvider,
+  TruncatedTooltipContext,
+  TruncatedTooltipTextWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { TooltipTextProvider, TruncatedTooltipContext } from './TooltipTextProvider';\nexport { SimpleTruncatedTooltipText } from './SimpleTruncatedTooltipText';\nexport { DSTruncatedTooltipText, TruncatedTooltipTextWithSchema, default } from './DSTruncatedTooltipText';\nexport { DSTruncateTextWithTooltipDatatestId, DSTruncateTextWithTooltip } from './DSTruncateTextWithTooltip';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/types/index.d.ts

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

package/package.json

@@ -1,31 +1,34 @@
 {
   "name": "@elliemae/ds-truncated-tooltip-text",
-  "version": "2.3.0-next.0",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Truncated Tooltip Text",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./TooltipTextProvider": {
-      "import": "./esm/TooltipTextProvider.js",
-      "require": "./cjs/TooltipTextProvider.js"
+      "import": "./dist/esm/TooltipTextProvider.js",
+      "require": "./dist/cjs/TooltipTextProvider.js"
     },
     "./SimpleTruncatedTooltipText": {
-      "import": "./esm/SimpleTruncatedTooltipText.js",
-      "require": "./cjs/SimpleTruncatedTooltipText.js"
+      "import": "./dist/esm/SimpleTruncatedTooltipText.js",
+      "require": "./dist/cjs/SimpleTruncatedTooltipText.js"
     },
     "./DSTruncateTextWithTooltip": {
-      "import": "./esm/DSTruncateTextWithTooltip.js",
-      "require": "./cjs/DSTruncateTextWithTooltip.js"
+      "import": "./dist/esm/DSTruncateTextWithTooltip.js",
+      "require": "./dist/cjs/DSTruncateTextWithTooltip.js"
     },
     "./DSTruncatedTooltipText": {
-      "import": "./esm/DSTruncatedTooltipText.js",
-      "require": "./cjs/DSTruncatedTooltipText.js"
+      "import": "./dist/esm/DSTruncatedTooltipText.js",
+      "require": "./dist/cjs/DSTruncatedTooltipText.js"
     }
   },
   "sideEffects": [
@@ -37,21 +40,21 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "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"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-popover": "2.3.0-next.0",
-    "@elliemae/ds-popper": "2.3.0-next.0",
-    "@elliemae/ds-tooltip": "2.3.0-next.0",
-    "@elliemae/ds-utilities": "2.3.0-next.0",
+    "@elliemae/ds-popover": "3.0.0-alpha.0",
+    "@elliemae/ds-popper": "3.0.0-alpha.0",
+    "@elliemae/ds-tooltip": "3.0.0-alpha.0",
+    "@elliemae/ds-utilities": "3.0.0-alpha.0",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },
@@ -65,7 +68,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/DSTruncateTextWithTooltip.js

@@ -1,75 +0,0 @@
-'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

@@ -1,112 +0,0 @@
-'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;