@elliemae/ds-truncated-tooltip-text 2.3.0-alpha.9 → 2.3.0-next.11

package/dist/esm/SimpleTruncatedTooltipText.js

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

@@ -1,7 +0,0 @@
-{
-  "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

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

@@ -1,7 +0,0 @@
-{
-  "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

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

@@ -1,7 +0,0 @@
-{
-  "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/DSTruncateTextWithTooltip.d.ts

@@ -1,8 +0,0 @@
-/// <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/dist/types/index.d.ts

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