@elliemae/ds-utilities 1.57.2 → 1.58.0-rc.2

package/cjs/hooks/index.js

@@ -19,6 +19,7 @@ var hooks_useCancellableDelayedCallback = require('./useCancellableDelayedCallba
 var hooks_useDerivedStateFromProps = require('./useDerivedStateFromProps.js');
 var hooks_useSetRef = require('./useSetRef.js');
 var hooks_useParentElement = require('./useParentElement.js');
+var hooks_useOnElementResize = require('./useOnElementResize.js');
 require('react');
 require('@babel/runtime/helpers/slicedToArray');
 require('@babel/runtime/helpers/defineProperty');
@@ -74,4 +75,5 @@ exports.useCancellableDelayedCallback = hooks_useCancellableDelayedCallback;
 exports.useDerivedStateFromProps = hooks_useDerivedStateFromProps;
 exports.useSetRef = hooks_useSetRef.useSetRef;
 exports.useParentElement = hooks_useParentElement.useParentElement;
+exports.useOnElementResize = hooks_useOnElementResize.useOnElementResize;
 //# sourceMappingURL=index.js.map

package/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/hooks/useOnElementResize.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+
+// Taken and modified from https://stackoverflow.com/a/60218754
+
+var useOnElementResize = function useOnElementResize(targetRef) {
+  var _targetRef$current, _targetRef$current2;
+
+  var _useState = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var observer = React.useRef(null);
+  React.useEffect(function () {
+    function outputsize() {
+      var _targetRef$current3, _targetRef$current4;
+
+      setWidth((_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.offsetWidth);
+      setHeight((_targetRef$current4 = targetRef.current) === null || _targetRef$current4 === void 0 ? void 0 : _targetRef$current4.offsetHeight);
+    }
+
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return function () {
+      var _observer$current;
+
+      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+    };
+  }, [targetRef]);
+  return React.useMemo(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [width, height]);
+};
+
+exports.useOnElementResize = useOnElementResize;
+//# sourceMappingURL=useOnElementResize.js.map

package/cjs/hooks/useOnElementResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementResize.js","sources":["../../../src/hooks/useOnElementResize.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = (targetRef: React.RefObject<HTMLDivElement>): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const [height, setHeight] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth);\n      setHeight(targetRef.current?.offsetHeight);\n    }\n\n    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],"names":["useOnElementResize","targetRef","useState","current","offsetWidth","width","setWidth","height","setHeight","observer","useRef","useEffect","outputsize","offsetHeight","ResizeObserver","observe","disconnect","useMemo"],"mappings":";;;;;;;;;;;AAGA;;IACaA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoF;AAAA;;AACpH,kBAA0BC,cAAQ,CAACD,SAAS,CAACE,OAAV,yBAAoBF,SAAS,CAACE,OAA9B,uDAAoB,mBAAmBC,WAAvC,GAAqD,CAAtD,CAAlC;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA,mBAA4BJ,cAAQ,CAACD,SAAS,CAACE,OAAV,0BAAoBF,SAAS,CAACE,OAA9B,wDAAoB,oBAAmBC,WAAvC,GAAqD,CAAtD,CAApC;AAAA;AAAA,MAAOG,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,QAAQ,GAAGC,YAAM,CAAC,IAAD,CAAvB;AAEAC,EAAAA,eAAS,CAAC,YAAM;AACd,aAASC,UAAT,GAAsB;AAAA;;AACpBN,MAAAA,QAAQ,wBAACL,SAAS,CAACE,OAAX,wDAAC,oBAAmBC,WAApB,CAAR;AACAI,MAAAA,SAAS,wBAACP,SAAS,CAACE,OAAX,wDAAC,oBAAmBU,YAApB,CAAT;AACD;;AAEDJ,IAAAA,QAAQ,CAACN,OAAT,GAAmB,IAAIW,cAAJ,CAAmBF,UAAnB,EAA+BG,OAA/B,CAAuCd,SAAS,CAACE,OAAjD,CAAnB;AAEA,WAAO,YAAM;AAAA;;AACX,2BAAAM,QAAQ,CAACN,OAAT,wEAAkBa,UAAlB;AACD,KAFD;AAGD,GAXQ,EAWN,CAACf,SAAD,CAXM,CAAT;AAaA,SAAOgB,aAAO,CACZ;AAAA,WAAO;AACLZ,MAAAA,KAAK,EAALA,KADK;AAELE,MAAAA,MAAM,EAANA;AAFK,KAAP;AAAA,GADY,EAKZ,CAACF,KAAD,EAAQE,MAAR,CALY,CAAd;AAOD;;;;"}

package/cjs/index.js

