@elliemae/ds-utilities 2.2.1 → 2.2.3-next.0

package/cjs/hooks/index.js

@@ -20,6 +20,7 @@ var useDerivedStateFromProps = require('./useDerivedStateFromProps.js');
 var useSetRef = require('./useSetRef.js');
 var useParentElement = require('./useParentElement.js');
 var useOnElementResize = require('./useOnElementResize.js');
+var useIsShowingEllipsis = require('./useIsShowingEllipsis.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,3 +60,4 @@ exports.useDerivedStateFromProps = useDerivedStateFromProps;
 exports.useSetRef = useSetRef.useSetRef;
 exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
+exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;

package/cjs/hooks/useIsShowingEllipsis.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+const useIsShowingEllipsis = () => {
+  const [element, setElement] = React.useState();
+  const [isShowingEllipsis, setIsShowingEllipsis] = React.useState(false);
+  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 (element) {
+      setIsShowingEllipsis(element.scrollWidth > element.clientWidth);
+      resizeObserver.observe(element);
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [resizeObserver, element]);
+  return {
+    setElement,
+    isShowingEllipsis
+  };
+};
+
+exports.useIsShowingEllipsis = useIsShowingEllipsis;

package/cjs/index.js

@@ -26,6 +26,7 @@ var useDerivedStateFromProps = require('./hooks/useDerivedStateFromProps.js');
 var useSetRef = require('./hooks/useSetRef.js');
 var useParentElement = require('./hooks/useParentElement.js');
 var useOnElementResize = require('./hooks/useOnElementResize.js');
+var useIsShowingEllipsis = require('./hooks/useIsShowingEllipsis.js');
 var timeUtils = require('./timeUtils.js');
 var compose = require('./compose.js');
 var platform = require('./platform.js');
@@ -101,6 +102,7 @@ exports.useDerivedStateFromProps = useDerivedStateFromProps;
 exports.useSetRef = useSetRef.useSetRef;
 exports.useParentElement = useParentElement.useParentElement;
 exports.useOnElementResize = useOnElementResize.useOnElementResize;
+exports.useIsShowingEllipsis = useIsShowingEllipsis.useIsShowingEllipsis;
 exports.addLeadingZeros = timeUtils.addLeadingZeros;
 exports.getVisibleTimeByFormat = timeUtils.getVisibleTimeByFormat;
 exports.compose = compose.compose;

package/esm/hooks/index.js

@@ -16,3 +16,4 @@ export { default as useDerivedStateFromProps } from './useDerivedStateFromProps.
 export { useSetRef } from './useSetRef.js';
 export { useParentElement } from './useParentElement.js';
 export { useOnElementResize } from './useOnElementResize.js';
+export { useIsShowingEllipsis } from './useIsShowingEllipsis.js';

package/esm/hooks/useIsShowingEllipsis.js

@@ -0,0 +1,32 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useMemo, useEffect } from 'react';
+
+const useIsShowingEllipsis = () => {
+  const [element, setElement] = useState();
+  const [isShowingEllipsis, setIsShowingEllipsis] = useState(false);
+  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 (element) {
+      setIsShowingEllipsis(element.scrollWidth > element.clientWidth);
+      resizeObserver.observe(element);
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [resizeObserver, element]);
+  return {
+    setElement,
+    isShowingEllipsis
+  };
+};
+
+export { useIsShowingEllipsis };

package/esm/index.js

@@ -22,6 +22,7 @@ export { default as useDerivedStateFromProps } from './hooks/useDerivedStateFrom
 export { useSetRef } from './hooks/useSetRef.js';
 export { useParentElement } from './hooks/useParentElement.js';
 export { useOnElementResize } from './hooks/useOnElementResize.js';
+export { useIsShowingEllipsis } from './hooks/useIsShowingEllipsis.js';
 export { addLeadingZeros, getVisibleTimeByFormat } from './timeUtils.js';
 export { compose } from './compose.js';
 export { DOCUMENT, WINDOW } from './platform.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "2.2.1",
+  "version": "2.2.3-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "module": "./esm/index.js",
@@ -79,6 +79,10 @@
       "import": "./esm/hooks/useOnElementResize.js",
       "require": "./cjs/hooks/useOnElementResize.js"
     },
+    "./hooks/useIsShowingEllipsis": {
+      "import": "./esm/hooks/useIsShowingEllipsis.js",
+      "require": "./cjs/hooks/useIsShowingEllipsis.js"
+    },
     "./hooks/useHoverHandlersDelay": {
       "import": "./esm/hooks/useHoverHandlersDelay.js",
       "require": "./cjs/hooks/useHoverHandlersDelay.js"

package/types/hooks/index.d.ts

@@ -16,3 +16,4 @@ export { default as useDerivedStateFromProps } from './useDerivedStateFromProps'
 export * from './useSetRef';
 export * from './useParentElement';
 export * from './useOnElementResize';
+export * from './useIsShowingEllipsis';

package/types/hooks/useIsShowingEllipsis.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useIsShowingEllipsis: <T extends HTMLElement = HTMLSpanElement>() => {
+    setElement: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+    isShowingEllipsis: boolean;
+};