@os-design/use-resize-observer 1.0.22 → 1.0.24

package/dist/{types/index.d.ts → index.d.ts}

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { type RefObject } from 'react';
 declare const useResizeObserver: (target: Element | RefObject<Element>, listener: ResizeObserverCallback) => void;
 export default useResizeObserver;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAG1D,QAAA,MAAM,iBAAiB,WACb,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,YAC1B,sBAAsB,KAC/B,IAyBF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/{esm/index.js → index.js}

@@ -21,5 +21,4 @@ const useResizeObserver = (target, listener) => {
     return () => resizeObserver.unobserve(element);
   }, [target]);
 };
-export default useResizeObserver;
-//# sourceMappingURL=index.js.map
+export default useResizeObserver;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@os-design/use-resize-observer",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "src",
@@ -20,9 +20,8 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
     "ncu": "ncu -u"
   },
@@ -30,11 +29,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-browser-layout-effect": "^1.0.20",
+    "@os-design/use-browser-layout-effect": "^1.0.22",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
+  "gitHead": "211f9e5f1ecca50454cc7415359de5a4d950c7b1"
 }

package/src/index.mdx

@@ -29,7 +29,7 @@ const Container = styled.div`
 `;
 
 const UseResizeObserverExample: React.FC = () => {
-  const containerRef = useRef<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [numberOfWords, setNumberOfWords] = useState(10);
 
@@ -43,6 +43,7 @@ const UseResizeObserverExample: React.FC = () => {
   }, []);
 
   const updateContainerSize = useCallback(() => {
+    if (!containerRef.current) return;
     setSize({
       width: containerRef.current?.clientWidth,
       height: containerRef.current?.clientHeight,

package/src/index.ts

@@ -1,5 +1,5 @@
 import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';
-import { RefObject, useEffect, useRef } from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
 const useResizeObserver = (

package/dist/cjs/index.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _useBrowserLayoutEffect = _interopRequireDefault(require("@os-design/use-browser-layout-effect"));
-var _react = require("react");
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var useResizeObserver = function useResizeObserver(target, listener) {
-  var listenerRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    listenerRef.current = listener;
-  }, [listener]);
-  (0, _useBrowserLayoutEffect["default"])(function () {
-    var element;
-    if (_typeof(target) === 'object' && target !== null) {
-      element = target instanceof Element ? target : target.current;
-    }
-    if (!element) return function () {
-      return undefined;
-    };
-    var eventListener = function eventListener(entries, observer) {
-      if (!listenerRef.current) return;
-      listenerRef.current(entries, observer);
-    };
-    var resizeObserver = new _resizeObserverPolyfill["default"](eventListener);
-    resizeObserver.observe(element);
-    return function () {
-      return resizeObserver.unobserve(element);
-    };
-  }, [target]);
-};
-var _default = exports["default"] = useResizeObserver;
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_react","_resizeObserverPolyfill","obj","__esModule","_typeof","o","Symbol","iterator","constructor","prototype","useResizeObserver","target","listener","listenerRef","useRef","useEffect","current","useBrowserLayoutEffect","element","Element","undefined","eventListener","entries","observer","resizeObserver","ResizeObserver","observe","unobserve","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAC,CAAA,sCAAAD,OAAA,wBAAAE,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAF,CAAA,kBAAAA,CAAA,gBAAAA,CAAA,WAAAA,CAAA,yBAAAC,MAAA,IAAAD,CAAA,CAAAG,WAAA,KAAAF,MAAA,IAAAD,CAAA,KAAAC,MAAA,CAAAG,SAAA,qBAAAJ,CAAA,KAAAD,OAAA,CAAAC,CAAA;AAEtD,IAAMK,iBAAiB,GAAG,SAApBA,iBAAiBA,CACrBC,MAAoC,EACpCC,QAAgC,EACvB;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAyB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAK,kCAAsB,EAAC,YAAM;IAC3B,IAAIC,OAAO;IACX,IAAId,OAAA,CAAOO,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDO,OAAO,GAAGP,MAAM,YAAYQ,OAAO,GAAGR,MAAM,GAAGA,MAAM,CAACK,OAAO;IAC/D;IAEA,IAAI,CAACE,OAAO,EAAE,OAAO;MAAA,OAAME,SAAS;IAAA;IAEpC,IAAMC,aAAqC,GAAG,SAAxCA,aAAqCA,CAAIC,OAAO,EAAEC,QAAQ,EAAK;MACnE,IAAI,CAACV,WAAW,CAACG,OAAO,EAAE;MAC1BH,WAAW,CAACG,OAAO,CAACM,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAMC,cAAc,GAAG,IAAIC,kCAAc,CAACJ,aAAa,CAAC;IACxDG,cAAc,CAACE,OAAO,CAACR,OAAO,CAAC;IAE/B,OAAO;MAAA,OAAMM,cAAc,CAACG,SAAS,CAACT,OAAO,CAAC;IAAA;EAChD,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AACd,CAAC;AAAC,IAAAiB,QAAA,GAAAC,OAAA,cAEanB,iBAAiB","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEffect","useRef","ResizeObserver","useResizeObserver","target","listener","listenerRef","current","element","Element","undefined","eventListener","entries","observer","resizeObserver","observe","unobserve"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,SAAoBC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACpD,OAAOC,cAAc,MAAM,0BAA0B;AAErD,MAAMC,iBAAiB,GAAGA,CACxBC,MAAoC,EACpCC,QAAgC,KACvB;EACT,MAAMC,WAAW,GAAGL,MAAM,CAAyB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACdM,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,sBAAsB,CAAC,MAAM;IAC3B,IAAIS,OAAO;IACX,IAAI,OAAOJ,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDI,OAAO,GAAGJ,MAAM,YAAYK,OAAO,GAAGL,MAAM,GAAGA,MAAM,CAACG,OAAO;IAC/D;IAEA,IAAI,CAACC,OAAO,EAAE,OAAO,MAAME,SAAS;IAEpC,MAAMC,aAAqC,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;MACnE,IAAI,CAACP,WAAW,CAACC,OAAO,EAAE;MAC1BD,WAAW,CAACC,OAAO,CAACK,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAMC,cAAc,GAAG,IAAIZ,cAAc,CAACS,aAAa,CAAC;IACxDG,cAAc,CAACC,OAAO,CAACP,OAAO,CAAC;IAE/B,OAAO,MAAMM,cAAc,CAACE,SAAS,CAACR,OAAO,CAAC;EAChD,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;AACd,CAAC;AAED,eAAeD,iBAAiB","ignoreList":[]}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,iBAAiB,WACb,OAAO,GAAG,UAAU,OAAO,CAAC,YAC1B,sBAAsB,KAC/B,IAyBF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}