@@ -24,6 +24,7 @@ var hooks_useCancellableDelayedCallback = require('./hooks/useCancellableDelayed
 var hooks_useDerivedStateFromProps = require('./hooks/useDerivedStateFromProps.js');
 var hooks_useSetRef = require('./hooks/useSetRef.js');
 var hooks_useParentElement = require('./hooks/useParentElement.js');
+var hooks_useOnElementResize = require('./hooks/useOnElementResize.js');
 var timeUtils = require('./timeUtils.js');
 var compose = require('./compose.js');
 var platform = require('./platform.js');
@@ -113,6 +114,7 @@ exports.useCancellableDelayedCallback = hooks_useCancellableDelayedCallback;
 exports.useDerivedStateFromProps = hooks_useDerivedStateFromProps;
 exports.useSetRef = hooks_useSetRef.useSetRef;
 exports.useParentElement = hooks_useParentElement.useParentElement;
+exports.useOnElementResize = hooks_useOnElementResize.useOnElementResize;
 exports.addLeadingZeros = timeUtils.addLeadingZeros;
 exports.getVisibleTimeByFormat = timeUtils.getVisibleTimeByFormat;
 exports.compose = compose.compose;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/hooks/index.js

@@ -15,6 +15,7 @@ export { default as useCancellableDelayedCallback } from './useCancellableDelaye
 export { default as useDerivedStateFromProps } from './useDerivedStateFromProps.js';
 export { useSetRef } from './useSetRef.js';
 export { useParentElement } from './useParentElement.js';
+export { useOnElementResize } from './useOnElementResize.js';
 import 'react';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '@babel/runtime/helpers/esm/defineProperty';

package/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/hooks/useOnElementResize.js

@@ -0,0 +1,44 @@
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { useState, useRef, useEffect, useMemo } from 'react';
+
+// Taken and modified from https://stackoverflow.com/a/60218754
+
+var useOnElementResize = function useOnElementResize(targetRef) {
+  var _targetRef$current, _targetRef$current2;
+
+  var _useState = useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var observer = useRef(null);
+  useEffect(function () {
+    function outputsize() {
+      var _targetRef$current3, _targetRef$current4;
+
+      setWidth((_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.offsetWidth);
+      setHeight((_targetRef$current4 = targetRef.current) === null || _targetRef$current4 === void 0 ? void 0 : _targetRef$current4.offsetHeight);
+    }
+
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return function () {
+      var _observer$current;
+
+      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+    };
+  }, [targetRef]);
+  return useMemo(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [width, height]);
+};
+
+export { useOnElementResize };
+//# sourceMappingURL=useOnElementResize.js.map

package/esm/hooks/useOnElementResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnElementResize.js","sources":["../../../src/hooks/useOnElementResize.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = (targetRef: React.RefObject<HTMLDivElement>): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const [height, setHeight] = useState(targetRef.current ? targetRef.current?.offsetWidth : 0);\n  const observer = useRef(null);\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth);\n      setHeight(targetRef.current?.offsetHeight);\n    }\n\n    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);\n\n    return () => {\n      observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],"names":["useOnElementResize","targetRef","useState","current","offsetWidth","width","setWidth","height","setHeight","observer","useRef","useEffect","outputsize","offsetHeight","ResizeObserver","observe","disconnect","useMemo"],"mappings":";;;AAGA;;IACaA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoF;AAAA;;AACpH,kBAA0BC,QAAQ,CAACD,SAAS,CAACE,OAAV,yBAAoBF,SAAS,CAACE,OAA9B,uDAAoB,mBAAmBC,WAAvC,GAAqD,CAAtD,CAAlC;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA,mBAA4BJ,QAAQ,CAACD,SAAS,CAACE,OAAV,0BAAoBF,SAAS,CAACE,OAA9B,wDAAoB,oBAAmBC,WAAvC,GAAqD,CAAtD,CAApC;AAAA;AAAA,MAAOG,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,QAAQ,GAAGC,MAAM,CAAC,IAAD,CAAvB;AAEAC,EAAAA,SAAS,CAAC,YAAM;AACd,aAASC,UAAT,GAAsB;AAAA;;AACpBN,MAAAA,QAAQ,wBAACL,SAAS,CAACE,OAAX,wDAAC,oBAAmBC,WAApB,CAAR;AACAI,MAAAA,SAAS,wBAACP,SAAS,CAACE,OAAX,wDAAC,oBAAmBU,YAApB,CAAT;AACD;;AAEDJ,IAAAA,QAAQ,CAACN,OAAT,GAAmB,IAAIW,cAAJ,CAAmBF,UAAnB,EAA+BG,OAA/B,CAAuCd,SAAS,CAACE,OAAjD,CAAnB;AAEA,WAAO,YAAM;AAAA;;AACX,2BAAAM,QAAQ,CAACN,OAAT,wEAAkBa,UAAlB;AACD,KAFD;AAGD,GAXQ,EAWN,CAACf,SAAD,CAXM,CAAT;AAaA,SAAOgB,OAAO,CACZ;AAAA,WAAO;AACLZ,MAAAA,KAAK,EAALA,KADK;AAELE,MAAAA,MAAM,EAANA;AAFK,KAAP;AAAA,GADY,EAKZ,CAACF,KAAD,EAAQE,MAAR,CALY,CAAd;AAOD;;;;"}

package/esm/index.js

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

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/hooks/useOnElementResize/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@elliemae/ds-utilities/hooks/useOnElementResize",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "private": true,
+  "main": "../../cjs/hooks/useOnElementResize.js",
+  "module": "../../esm/hooks/useOnElementResize.js"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "1.57.2",
+  "version": "1.58.0-rc.2",
   "license": "MIT",
   "description": "Ellie Mae - Dim Sum - Utilities",
   "main": "cjs/index.js",