@elliemae/ds-utilities 3.11.0-next.2 → 3.11.0-next.3

package/dist/cjs/hooks/useOnElementResize.js

@@ -39,9 +39,12 @@ const useOnElementResize = (targetRef) => {
       setHeight(targetRef.current?.offsetHeight ?? 0);
     }
     observer.current = new ResizeObserver(outputsize);
-    observer.current.observe(targetRef.current);
+    const el = targetRef.current;
+    if (el)
+      observer.current.observe(el);
     return () => {
-      observer.current?.disconnect();
+      if (el)
+        observer.current?.disconnect();
     };
   }, [targetRef]);
   return (0, import_react.useMemo)(

package/dist/cjs/hooks/useOnElementResize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useOnElementResize.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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 = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    observer.current.observe(targetRef.current as Element);\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAIrD,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,aAAS,QAAQ,QAAQ,UAAU,OAAkB;AAErD,WAAO,MAAM;AACX,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "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 = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAIrD,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI;AAAI,eAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI;AAAI,iBAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
   "names": []
 }

package/dist/esm/hooks/useOnElementResize.js

@@ -10,9 +10,12 @@ const useOnElementResize = (targetRef) => {
       setHeight(targetRef.current?.offsetHeight ?? 0);
     }
     observer.current = new ResizeObserver(outputsize);
-    observer.current.observe(targetRef.current);
+    const el = targetRef.current;
+    if (el)
+      observer.current.observe(el);
     return () => {
-      observer.current?.disconnect();
+      if (el)
+        observer.current?.disconnect();
     };
   }, [targetRef]);
   return useMemo(

package/dist/esm/hooks/useOnElementResize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useOnElementResize.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    observer.current.observe(targetRef.current as Element);\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,UAAU,WAAW,QAAQ,eAAe;AAIrD,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,aAAS,QAAQ,QAAQ,UAAU,OAAkB;AAErD,WAAO,MAAM;AACX,eAAS,SAAS,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,UAAU,WAAW,QAAQ,eAAe;AAIrD,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI;AAAI,eAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI;AAAI,iBAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-utilities",
-  "version": "3.11.0-next.2",
+  "version": "3.11.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Utilities",
   "files": [
@@ -151,7 +151,7 @@
     "typeSafety": true
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.11.0-next.2",
+    "@elliemae/ds-system": "3.11.0-next.3",
     "@elliemae/pui-theme": "~2.6.0",
     "fast-deep-equal": "~3.1.3",
     "hotkeys-js": "~3.9.3",